openlayers地圖使用—跟隨地圖比例尺動態標繪大小的一種方式2
預期：隨著地圖比例尺放大縮小，地圖上的標繪隨著變化尺寸
思路：通過不斷添加地圖圖層實現標繪的動態縮放
優點：標繪放大縮小非常流暢
缺點：標繪超過10000個時（谷歌瀏覽器），第一次繪制標繪地圖操作會卡頓，標繪越多越卡，標繪較少時，推薦此種做法。
頁面
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/dist/ol.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/ol.min.css" rel="stylesheet"><style>.olMap {width: 100%;height: 500px;}</style>
</head><div id="map" class="olMap"></div>
js代碼
var map = null; // 地圖var vectorSource = null;//圖源var feas = [];// features集合// 初始化地圖function initMap() {// 矢量圖層vectorSource = new ol.source.Vector();// 創建矢量圖層 繪制標注const vLayer = new ol.layer.Vector({source: this.vectorSource})// 高德地圖var gaodeMapLayer = 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})});//地圖容器map = new ol.Map({target: 'map',layers: [gaodeMapLayer,vLayer],view: new ol.View({center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地圖初始中心點zoom: 12,minZoom: 1,maxZoom: 29}),})}initMap();/*** @description: 添加若干圖片* 特點：如果數量較多1萬以上，繪制過程操作地圖（移動縮放）會卡頓，但是繪制完畢后非常流暢* @param {*} num* @return {*}* @author: ldl*/function drawSome(num) {for (let i = 0; i < num; i++) {// 創建一個活動圖標需要的Feature，并設置隨機位置const r1 = Math.random();const r2 = Math.random();let rand1 = r1 / 100 + i / 1000 + i / 1000;let rand2 = r2 / 100 + i / 1000 + i / 1000;rand1 = r1 > 0.45 ? rand1 : -rand1;rand2 = r2 > 0.45 ? rand2 : -rand2;map.addLayer(new ol.layer.Image({source: new ol.source.ImageStatic({url: './bg02.jpg',projection: "EPSG:3857",imageExtent: ol.proj.transformExtent([103.23 + rand1, 35.33 + rand2, 103.24 + rand1, 35.34 + rand2],"EPSG:4326","EPSG:3857"), // [minx, miny, maxx, maxy] 即對象坐標})}));}}drawSome(1000)
這里繪制1000個圖片標繪，標繪隨著地圖比例尺縮放自如。
注意點1：更改圖片標繪
url: './bg02.jpg'替換成本地資源即可
注意2：確定標繪的大小和位置
[103.23 + rand1, 35.33 + rand2, 103.24 + rand1, 35.34 + rand2],
)
