Як позначити полігони GeoJSON?


10

Я використовую Leaflet у поєднанні з функціями GeoJSON. Чи є спосіб позначити функції GeoJSON (у даному випадку - багатокутники)? Слід отримати етикетки від

feature.properties.name 

Це мій код, куди я думаю, що міг би вставити мітку:

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

1
Ви б не хотіли розмістити рішення, яке використовували для позначення багатокутника, якщо все ще під рукою?
a1an

Відповіді:


6

Вам потрібно знати листівку формату, яку очікує використовувати. RFM. Приклад: OpenLayers очікує, що цей формат GeoJSON створить точку та надасть деякі власні атрибути:

{"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]
            }
        }
    ]
}

Як бачите, я створив геометрію (точку) і приєднав до неї свої атрибути. Коли я надсилаю це на OpenLayers, результат підходить для прикладу @ Aragon, використовуючи "color" та "name" (як мітка) для налаштування точки на карті.

Скопіюйте та вставте цей приклад GeoJSON на http://json.parser.online.fr/ або скористайтеся сайтом, щоб спробувати і перевірити свій власний.


Не було питання про багатокутники? Як відповідь про геометрію точки вирішила питання?
a1an

А що таке багатокутник? Ви будете називати так само. Єдине, що зміниться - це частина "геометрії". Не тільки вирішили питання, але отримали 5 підйомів до цих пір.
Magno C

Дозвольте перефразувати: у мене те саме питання, і розміщення мітки на полігоні зовсім інше, ніж розміщення його в точці, тому полігон означає для мене двомірний закритий об'єкт з декількома ребрами в цьому контексті. Ось чому я зацікавлений отримати деякі деталі, звідси і мій перший коментар. Відповідь "це все вирішило" не дуже корисна, але все одно дякую :-)
a1an

1
Просто додайте речі "властивості" і все буде добре. Дивіться відповідь @Aragon return feature.properties.color;Як бачите, propertiesце featureатрибут та є colorодним із його атрибутів. Ви можете помістити все, що завгодно, в цей об’єкт, слідуючи цим способом.
Magno C

2
RFMабсолютно не вимагається. А різниця між точкою та багатокутником є ​​значною, адже саме тут знаємо, яку геометрію використовувати
Стівен Ведучий

5

Ось як я вирішив це за допомогою листочків полігонів та міток, щоб ви отримали плаваючу мітку на полігоні з властивістю його імені.

Припустимо:

  • ви отримаєте відповідь json, розібрану в змінну json
  • в json є лише прості багатокутники без дірок
  • polygon_style містить параметри стилю, повернуті функцією вашого стилю
  • labels_layer - це листівка групи шарів (або безпосередньо ваша карта)

Тоді:

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))  ;
}

Як не дивно, GeoJson (фактично EPSG: 4326) та координати Leaflet змінюються по порядку.


1
Для тих, хто використовує Leaflet 1.0+, L.Label переміщено в ядро ​​Leaflet як L.Tooltip, а плагін застарілий. Ви б використовували bindTooltip () замість bindLabel (). github.com/Leaflet/Leaflet.label
aethergy

1

я думаю, що це питання стосується openlayers. Якщо так, ви можете використовувати для маркування;

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;
      }
    }
  );

я сподіваюся, що це допоможе тобі ...


1
Це не OpenLayers. Я використовую Leaflet у поєднанні з функціями GeoJSON. Так що це не працює. Але дякую за спробу.
проти потоку

Чому ви не fillColor: "${color}"замість цього створюєте функцію?
Magno C

1
@Magno C різниці між вашою точкою немає. Робота з них однакова. Я написав це для, якщо ви хочете додати більш складну функцію як довільний колір або щось інше. все ще дякую за вашу думку.
Арагон

Розумів Арагон. Дякуємо за новий метод. Може бути корисним у майбутньому. Пальці вгору !
Magno C

Я думаю, що немає способу, щоб @againstflow закінчився з формату, який я показав, оскільки тут є специфікація, що указує GeoJSON: посилання
Magno C
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.