Openlayers 6 - 如何从下拉菜单中选择矢量图层答案

【问题标题】：Openlayers 6 - How can I select vector layer from drop down menuOpenlayers 6 - 如何从下拉菜单中选择矢量图层
【发布时间】：2019-12-15 15:10:20
【问题描述】：

在我的地图上，背景中有一个 OpenStreetMap 瓷砖，顶部有一个 VectorLayer。现在我希望用户通过下拉菜单更改 VectorLayer。我怎样才能做到这一点？

这是我的 HTML 下拉菜单代码：

<select id="line">
    <option value="1a">Line 1A</option>
    <option value="1b">Line 1B</option>
    <option value="2a">Line 2A</option>
    <option value="2b">Line 2B</option>
</select>

这是我的地图脚本：

      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM({
            url: 'tiles/{z}/{x}/{y}.png',
            crossOrigin: null,
            })
          }), linelayergroup
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([100.568, 14.353]),
          zoom: 14,
          minZoom: 14,
          maxZoom: 19,
          extent: [11187608.82, 1608083.02, 11203003.55, 1621297.19],
          constrainResolution: true
        })
      });

这是我的 VectorLayer 1a 脚本：

    var layer1a = new ol.layer.Vector({
        source: source1a,
        style: function(feature) {
            allbusstyle.getText().setText(feature.get('name'));
            return allbusstyle;
        }
    });

var linelayergroup的代码应该是怎样的？，就是HTML下拉菜单中value可以改变的VectorLayerGroup。例如，如果用户在下拉菜单中选择Line 1A，VectorLayer 将从默认层变为layer1a，如果用户选择另一个选项，VectorLayer 将从layer1a 变为该选项。

感谢您的帮助。

【问题讨论】：

标签： openlayers openlayers-6

【解决方案1】：

您可以通过多种方式做到这一点。

1- 切换可见性：您可以将所有 4 个图层添加到地图中。当用户在下拉菜单中选择一个图层时，您应该将该图层转为visible 并让其他图层为hidden。
这可以通过下拉菜单上的事件处理程序轻松完成（您应该在change 切换图层的可见性）。

var object = document.getElementById("line");
object.addEventListener("change", function(){
    layer1a.setVisible(false);
    // same for other layers

    switch(object.value){
        case "1a":
            layer1a.setVisible(true);
            break;
        // same for other layers
    }
});

2- 更改来源：您也可以更改图层来源。这样，您应该只添加一层。当用户从列表中选择时，您需要替换图层源并重新渲染它。所以图层会改变。

希望对你有帮助

【讨论】：

是的！我懂了。我已经使用了你的代码，它工作正常。谢谢。