Menangani Popup di Leaflet dengan Fitur yang Tumpang Tindih?

8

Saya baru mengenal Leaflet dan juga Javascript.

Saat ini, saya mencoba membuat indeks spasial kepemilikan perpustakaan untuk peta topografi lama yang dapat diakses dan diunduh orang secara online. Sumber fitur adalah file GeoJSON.

Peta Contoh

Masalahnya adalah bahwa perpustakaan sekolah memiliki beberapa jenis peta yang sama selama bertahun-tahun, tetapi ketika saya mengklik peta, hanya satu popup yang muncul. Saya ingin opsi untuk menelusuri beberapa peta, tetapi saya tidak yakin tentang cara mendekati masalah.

Apakah ada istilah khusus dalam jargon lokal untuk bersepeda melalui poligon yang tumpang tindih, atau adakah pendekatan yang lebih kuat untuk masalah ini?

brianbancroft
sumber

Jawaban:

10

Salah satu opsi adalah menggunakan titik selebaran dalam poli (leaflet.pip) yang tersedia melalui Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ Atau sebagai plugin leaflet: https://github.com/mapbox/leaflet-pip

Biola di sini: http://jsfiddle.net/TnX96/136/ akan menunjukkan dengan tepat bagaimana ini akan bekerja. Atau lihat kode di bawah ini ....

HTML pastikan untuk memasukkan perpustakaan PIP:

<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>

Javascript:

var map = new L.Map('map', {center: new L.LatLng(51, -100), zoom: 4});
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var ggl = new L.Google();
var ggl2 = new L.Google('TERRAIN');
map.addLayer(osm);
map.addControl(new L.Control.Layers( {'Street Maps':osm, 'Satellite':ggl, 'Terrain':ggl2}, {}));

function handleClick(e) {
    var html = '';
        var match = leafletPip.pointInLayer(
            // the clicked point
            e.latlng,
            // this layer
            streets,
            // whether to stop at first match
            false);
        if (match.length) {
            for (var i = 0; i < match.length; i++) { 
                html += "<br>"+"_____"+
                        "<br><b>" + match[i].feature.properties.title + ", " + match[i].feature.properties.subtitle + ":</b>" + 
                        "<br>Scale: " + match[i].feature.properties.Scale + 
                        "<br>Year Published: " + match[i].feature.properties.year + 
                        "<br><br><b>URL for map:</b> <a>" + match[i].feature.properties.location2 + "</a>"+
                        "<br><b>URL for cropped, georeferenced map:</b> <a>"+ match[i].feature.properties.location1 + "</a>"+
                        "<br><b>URL for KML:</b> <a>" + match[i].feature.properties.location3 +"</a>"

            }
        }
    if (html) {
        map.openPopup(html, e.latlng);
    }
}

var streets = new L.geoJson(histMap)
    .on('click', handleClick)
    .addTo(map);
pengguna3103373
sumber