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;
        }
    });

HTML ドロップダウン メニューでvar linelayergroup変更できる VectorLayerGroup である必要があります。valueたとえば、ユーザーLine 1Aがドロップダウン メニューで選択すると、VectorLayer は default から 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- ソースの変更: レイヤーのソースを変更することもできます。このように、レイヤーを 1 つだけ追加する必要があります。ユーザーがリストから選択すると、レイヤーソースを置き換えて再レンダリングする必要があります。レイヤーが変更されます。

お役に立てれば

于 2019-12-15T07:10:20.000 に答える