openlayers中添加button按鈕，如何使button按鈕來控制事件的開關？-有解無憂

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://bbs.csdn.net/v6.4.3/css/ol.css" rel="stylesheet">
    <script type="text/javascript" src="https://bbs.csdn.net/v6.4.3/build/ol.js"></script>
    <style>
        #map{
            width: 100%;
            height: 800px;
        }
    </style>
</head>

<body>


    <div id="map"> </div>

    <script>

        //加注釋，介面用法，時間，存在問題等········
        var map = new ol.Map({
            target: 'map',                   //關聯到對應的Div容器
            layers: [
                new ol.layer.Tile({                            //瓦片圖層
                    extent:[-180.0, 0.0, 180.0, 90.0],
                   source: new ol.source.OSM()     //  OpenStreetMap資料源
                }),

            ],
            view: new ol.View({                    //地圖視角
                projection: 'EPSG:4326',
                center: [120.15,30.28],
                zoom: 10
            })
        });


  // 設定標注的樣式
        let iconFeature1 = new ol.Feature({
            geometry: new ol.geom.Point([120.15,30.28])
        });
        let iconFeature2 = new ol.Feature({
            geometry: new ol.geom.Point([120.75,30.75])
        });
        let iconFeature3 = new ol.Feature({
            geometry: new ol.geom.Point([121.55,29.88])
        });
        //連線
        let wireFeature = new ol.Feature({
  geometry:new ol.geom.LineString([[120.15,30.28], [120.75,30.75], [121.55,29.88]])
});

    // 點樣式
    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon(({
        anchor: [0.5, 0.5],
        src: '../marker.png',
      }))
    });

    // 要素添加樣式
    iconFeature1.setStyle(iconStyle);
    iconFeature2.setStyle(iconStyle);
    iconFeature3.setStyle(iconStyle);

    // 矢量圖層資料來源
    var vectorSource = new ol.source.Vector({
      features: [iconFeature1, iconFeature2,iconFeature3,wireFeature]
    });

    // 矢量圖層
    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
    });


       //將矢量圖層添加進地圖
        map.addLayer(vectorLayer);



    </script>
</body>
</html>

如上述代碼中所顯示，如何添加button按鈕來控制連線事件的開關呢？

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/13716.html

標籤：HTML5

上一篇：使用NPOI進行資料匯入

下一篇：按照視頻原始碼寫的為啥運行不了，求大神解答感謝~