openlayers 设置边界线外圈遮罩

话不多说直接上图

代码里面有详细注解请看代码片段，如有不清楚的话私信我。

 drawArea() {let _this = this;let geoJson = new GeoJSON();//获取边界数据MultiPolygon数组let ft=geoJson.readFeatures(area)[0].getGeometry().getGeometries()//获取绘制边界数据的数组，我的是数组中的第一个所以取[1]let linearRing = new Polygon(ft[0].getCoordinates()[1]);// 全球范围（太卡 抛弃）改取当前视窗的范围// let extent = [-180, -90, 180, 90];// let polygonRing = fromExtent(linearRing.getExtent());获取Polygon的范围，太小因此改用视窗范围//获取当前窗口的范围let extent=_this.map.getView().calculateExtent();//不想看到视窗外部线条因此做了计算for(let i=0;i<extent.length;i++){extent[0]=extent[0]-0.04 //左extent[1]=extent[1]-0.04 //下extent[2]=extent[2]+0.04 //右extent[3]=extent[3]+0.04 //上}//针对视窗范围设置Extentlet polygonRing = fromExtent(extent);//把视窗范围添加至边界线中也就是确定外环位置polygonRing.appendLinearRing(linearRing);//把数据生成Featurelet Polygons = new Feature({geometry:polygonRing});//实例化一个矢量图层Vector作为绘制层let vectorSource = new VectorSource({features: [Polygons],// features: geoJson.readFeatures(area),});//创建一个图层并设置填充样式let vector = new VectorLayer({source: vectorSource,style: new Style({fill: new Fill({color: 'rgba(255,255,255,0.7)'}),stroke: new Stroke({lineDash: [1, 2, 3, 4, 5],color: '#ffcc33',width: 4,}),})});//设置图层层级vector.setZIndex(0);//添加至地图_this.map.addLayer(vector);},

openlayers 设置边界线外圈遮罩相关推荐

155：vue+openlayers 设置地图的反转色、复古色、灰度图、原始图
第155个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中设置地图的反转色.复古色.灰度,原始状态等.采用的是CSS filter的形式. 直接复制下面的 vue+ope ...
Openlayers设置ESPG900913作为影射算法
Geoserver默认的地图影射方式是EPSG:4326,但是对于常用的WebGIS来说,常用的影射方式是EPSG:900913,下边的代码用来设置openlayers,通知geoserver使用新的 ...
openlayers设置黑色底图，自定义修改天地图颜色
openlayers 加载蓝黑色天地图前言一.尝试参照官方示例二.代码改进核心代码效果展示工具类下载在线示例总结前言由于项目需要大屏展示添加动态地图,大屏多数都是使用蓝黑色底图,目 ...
132：vue+openlayers: 设置显示图层的层级数zIndex （示例代码）
第132个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中设置显示层级数zIndex.每一个图层都像一张纸似的,叠加在一起,上面的层级数zIndex值高,下面的层级数小. ...
183：vue+openlayers 设置线段样式：粗细、渐变颜色、箭头及线头样式
第183个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中修饰线段的样式.绘制两个线段,利用FlowLine的样式规则来设置矢量线段粗细.渐变颜色,设置箭头和线头样式. ...
Openlayers设置请求瓦片大小
对于发布的瓦片地图服务是可以动态调整请求数据大小,可以根据服务器性能动态调整,如果服务器的计算性能足够,可以把瓦片请求调大一些,如果服务器性能不足,就需要减小瓦片请求大小,但网络的延迟影响将会更大(请 ...
html设置整个页面遮罩,简单遮罩实现点击按钮遮住整个页面
通告"; odiv.id = "div_whole"; var styleStr = "filter: alpha(opacit ...
如何在ZBrush 4R7中设置背面遮罩
ZBrush 4R7中的背面遮罩是如何来设置的?当我们在进行ZBrush雕刻创作的时候,经常会不经意的雕刻到背面的物体,那么,如何防止背面的物体不被雕刻到,这就需要设置下背景遮罩了. ZBrush 4 ...
flash 遮罩层全解
2019独角兽企业重金招聘Python工程师标准>>> 初学者关于遮罩的话题问的较多,下面我将遮罩的一些常见问题进行一下归纳. 1.请问遮罩的原理是什么? [效果] 1.swf ( ...
自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010480479/article/details/27362147 阿嚏~~~ 话说本屌丝没啥开发 ...

openlayers 设置边界线外圈遮罩

openlayers 设置边界线外圈遮罩

openlayers 设置边界线外圈遮罩相关推荐

最新文章

热门文章