初學ol，實現了高德地圖不同圖層的切換、交互性地圖飛行以及加載本地JSON數據。

說一下不同圖層切換的想法：

1.對于標準地圖和衛星地圖：二者最初便掛載到map上，兩個圖層是疊加顯示的；當點擊按鈕時，其實是使用 .setVisible 設置了是否顯示。

2.對于行政區劃（JSON數據）：直接使用?.addLayer 添加到map。

代碼：

<script>var index = 7var data = []// 定義兩個圖層 style: 6: veter 7: tile 8: roadconst gaodeLayer1 = new ol.layer.Tile({title: "矢量地圖",source: new ol.source.XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',wrapX: false})});const gaodeLayer2 = new ol.layer.Tile({title: "衛星地圖",source: new ol.source.XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',wrapX: false})});// 加載geojson數據var jsonLayer = new ol.layer.Vector({title: 'add Layer',source: new ol.source.Vector({projection: 'EPSG:4326',url: "China.json",format: new ol.format.GeoJSON()}),style: new ol.style.Style({stroke: new ol.style.Stroke({color: 'red',width: 1,}),})});const map = new ol.Map({layers: [gaodeLayer2,gaodeLayer1],view: new ol.View({center: ol.proj.transform([116.48,39.9], 'EPSG:4326', 'EPSG:3857'), projection: 'EPSG:3857',zoom: 8,minZoom: 1}),target: 'map'});// 加載控件const ZoomToExtent = new ol.control.ZoomToExtent({extent:[110, 30, 260, 80]})map.addControl(ZoomToExtent)const ZoomSlider = new ol.control.ZoomSlider()map.addControl(ZoomSlider)const FullScreen = new ol.control.FullScreen()map.addControl(FullScreen)// 定義地圖點擊事件map.on('click',(evt)=>{var position = evt.coordinatevar XY = ol.proj.transform(position, 'EPSG:3857', 'EPSG:4326')// console.log(XY)alert(XY.map(x => parseFloat(x.toFixed(2))))})// 定義圖層切換function ChangeMap(t){            if (t){gaodeLayer2.setVisible(true)gaodeLayer1.setVisible(false)}else{gaodeLayer1.setVisible(true)gaodeLayer2.setVisible(false)}}// 定義查詢并且執行飛行function Search(){var point = document.getElementById('input').value;data.push(point)// console.log(data)map.getView().animate({center: ol.proj.transform(data[data.length - 1].split(","), 'EPSG:4326', 'EPSG:3857'),zoom: 10})document.getElementById('input').value = ''}// 定義添加JSON圖層function addJson(){map.addLayer(jsonLayer);}</script>