Эффективно переключать видимость объектов в слое - PullRequest
Новая
       9

Эффективно переключать видимость объектов в слое

0 голосов
/ 19 октября 2018

В настоящее время я работаю над интерактивной картой десяти самых распространенных видов деревьев в городе.Для карты я хочу, чтобы пользователи могли переключать видимость каждого из десяти видов, а также переключатель «всех других» видов.

Проблема в том, что мой нынешний метод для достижения этого очень раздутый, иможет быть значительно упрощено

В настоящее время мой метод заключается в создании серии отмеченных флажков 

<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 для каждого флажка (от 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,
    ]);
})

Проблема с этим методом заключается в том, чтоМне нужно будет повторить раздел кода addEventListener для всех 11 типов функций.Должен быть лучший способ сделать это, так как мой текущий метод очень «раздут».

Спасибо за ваше время и помощь.

1 Ответ

0 голосов
/ 20 октября 2018

Будет более эффективно добавлять флажки и обработчики в цикле.А также в цикле построить выражение для непрозрачности.Например, если список типов выглядит следующим образом: 

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/]

...