logo标签列表

在Leaflet地图上模拟点击项

javascriptleafletgeojson
13

我想在仿真点击特定地图区域时使用Leaflet的Choropleth教程。 例如： 我需要有一个函数clickOnMapItem(itemId)，它将单击由以下代码定义的地图区域。

{"type":"Feature","id":"05","properties":{"name":"Arkansas","density":56.43},"geometry":{"type":"Polygon","coordinates":[...}

我需要点击的是 "id":"05" 的 id。

我的其余代码跟示例中一样：

state-data.js:

var statesData = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-87.359 and so on

html：

...头部省略

<!-- language:lang-html -->
    <body>
        <div id="map"></div>

        <script src="dist/leaflet.js"></script>

        <script type="text/javascript" src="us-states.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">

            var map = L.map('map').setView([37.8, -96], 4);

            var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
                attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
                key: 'BC9A493B41014CAABB98F0471D759707',
                styleId: 22677
            }).addTo(map);


            // control that shows state info on hover
            var info = L.control();

            info.onAdd = function (map) {
                this._div = L.DomUtil.create('div', 'info');
                this.update();
                return this._div;
            };

            info.update = function (props) {
                this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
                    '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
                    : 'Hover over a state');
            };

            info.addTo(map);


            // get color depending on population density value
            function getColor(d) {
                return d > 1000 ? '#800026' :
                       d > 500  ? '#BD0026' :
                       d > 200  ? '#E31A1C' :
                       d > 100  ? '#FC4E2A' :
                       d > 50   ? '#FD8D3C' :
                       d > 20   ? '#FEB24C' :
                       d > 10   ? '#FED976' :
                                  '#FFEDA0';
            }

            function style(feature) {
                return {
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7,
                    fillColor: getColor(feature.properties.density)
                };
            }
            //ON HOVER HANDLER
            function highlightFeature(e) {
                var layer = e.target;
                layer.setStyle({
                    weight: 5,
                    color: '#666',
                    dashArray: '',
                    fillOpacity: 0.7
                });

                if (!L.Browser.ie && !L.Browser.opera) {
                    layer.bringToFront();
                }

                info.update(layer.feature.properties);
            }

            var geojson;

            function resetHighlight(e) {
                geojson.resetStyle(e.target);
                info.update();
            }

            function zoomToFeature(e) {

                map.fitBounds(e.target.getBounds());
            }
            //setting click handlers
            function onEachFeature(feature, layer) {

                layer.on({
                    mouseover: highlightFeature,
                    mouseout: resetHighlight,
                    click: zoomToFeature
                });
            }

            geojson = L.geoJson(statesData, {
                style: style,
                onEachFeature: onEachFeature
            }).addTo(map);

            map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');


            var legend = L.control({position: 'bottomright'});

            legend.onAdd = function (map) {

                var div = L.DomUtil.create('div', 'info legend'),
                    grades = [0, 10, 20, 50, 100, 200, 500, 1000],
                    labels = [],
                    from, to;

                for (var i = 0; i < grades.length; i++) {
                    from = grades[i];
                    to = grades[i + 1];

                    labels.push(
                        '<i style="background:' + getColor(from + 1) + '"></i> ' +
                        from + (to ? '&ndash;' + to : '+'));
                }

                div.innerHTML = labels.join('<br>');
                return div;
            };

            legend.addTo(map);


        </script>
    </body>

提前感谢你！

3个回答
19
抱歉，这是一个三年前的问题，但我会在这里尝试回答：
首先，请更新以下代码：
//setting click handlers
function onEachFeature(feature, layer) {
  layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    click: zoomToFeature
  });
  //add this line
  layer._leaflet_id = feature.id;
}
新的一行将会“分配”您的geoJSON的“id”作为您的图层的leaflet_id， 然后创建一个类似于这样的新函数：

上面的新行将“assign”您的geoJSON的“id”作为图层的leaflet_id， 然后创建以下新函数：

function clickOnMapItem(itemId) {
    var id = parseInt(itemId);
    //get target layer by it's id
    var layer = geojson.getLayer(id);
    //fire event 'click' on target layer 
    layer.fireEvent('click');  
}

所以，根本不需要填写任何坐标！！！

希望能对您有所帮助！

11

补充@snkashis的内容：fireEvent 只有在输入正确的Types时才会起作用。 这意味着需要这样做：

    var latlngPoint = new L.LatLng(x, y);
    map.fireEvent('click', {
      latlng: latlngPoint,
      layerPoint: map.latLngToLayerPoint(latlngPoint),
      containerPoint: map.latLngToContainerPoint(latlngPoint)
    });

如果地图上添加了特定的标记/图层，您也可以对其执行此操作。

4

所以你想模拟点击事件？为什么不使用Leaflet的fireEvent，像这样：map.fireEvent('click',{latlng:[x,y]})

你可能需要将layerPoint和containerPoint填入对象的参数中。

请参阅http://leafletjs.com/reference.html#mouse-event

我发现事件参数没有layer属性：http://stackoverflow.com/q/44053812/688080 - Ziyuan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接