Menambahkan pop-up ke layer GeoJSON di Leaflet

8

Saya baru bekerja dengan Leaflet API dan saya mengalami masalah dengan membuat sembulan untuk lapisan GeoJSON. Saya telah melihat posting berikut sebagai referensi dan saya masih mengalami kesulitan: mengikat array bersarang sebagai geojson popup di leaflet

Data GeoJson saya terlihat seperti:

{
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.97364044189453,
                    40.66893768310547
                ]
            },
            "type": "Feature",
            "properties": {
                "lon": -73.97364044189453,
                "lat": 40.66893768310547,
                "version": "1.1",
                "t": 1381167616,
                "device": "iPhone3,3",
                "alt": 67,
                "os": "6.1.3"
            }
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.96121215820312,
                    40.66240692138672
                ]
            },
            "type": "Feature",
            "properties": {
                "lon": -73.96121215820312,
                "lat": 40.66240692138672,
                "version": "1.1",
                "t": 1381171200,
                "device": "iPhone3,3",
                "alt": 45,
                "os": "6.1.3"
            }
        }

    ]
}

Leaflet js saya adalah sebagai berikut:

// create a variable to load Stamen 'toner' tiles
var layer = new L.StamenTileLayer("toner");

// initialize and set map center and zoom
var map = L.map('map', {
    center: new L.LatLng(40.67, -73.94),
    zoom: 12
});

// create the map 
map.addLayer(layer);

// on each feature use feature data to create a pop-up
function onEachFeature(feature, layer) {

    if (feature.properties) {

        var popupContent;
        popupContent = feature.properties.t;

        console.log(popupContent);    
    }
    layer.bindPopup(popupContent);
}

// grab the processed GeoJSON through ajax call
var geojsonFeature = (function() {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "/data/test_random.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();

// create an object to store marker style properties
var geojsonMarkerOptions = {
    radius: 10,
    fillColor: "rgb(255,0,195)",
    color: "#000",
    weight: 0,
    opacity: 1,
    fillOpacity: 1
};

// load the geojson to the map with marker styling
L.geoJson(geojsonFeature, {

    style: function (feature) {
        return feature.properties && feature.properties.style;
    },

    onEachFeature: onEachFeature,

    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map);

The console.log(popupContent);panggilan dalam onEachFeaturefungsi mengembalikan data, namun ketika saya klik pada poin GeoJSON di peta saya mendapatkan error berikut: Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

Saya sudah mencoba melihat ke dalam ini tanpa hasil sejauh ini.

clhenrick
sumber

Jawaban:

8

Berikut ini contoh yang saya miliki tentang memuat geojson dari layanan WFS: http://maps.gcc.tas.gov.au/dogexerciseareas.html

Ini adalah contoh lain memuat topojson (serupa, tetapi berbeda): http://agl.pw/examples/NRM_Regions/map.html

Berikut ini beberapa kode sederhana yang saya gunakan untuk memuat sebuah layer:

var myLayer = L.geoJson().addTo(map);
$.getJSON("data/buildings.json", function(json) {
  myLayer.addData(json);
});

Kemudian Anda dapat melakukan interaktivitas dan gaya dengan sesuatu seperti ini:

    success : function (response) {
        DogExerciseAreas = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 200};
                layer.bindPopup("<b>Site name:</b> " + feature.properties.sitename +
                    "<br><b>Dog Exercise: </b>" + feature.properties.dog_exercise +
                    "<br><br>Please ensure that tidy up after your dog. Dogs must be kept under effective control at all times."
                    ,popupOptions);
            }
        }).addTo(map);
    }

EDIT: contoh dari situs web leaflet tentang poin gaya (dari sini http://leafletjs.com/examples/geojson.html ):

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJson(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

EDIT2: Menambahkan solusi untuk masalah ini. Lihat di sini: https://gist.github.com/alexgleith/7112515

Yang perlu Anda lakukan sekarang adalah mengedit bit yang bertuliskan 'popupContent' untuk menambahkan bit Anda dan mengubah kode untuk memuat data dari file.

Alex Leith
sumber
terima kasih alexgleith, ini tampaknya berhasil dan melihat contoh Anda sangat membantu. Meskipun bagaimana saya menambahkan fungsi pointToLayer yang menampilkan data titik sebagai penanda lingkaran?
clhenrick
Pertanyaan bagus, saya menambahkan sedikit ke bagian bawah posting saya. Saya pikir Anda pada dasarnya dapat melakukan itu dengan gaya untuk poin yang dibuat.
Alex Leith
jadi saya bisa mendapatkan penanda gaya default agar pop-up berfungsi, tetapi bukan penanda lingkaran. Untuk beberapa alasan ketika saya menyatukan ini sepertinya tidak berfungsi: pastebin.com/T9E9XpQM Jika Anda menghapus baris 68-70 pop-up berfungsi. sampai sekarang fungsi pointToLayer tidak mengubah gaya titik. Apakah saya memilikinya di tempat yang salah dalam kode saya?
clhenrick
Coba tambahkan ini: .bindPopup ("<b> Waktu: </b>" + waktu + "<br> <b> Ketinggian: </b>" + feature.properties.alt + "meter", popupOptions); ke akhir baris 69 Anda melakukan semuanya dua kali, saya pikir!
Alex Leith
1
Menambahkan inti dengan solusinya. Mungkin Anda bisa mencoba menjaga kode Anda tetap rapi dan rapi di masa depan! Anda punya bit di mana-mana! Beri tahu saya jika Anda kesulitan membuat kode saya berfungsi. Anda dapat melihatnya di sini: rawgithub.com/alexgleith/7112515/raw/…
Alex Leith