如何使用leaflet.js在多个地图图例之间切换? [英] How to switch between multiple map legends with leaflet.js?

问题描述

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

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

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上的地图示例. 我将不胜感激.

解决方案

VODlegend || BUDlegend || LISlegend

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

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

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/

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.

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);
    }
  })

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

解决方案

VODlegend || BUDlegend || LISlegend

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);
    }
  })

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

这篇关于如何使用leaflet.js在多个地图图例之间切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！