Question

目前，我正在研究城市中十种最常见的树种的交互式地图。对于地图，我希望用户能够切换十个物种中每个物种的可见性，以及一个“所有其他”物种切换。

问题是我目前实现此目标的方法非常肿，可能会大大简化

当前，我的方法是创建一系列复选框

<input type='checkbox' id='checkbox0'checked> Check0 </input> <div></div>
<input type='checkbox' id='checkbox1'checked> Check1 </input> <div></div>
<input type='checkbox' id='checkbox2'checked> Check2 </input> <div></div>
...
<input type='checkbox' id='checkbox11'checked> Check11 </input> <div></div>

添加树木的图层并在其中设置要素的样式：

 map.addLayer({
    id: 'wpgTrees',
    type: 'circle',
    source: {
      type: 'vector',
      url: 'url_Goes_Here'
    },
    'source-layer': 'source_Goes_Here',
    'paint': {
      'circle-radius': [
        'interpolate', ['linear'], ['zoom'],
        13, 2,
        20, 4,
      ],
        'circle-color':[
            'match',
            ['get','Common_Nam'],
            'green ash',        treeColours[0], // Bright red
            'American Elm',     treeColours[1], // Orange
            'Linden species',   treeColours[2], // Blue
            'Siberian Elm',     treeColours[3], //Light red
            'bur oak',          treeColours[4], //Green, purple
            'Manitoba maple, boxelder', treeColours[5],
            'black Ash',            treeColours[6], // pink
            'Colorado blue spruce', treeColours[7], // light blue
            'Poplar species',       treeColours[8], //light green
            'white spruce',         treeColours[9], //light puruple
            treeColours[10] //All Others
        ],
    }
});

然后对每个复选框使用addEventListener（对于11层为0到10），以使用。setPaintProperty来设置每个要素的不透明度。

checkbox0.addEventListener('click',function() {
    if(treeBoolean[0] == true) {
    treeOpacity[0]=0;
    treeBoolean[0] = !treeBoolean[0];
} else {
    treeOpacity[0]=1;
    treeBoolean[0] = !treeBoolean[0];
};
    map.setPaintProperty('wpgTrees','circle-opacity',[
        'match',
        ['get','Common_Nam'],
        'green ash', treeOpacity[0],
        'American Elm',     treeOpacity[1],
        'Linden species',   treeOpacity[2],
        'Siberian Elm',     treeOpacity[3],
        'bur oak',          treeOpacity[4],
        'Manitoba maple, boxelder', treeOpacity[5],
        'black Ash',            treeOpacity[6],
        'Colorado blue spruce', treeOpacity[7],
        'Poplar species',       treeOpacity[8],
        'white spruce',         treeOpacity[9],
        1,
    ]);
})

此方法的问题在于，我将需要为所有11种功能重复代码的addEventListener部分。必须有一种更好的方法来执行此操作，因为我当前的方法将非常“膨胀”。

感谢您的时间和帮助。

Answer 1

在循环中添加复选框和处理程序将更加高效。并在循环中构造不透明度的表达式。例如，如果类型列表如下所示：

var treesTypes = [
  {
    type: 'green ash',
    color: '#ff0000',
    visible: true
  },
  ... 
];

不透明度的表达式可通过以下方式获得：

var opacity = ["match", ["get", "Common_Nam"]];
treesTypes.forEach(function(treeType) {
  opacity.push(treeType.type);
  opacity.push(treeType.visible ? 1 : 0)
});
opacity.push(1);
map.setPaintProperty('wpgTrees', 'circle-opacity', opacity);

[https://jsfiddle.net/6pvnd5xm/1/]

有效地切换图层内的要素可见性

1 个答案: