Openlayers 6 - 如何从下拉菜单中 select 矢量层

Question

在我的地图上，背景中有一个 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。例如，如果用户 select Line 1A 在下拉菜单中，VectorLayer 将从默认更改为层 layer1a，如果用户 select 另一个选择，VectorLayer 将从layer1a 那个选择。

感谢您的帮助。

Answer 1

您可以通过多种方式完成。

1- 切换可见性：您可以将所有 4 个图层添加到地图。当用户 select 下拉菜单中的一个图层时，您应该将该图层 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-更改源：您也可以更改图层源。这样，您应该只添加一层。当用户 selects 来自列表时，您需要替换图层源并重新渲染它。所以层将被改变。

希望对您有所帮助

Openlayers 6 - 如何从下拉菜单中 select 矢量层

Openlayers 6 - How can I select vector layer from drop down menu

openlayers

openlayers-6