Como lidar com pop-ups no folheto com recursos sobrepostos?


8

Eu sou novo no Leaflet e também no Javascript.

Atualmente, estou tentando criar um índice espacial de acervos de bibliotecas para mapas topográficos antigos que as pessoas podem acessar e baixar online. A fonte dos recursos é um arquivo GeoJSON.

Mapa de exemplo

O problema é que a biblioteca da escola tem vários tipos do mesmo mapa ao longo dos anos, mas quando clico em um mapa, apenas um pop-up aparece. Quero a opção de percorrer vários mapas, mas não tenho certeza de como abordar o problema.

Existe um termo especial no jargão local para percorrer polígonos sobrepostos ou existe uma abordagem mais forte para esse problema?

Respostas:


10

Uma opção seria usar o ponto do folheto em poly (leaflet.pip), disponível no Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ Ou como um plugin do folheto: https://github.com/mapbox/leaflet-pip

O violino aqui: http://jsfiddle.net/TnX96/136/ mostrará exatamente como isso funcionaria. Ou veja o código abaixo ....

HTML certifique-se de incluir a biblioteca 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);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.