Leaflet Choropleth Map - 切换到Leaflet 1.2

时间:2017-12-06 20:54:13

标签: leaflet geojson interactive

我的地图有问题。我切换到Leaflet 1.2,其中一个功能无法正常工作。 代码在这里:

http://mapaszlakow.eu/mapa1.2.html

当通过js激活geojson的叠加层并单击自行车路线时,它会放大到路线但不会突出显示,并且信息窗口不会显示。 这是完全相同的例子,但是在老版本的Leaflet上(我认为它是0.7)。

http://mapaszlakow.eu/

我无法找到问题,我唯一能做的就是转向Leaflet 1.2,我会很乐意帮助你。

编辑:我相信,问题出在这里:

    function select(layer) {
    info.update(layer.feature.properties);
    if (selected !== null) {
        var previous = selected;
    }
    map.fitBounds(layer.getBounds());
    selected = layer;
    if (previous) {
        dehighlight(previous);
    }
    }

    var selected = null;

1 个答案:

答案 0 :(得分:0)

我已经从http://mapaszlakow.eu/mapa1.2.html测试了您的代码并且它几乎正常 - 在悬停时它会正确地突出显示路线,点击它会缩放到路线范围 - 除了显示弹出信息。要解决此问题,请查看我从您的代码中制作的小提琴:

http://jsfiddle.net/5z17y5oL/18/ (必须通过http访问此小提琴,因为您的服务器无法通过https提供数据)

主要区别在于我将参数传递给info.update(e.feature.properties);次出现。

修改

我编辑的小提琴在这里:http://jsfiddle.net/5z17y5oL/25/

所以我移动了要从图层点击监听器调用的info.update(e.feature.properties);。在地图上,点击图层样式会重置,并且信息正在清除,因为它正在接收空。

.....
onEachFeature: function(feature, layer) {
    layer.on({
      .....
      'click': function(e) {
        select(e.target);
        info.update(e.feature.properties);
      }
    });
    map.on({
      'click': function(e) {
        bicyclegeojson.resetStyle(layer);
        info.update(null);
        selected = null;
      }
    });
....

//编辑结束

还有一件事 - 你有小错误,你应该改变这一行:

map.addControl(layerControl).addTo(map);

map.addControl(layerControl);