Как маркировать полигоны GeoJSON?


9

Я использую 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
Не могли бы вы опубликовать решение, которое вы использовали для обозначения полигона, если оно еще под рукой?
августа

Ответы:


5

Вы должны знать, какую листовку формата ожидает использовать. 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/ или используйте сайт, чтобы попробовать и подтвердить свой собственный.


Не был ли вопрос о полигонах? Как ответ на вопрос о геометрии точки решил вопрос?
августа

А что такое многоугольник? Вы назовете как то же самое. Единственное, что изменится - это «геометрия». Не только решил вопрос, но получил 5 ups до сих пор.
Магно C

Позвольте мне перефразировать: у меня тот же вопрос, и размещение метки на многоугольнике совершенно отличается от размещения ее в точке, поэтому в этом контексте многоугольник означает для меня двухмерный замкнутый объект с несколькими ребрами. Вот почему я заинтересован в получении некоторых деталей, отсюда мой первый комментарий. Ответ «это действительно помогло» тогда не очень полезен, но все равно спасибо :-)
a1an

1
Просто добавьте «свойства» вещи, и все будет хорошо. Смотрите ответ @Aragon. return feature.properties.color;Как видите, propertiesэто featureатрибут, имеющий colorодин из его атрибутов. Следуя этому пути, вы можете поместить в этот объект все, что захотите.
Magno C

2
RFMсовершенно неуместно. И разница между точкой и многоугольником значительна, так как знание, какую именно геометрию использовать, именно здесь является проблемой
Стивен Лид

5

Вот как я решил эту проблему с помощью Leaflet Polygons and Labels, чтобы вы получили плавающую метку на многоугольнике со свойством name.

Предположим, что:

  • вы получите ответ json, проанализированный в переменной json
  • в json есть только простые многоугольники без дырок
  • polygon_style содержит параметры стиля, возвращаемые вашей функцией стиля
  • label_layer - это буклет Layergroup (или непосредственно ваша карта)

Затем:

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
эфир

1

я думаю, что этот вопрос о openlayers.if так, вы можете использовать для маркировки;

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}"вместо создания функции?
Магно C

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

Понял Арагон. Спасибо за новый метод. Может быть полезно в будущем. Недурно !
Магно C

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