Jak oznaczyć wielokąty GeoJSON?


10

Używam Ulotki w połączeniu z funkcjami GeoJSON. Czy istnieje sposób na oznaczenie obiektów GeoJSON (w tym przypadku - wielokątów)? Powinien uzyskać etykiety od

feature.properties.name 

To jest mój kod, w którym myślę, że mógłbym wstawić etykietę:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }

1
Czy mógłbyś opublikować rozwiązanie, którego użyłeś do oznaczenia wielokąta, jeśli nadal jest pod ręką?
a1an

Odpowiedzi:


6

Musisz wiedzieć, która ulotka formatu będzie używana. RFM. Przykład: OpenLayers oczekuje, że ten format GeoJSON utworzy punkt i poda pewne niestandardowe atrybuty:

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
            "properties":{
                "name":"TRON-02",
                "serial":"TRON002",
                "bearing":0,
                "color":"green",
                "size":15,
                "image":"img/unit_map3.png",
            },
            "geometry":{
                "type":"Point",
                "coordinates":[-50.06542968749966,-23.749149728383717]
            }
        }
    ]
}

Jak widać, stworzyłem geometrię (punkt) i dołączam do niej moje atrybuty. Kiedy wyślę to do OpenLayers, wynik zmieści się w przykładzie @ Aragon, używając „koloru” i „nazwy” (jako etykiety), aby dostosować punkt na mapie.

Skopiuj i wklej ten przykład GeoJSON w http://json.parser.online.fr/ lub użyj witryny, aby spróbować zweryfikować własną.


Czy nie było pytania o wielokąty? Jak odpowiedź na temat geometrii punktu rozwiązała pytanie?
a1an

A co to jest wielokąt? Nazwiesz to samo. Jedyne, co się zmieni, to część „geometrii”. Nie tylko rozwiązało to pytanie, ale do tej pory otrzymało 5 poprawek.
Magno C

Pozwólcie, że ponownie sformułuję: mam to samo pytanie i umieszczenie etykiety na wielokącie jest zupełnie inne niż umieszczenie jej w punkcie, więc wielokąt oznacza dla mnie dwuwymiarowy zamknięty obiekt z kilkoma krawędziami, w tym kontekście. Dlatego jestem zainteresowany uzyskaniem pewnych szczegółów, stąd mój pierwszy komentarz. Odpowiedź „to rozwiązało” nie jest więc tak pomocna, ale i tak dziękuje :-)
a1an

1
Wystarczy dodać „właściwości”, a wszystko będzie dobrze. Zobacz odpowiedź @Aragon return feature.properties.color;Jak widać, propertiesjest featureatrybutem i ma colorjako jeden z jego atrybutów. W ten sposób możesz włożyć dowolny obiekt do tego obiektu.
Magno C

2
RFMjest całkowicie nieuzasadniony. Różnica między punktem a wielokątem jest znacząca, ponieważ znajomość używanej geometrii jest właśnie tutaj problemem
Stephen Lead

5

Oto jak rozwiązałem go za pomocą wielokątów ulotek i etykiet, dzięki czemu uzyskasz pływającą etykietę na wielokącie z jego właściwością name.

Przypuszczać:

  • otrzymujesz odpowiedź json parsowaną do zmiennej json
  • są tylko proste wielokąty bez dziur w Jsonie
  • polygon_style przechowuje opcje stylu zwrócone przez funkcję stylu
  • label_layer to ulotka Layergroup (lub bezpośrednio twoja mapa)

Następnie:

for ( var i=0; i < json.features.length; i++ ) {
    feat = json.features[i];
    coords = [];
    for ( var j = 0 ; j < feat.geometry.coordinates[0].length - 1; j++ ) {
        coord = feat.geometry.coordinates[0][j];
        point = [];
        point.push( coord[1], coord[0]);
        coords.push( point );
    }
    labels_layer.addLayer(L.polygon( coords, polygon_style ).bindLabel(feat.properties.name))  ;
}

Co dziwne, GeoJson (właściwie EPSG: 4326) i współrzędne ulotki są zamieniane w kolejności.


1
Dla osób korzystających z Ulotki 1.0+, L.Label został przeniesiony do rdzenia Ulotki jako L.Tooltip, a wtyczka jest przestarzała. Używałbyś bindTooltip () zamiast bindLabel (). github.com/Leaflet/Leaflet.label
aethergy

1

myślę, że to pytanie dotyczy openlayers.if, więc możesz użyć do etykietowania;

var style = new OpenLayers.Style({
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7,
    fillColor: "${getColor}",  
    label: "${getLabel}"
  } , {
    context: {
      getColor: function(feature) {
        return feature.properties.color;
      },
      getLabel: function(feature) {
        return feature.properties.name;
      }
    }
  );

Mam nadzieję, że Ci to pomoże...


1
To nie są OpenLayers. Używam Ulotki w połączeniu z funkcjami GeoJSON. Więc to nie działa. Ale dziękuję za próbę.
przeciw przepływowi

Dlaczego nie fillColor: "${color}"tworzysz funkcji?
Magno C,

1
@Magno C nie ma różnicy między twoim punktem. Oba są takie same. Napisałem to dla, jeśli chcesz dodać bardziej skomplikowaną funkcję jako losowy kolor lub cokolwiek innego. wciąż dziękuję za twój punkt.
Aragonia

Zrozumiałem Aragonię. Dzięki za nową metodę. Może być przydatny w przyszłości. Kciuki w górę !
Magno C,

Myślę, że nie ma mowy, aby @againstflow skończył się z formatu, który pokazuję, ponieważ tutaj jest specyfikacja GeoJSON: link
Magno C
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.