0

在我的地图上，背景中有一个 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应该如何？，是可以value在 HTML 下拉菜单中更改的 VectorLayerGroup。例如，如果用户Line 1A在下拉菜单中选择，则 VectorLayer 将从默认更改为 layer layer1a，如果用户选择另一个选项，则 VectorLayer 将从layer1a该选项更改。

谢谢您的帮助。

4

1 回答 1

0

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

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

希望这可以帮助

于 2019-12-15T07:10:20.000 回答