Openlayers4动态绘制地图分幅网络

2023-05-31 01:03| 来源: 网络整理| 查看: 265

Openlayers4动态绘制地图分幅网络原创

GIS韩 2023-05-29 01:28:40 博主文章分类：Openlayers ©著作权

文章标签 Openlayers 图幅网格 vue 2d Math 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者GIS韩的原创作品，请联系作者获取转载授权，否则将追究法律责任

在Openlayers地图上根据地图分幅规则，绘制分幅网格，需要注意的有几点：

1确认什么比例尺时展示什么1:100万、1:50万...比例尺的分幅

2根据地图当前视窗位置，动态绘制注记和网络，因为全部绘制的话，网格和注意太多，严重影像运行速度

3绘制经线和纬线，不绘制网格，网格严重内存更多

代码如下：

addSheetNumber(number){ getLayerByName(this.$map2d, "drawLayer") .getSource() .clear(); var d1=6; var d2=4; switch (number) { case 1000000: d1=6; d2=4; break; case 500000: d1=3; d2=2; break; case 250000: d1=1.5; d2=1; break; case 100000: d1=0.5; d2=0.3333; break; default: break; } for (let index = 0; index < 88/d2+1; index++) { if(index==0){this.outLine(index*d2,-180,index*d2,180)}else{ this.outLine(index*d2,-180,index*d2,180); this.outLine(-index*d2,-180,-index*d2,180); } } //画经线 for (let i = 0; i < 360/d1; i++) { this.outLine(-88,-180+i*d1,88,-180+i*d1); } }, toggleSheetNumber(){ const that=this; var view=this.$map2d.getView(); if(this.sheetType!=0){ //第二次点击清除网络 view.un('change:resolution',that.changeListener); view.un('change',that.resetNumberText); getLayerByName(this.$map2d, "drawLayer") .getSource() .clear(); getLayerByName(this.$map2d, "textLayer").getSource() .clear(); this.sheetType=0; return; } view.on('change:resolution',that.changeListener); view.on('change',that.resetNumberText); this.changeListener(); }, changeListener(e){ var view=this.$map2d.getView(); var ruler=view.getResolution(); if(ruler>0.02197&&this.sheetType!=1000000){ this.sheetType=1000000; this.addSheetNumber(1000000); } else if(ruler0.00549&&this.sheetType!=500000){ this.sheetType=500000; this.addSheetNumber(500000); }else if(ruler0.00297&&this.sheetType!=250000){ this.sheetType=250000; this.addSheetNumber(250000); }else if(ruler0){i1++} var i2=Math.floor((extent[2]+180)/d1); if((extent[2]-i2*d1-d1/2)>0){i2++} var j1=Math.floor((extent[1]+88)/d2); if((extent[1]-j1*d2-d2/2)>0){j1++} var j2=Math.floor((extent[3]+88)/d2); if((extent[3]-j2*d2-d2/2)>0){j2++} for (let index = i1; index < i2; index++) { this.outLabel(index*d1-180+d1/2,extent[3],String(index+1)) } for (let h = j1; h < j2; h++) { var text=h; if(h 赞收藏评论分享举报

上一篇：GeoServer的WMS地图服务高并发测试，与虚拟机内存对并发响应时间的影响

下一篇：Openlayers地图背景透明度设置

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章