如何从地图外部与传单标记层进行交互?

2022-01-12 00:00:00 geojson leaflet jquery javascript

我有一张传单地图，显示公共艺术作品的点，从 GeoJSON 渲染.在地图旁边，我从相同的 GeoJSON 数据创建了一个片段列表，并且希望能够单击地图外列表中的项目，并在地图上显示相关标记的弹出窗口.

I have a leaflet map showing points for public art pieces, rendered from GeoJSON. Next to the map, I created a list of the pieces from the same GeoJSON data and want to be able to click on an item from the list outside of the map and have the related marker's popup come up on the map.

如何通过点击事件将项目列表链接到它们各自的标记?

How can I link the list of items to their respective markers through a click event?

我的 map.js 文件如下所示:

My map.js file looks like this:

var map;
var pointsLayer;

$(document).ready(function () {
    map = new L.Map('mapContainer');
    var url = 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
    var copyright = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';
    var tileLayer = new L.TileLayer(url, {
        attribution: copyright
    });
    var startPosition = new L.LatLng(41.883333, - 87.633333);
    map.on('load', function (e) {
        requestUpdatedPoints(e.target.getBounds())
    });
    map.setView(startPosition, 13).addLayer(tileLayer);
    map.on('moveend', function (e) {
        requestUpdatedPoints(e.target.getBounds())
    })
});

function requestUpdatedPoints(bounds) {
    $.ajax({
        type: 'GET',
        url: '/SeeAll',
        dataType: 'json',
        data: JSON.stringify(bounds),
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            parseNewPoints(result);
            addToList(result)
        },
        error: function (req, status, error) {
            alert('what happen? did you lose conn. to server ?')
        }
    })
}

function addToList(data) {
    for (var i = 0; i < data.features.length; i++) {
        var art = data.features[i];
        $('div#infoContainer').append('<a href="#" class="list-link" title="' + art.properties.descfin + '"><div class="info-list-item">' + '<div class="info-list-txt">' + '<div class="title">' + art.properties.wrknm + '</div>' + '<br />' + art.properties.location + '</div>' + '<div class="info-list-img">' + art.properties.img_src + '</div>' + '<br />' + '</div></a>')
    }
    $('a.list-link').click(function (e) {
        alert('now you see what happens when you click a list item!');
        e.preventDefault()
    })
}

function parseNewPoints(data) {
    if (pointsLayer != undefined) {
        map.removeLayer(pointsLayer)
    }
    pointsLayer = new L.GeoJSON();
    var geojsonMarkerOptions = {
        radius: 8,
        fillColor: "#FF6788",
        color: "YELLOW",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.5
    };
    L.geoJson(data, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions)
        },
        onEachFeature: function (feature, pointsLayer) {
            pointsLayer.bindPopup(feature.properties.img_src + "<br />" + feature.properties.wrknm + "<br />" + feature.properties.artist + "<br />" + feature.properties.location + '<div class="description">' + feature.properties.descfin + '</div>')
        }
    }).addTo(map)
}

推荐答案

Felix Kling 是对的，但我会稍微扩展他的评论......

Felix Kling is right but I'll expand on his comment a little bit...

由于 L.LayerGroup 和 L.FeatureGroup(从 L.GeoJSON 扩展而来)没有检索各个层的方法，您需要从 L.GeoJSON 扩展并添加这样的方法，或者保留您自己的单独映射从 GeoJSON 到 CircleMarker 的唯一 ID.

Since L.LayerGroup and L.FeatureGroup (which L.GeoJSON extends from) don't have methods to retrieve individual layers you will need to either extend from L.GeoJSON and add such a method or keep your own seperate mapping from unique ID to CircleMarker from GeoJSON.

GeoJSON 不需要唯一 ID，但我假设您的提要中的标记具有称为id"的唯一 ID 属性.您需要将此唯一 ID 添加到用户可以单击的链接中，以便链接可以选择地图上的正确标记.然后，您需要将 id 映射存储到标记，以便检索标记以在地图上选择它.

GeoJSON does not require a unique ID but I'll assume that markers in your feed have a unique ID attribute called "id". You will need to add this unique ID to the links that the user can click on so that the links can select the right marker on the map. Then you'll need to store a map of ids to markers in order to retrieve the marker to select it on the map.

markerMap = {}; // a global variable unless you extend L.GeoJSON

// Add the marker id as a data item (called "data-artId") to the "a" element
function addToList(data) {
    for (var i = 0; i < data.features.length; i++) {
        var art = data.features[i];
        $('div#infoContainer').append('<a href="#" class="list-link" data-artId="'+art.id+'" title="' + art.properties.descfin + '"><div class="info-list-item">' + '<div class="info-list-txt">' + '<div class="title">' + art.properties.wrknm + '</div>' + '<br />' + art.properties.location + '</div>' + '<div class="info-list-img">' + art.properties.img_src + '</div>' + '<br />' + '</div></a>')
    }
    $('a.list-link').click(function (e) {
        alert('now you see what happens when you click a list item!');

        //Get the id of the element clicked
        var artId = $(this).data( 'artId' );
        var marker = markerMap[artId];

        //since you're using CircleMarkers the OpenPopup method requires
        //a latlng so I'll just use the center of the circle
        marker.openPopup(marker.getLatLng());
        e.preventDefault()
    })
}

从服务器获取数据时需要构建markerMap.您的 pointToLayer 方法可以修改为:

You need to build the markerMap when you get the data from the server. Your pointToLayer method could be modified to do that:

L.geoJson(data, {
    pointToLayer: function (feature, latlng) {
      var marker = new L.CircleMarker( latlng, geojsonMarkerOptions );
      markerMap[feature.id] = marker;
      return marker;
    },...

相关文章