Як позначити полігони 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.