如何使用leaflet.js 在多个地图图例之间切换?

2022-01-12 00:00:00 legend leaflet javascript maps

我正在使用leaflet.js 库根据统计数据创建多个地图.每个地图显示不同的值范围，因此当用户更改地图时更改图例会很好.

I`m using leaflet.js library to create multiple maps based on statistical data. Each map displays different range of values so it would be nice to change legend when user change map.

我在这个问题中找到了类似的例子，但我需要在两个以上的层之间切换.我尝试在代码中简单地添加更多if"语句和逻辑运算符，但它不能正常工作:

I found similar example in this question, but I need to switch between more than two layers. I try simply add more "if" statments and logical operators in code, but it doesn`t work right:

map.on('baselayerchange', function (eventLayer) {
    if (eventLayer.name === 'Agricultural') {
        map.removeControl(VODlegend || BUDlegend || LISlegend);
        SGlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Building') {
        map.removeControl(SGlegend || LISlegend || VODlegend);
        BUDlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Forest') {
        map.removeControl(BUDlegend || VODlegend || SGlegend);
        LISlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Water') {
        map.removeControl(LISlegend || SGlegend || BUDlegend);
        VODlegend.addTo(map);
    }
  })

这是我在 jsfiddle 上的地图示例.如果有任何帮助，我将不胜感激.

Here is example of my map on jsfiddle. I would be grateful for any help.

推荐答案

视频传奇 ||BUD传奇 ||LIS传奇

VODlegend || BUDlegend || LISlegend

在 javascript 中，这是一个条件(结果为真或假)...不是您期望的列表

In javascript, this is a condition (result is true or false) ... not a list as you expect

你需要像这样跟踪你当前的控件

You need to keep track of your current control like that

SGlegend.addTo(map);
currentLegend = SGlegend;


map.on('baselayerchange', function (eventLayer) {
    if (eventLayer.name === 'Agricultural') {
        map.removeControl(currentLegend );
        currentLegend = SGlegend;
        SGlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Building') {
        map.removeControl(currentLegend );
        currentLegend = BUDlegend;
        BUDlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Forest') {
       map.removeControl(currentLegend );
        currentLegend = LISlegend;
        LISlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Water') {
       map.removeControl(currentLegend );
        currentLegend = VODlegend;
       VODlegend.addTo(map);
    }
  })

修改后的小提琴在这里:http://jsfiddle.net/FranceImage/X678g/

Modified fiddle is here: http://jsfiddle.net/FranceImage/X678g/

相关文章