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.