Я хочу связать дополнительную информацию из геойсона с всплывающим маркером листовки. Я посмотрел несколько вещей из документации листовки, но она не работает.

var map = L.map('map').setView([51.9, 7.6], 11);

L.tileLayer('http://{s}.tile.cloudmade.com/5e4495ff4b0d454eb0443225198b7e6c/997/256/{z}/{x}/{y}.png', {
    maxZoom: 16
}).addTo(map);

var polygon = {
    "type": "Feature",
    "properties": {
        "name":"City BoundingBox",
        "style": {
            "color": "#004070",
            "weight": 4,
            "opacity": 1
        }
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [7.5,52.05],                
            [7.7,51.92],
            [7.6,51.84],
            [7.4,51.94],
            [7.5,52.05]
        ]]
    }
};

var myLayer = L.geoJson().addTo(map);
//myLayer.addData(polygon);

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

<?php 
    $mdjson = file_get_contents("http://xxx/ows?service=WFS&version=1.0.0&outputFormat=JSON&request=GetFeature&typeName=xx:yy&maxFeatures=50");
    echo "var geojsonMD = ".$mdjson.";";    
?>

myLayer.addData(geojsonMD);

L.geoJson(geojsonMD, {
    style: function (feature) {
        return {color: feature.properties.color};
    },
    onEachFeature: function (feature, myLayer) {
        layer.bindPopup(feature.properties.description);
    }
}).addTo(map);

Надеюсь, ты сможешь мне помочь.

С уважением.

8
juhnz 24 Янв 2013 в 21:16

3 ответа

Лучший ответ

Предполагая, что служба возвращает данные с такими же свойствами, как у многоугольника, вы действительно можете добавить их в один и тот же слой.

var myLayer = L.geoJson(geojsonMD, {
     style: function (feature) {
         return feature.properties.style;
     },
     onEachFeature: function (feature, layer) {
         layer.bindPopup(feature.properties.name);
     }
 })

myLayer.addData(polygon);
myLayer.addTo(map);

http://jsfiddle.net/Wn5Kh/ (без загруженных данных, поскольку у меня нет URL)

Если geojsonMD имеет разные свойства объектов, нет ничего плохого в добавлении двух слоев GeoJson. Один для данных, которые вы получаете из сервиса, а другой с полигоном.

13
flup 26 Янв 2013 в 15:38

Теперь это работает. Я хотел, чтобы листовка автоматически получала координаты и информацию об объекте от wfs и добавляла их на карту.

Вот рабочий код и спасибо за вашу помощь =)

<?php 
                    echo "var geojsonMD = ".$mdjson.";";    
?>

 myLayer.addData(geojsonMD);

 var myLayer = L.geoJson(geojsonMD, {
 style: function (feature) {
     return feature.properties.style;
 },
 onEachFeature: function (feature, layer) {

        var strtype = '';

        if (feature.properties.mdtype == 0) {
            strtype = 'aaa';
        } else if (feature.properties.mdtype == 1) {
            strtype = 'bbb';
        }


     layer.bindPopup('<b>' + feature.properties.mdname + '</b><br>'
                        + strtype + '<br><br>'
                        + feature.properties.mdadress + '<br>'
                        + feature.properties.mdfon);
   }
   })
        myLayer.addTo(map);
1
juhnz 28 Янв 2013 в 18:47

Как объяснено в документации Leaflet, вы должны использовать «onEachFeature», чтобы прикрепить всплывающее окно с необходимой информацией к каждой функции вашего GeoJson:

Опция onEachFeature - это функция, которая вызывается для каждого объекта перед его добавлением в слой GeoJSON. Распространенной причиной использования этой опции является прикрепление всплывающих окон к функциям при их нажатии.

Вы можете использовать это так:

var myLayer = L.geoJson(polygon, {
    onEachFeature: yourOnEachFeatureFunction
}).addTo(map);

function yourOnEachFeatureFunction(feature, layer){
    if (feature.properties.name) {
        layer.bindPopup(feature.properties.name);
    }
}

В этом примере во всплывающем окне будет отображаться содержимое свойства «имя» для каждой выбранной функции.

1
Etienne Desgagné 24 Янв 2013 в 18:34