成绩分析智能网站怎么做,学校网站要更新应怎么做,做图网站地图,中信建设证券网站openlayers地图使用—跟随地图比例尺动态标绘大小的一种方式2
预期#xff1a;随着地图比例尺放大缩小#xff0c;地图上的标绘随着变化尺寸
思路#xff1a;通过不断添加地图图层实现标绘的动态缩放 优点#xff1a;标绘放大缩小非常流畅 缺点#xff1a;标绘超过1000…openlayers地图使用—跟随地图比例尺动态标绘大小的一种方式2
预期随着地图比例尺放大缩小地图上的标绘随着变化尺寸
思路通过不断添加地图图层实现标绘的动态缩放 优点标绘放大缩小非常流畅 缺点标绘超过10000个时谷歌浏览器第一次绘制标绘地图操作会卡顿标绘越多越卡标绘较少时推荐此种做法。
页面 script srchttps://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/dist/ol.min.js/scriptlink hrefhttps://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/ol.min.css relstylesheetstyle.olMap {width: 100%;height: 500px;}/style
/headdiv idmap classolMap/divjs代码 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?langzh_cnsize1style7x{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],
