公司网站建设费属于宣传费吗,建设网站 请示 报告,对于公司网站建设的一些想法,两个wordpress文章同步openlayers地图使用—跟随地图比例尺动态标绘大小的一种方式
预期#xff1a;随着地图比例尺放大缩小#xff0c;地图上的标绘随着变化尺寸 思路#xff1a;通过VectorImage和动态修改Feature尺寸实现Feature跟随地图比例尺尺寸变化 优点#xff1a;结合第1和第2种方式的…openlayers地图使用—跟随地图比例尺动态标绘大小的一种方式
预期随着地图比例尺放大缩小地图上的标绘随着变化尺寸 思路通过VectorImage和动态修改Feature尺寸实现Feature跟随地图比例尺尺寸变化 优点结合第1和第2种方式的优点效果较好且有过渡效果数量越多过渡效果越好标绘的尺寸突变越不明显地图响应迅速地图操作不卡顿图片缩放过渡自然
页面 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/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: vectorSource})// 创建一个新的 VectorImageLayer 实例 const vectorLayerx new ol.layer.VectorImage({source: vectorSource,zIndex: 99,style: function (feature) {// 定义样式函数根据需要自定义样式 const style new Style({image: new ol.style.Icon({src: ../assets/bg02.jpg, // 替换为你自己的图标URL size: [160, 160] // 图标大小 })});return style;}});// 高德地图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,vectorLayerx],view: new ol.View({center: ol.proj.transform([103.23, 35.33], EPSG:4326, EPSG:3857), //地图初始中心点zoom: 12,minZoom: 1,maxZoom: 29}),})}initMap()/*** description: 绘制一些图片* 特点修改了图层类型相比较与普通图层 更丝滑* param {*} num* return {*}* author: ldl*/function drawSome(num) {vectorSource.clear()feas []// 添加若干图片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;const feature new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([103.23 rand1, 35.33 rand2], EPSG:4326, EPSG:3857))})feature.setId(9999 i);// 设置Feature的样式使用小旗帜图标feature.setStyle(new ol.style.Style({image: new ol.style.Icon({src: ./bg02.jpg,anchor: [0.5, 1],scale: getScaleImgae(3000)})}))feas.push(feature)vectorSource.addFeature(feature)}}// 修改标绘的尺寸function reDrawFeatures() {// 添加若干图片for (let i 0; i feas.length; i) {const feature feas[i]// 设置缩放等级feature.getStyle().getImage().setScale(getScaleImgae(3000))}}// 计算不同比例尺下 实际距离在屏幕上的宽度pxfunction getLengthPixel(length) {return length / map.getView().getResolution()}// 计算不同比例尺下图片在屏幕上应该缩放的大小function getScaleImgae(length) {// 图片源文件的实际宽度pxconst info { width: 800 }const scale getLengthPixel(length) / info.widthreturn scale}drawSome(20000)setInterval(() {reDrawFeatures()}, 300)如上绘制20000个标绘标绘的缩放效果依然流畅。 总结三种实现跟随地图比例尺动态标绘大小的方式见实现方式1和实现方式2
1.第2种方式非常适合标绘数量小于10000个的情形使用ImageStatic实现过渡自然 2. 第3种方式适合比较多的标绘过渡效果较第2种方式差一丢丢但是不会卡顿地图操作 3. 第1种方式是直接修改Feature的样式过渡效果相对其他方式最差。
