openlayers 地图限制区域实现方法

一、利用arcmap裁剪实现
二、canvas的clip方法实现

一、利用arcmap裁剪实现

之前遇到一个项目，需要只显示某个区县范围内的地图，其余部分不要显示，其实就是地图限制区域的问题，当时由于时间紧急，第一个想到的方法，就是利用arcmap的裁剪方法来实现。
具体想法：弄个某县边界图层，再绘制一个巨大范围的矢量面，用这个图层去裁剪范围面，形成一个新的图层，这个图层中间镂空的地方就是该县的边界区域，地图加载的时候一起加载进去，然后镂空图层样式设置成实心的，这样底图就在该区域不显示，具体arcmap操作就不说了，很简单。实现效果如下：

二、canvas的clip方法实现

我们都知道openlayers是基于canvas创建的，所以可以利用一下canvas的方法去实现。（例子里那个心形的地图就是用的这个方法）
具体代码：

 const _this = this;const boundFeature = new GeoJSON().readFeatures(jsBound);wmtszjVecLayer.on('prerender', function(evt) {const canvas = evt.context;canvas.save();const coords = boundFeature[0].getGeometry().getCoordinates()[0];canvas.beginPath();_this.createClip(coords[0], canvas);canvas.clip();});wmtszjAnnoLayer.on('prerender', function(evt) {const canvas = evt.context;canvas.save();const coords = boundFeature[0].getGeometry().getCoordinates()[0];canvas.beginPath();_this.createClip(coords[0], canvas);canvas.clip();});wmtszjVecLayer.on('postrender', function(event) {const ctx = event.context;ctx.restore();});wmtszjAnnoLayer.on('postrender', function(event) {const ctx = event.context;ctx.restore();});

createClip(coords, canvas) {for (let i = 0, cout = coords.length; i < cout; i++) {const screenCoord = this.map.getPixelFromCoordinate(coords[i]);const x = screenCoord[0],y = screenCoord[1];if (i === 0) {canvas.moveTo(x, y);} else {canvas.lineTo(x, y);}}canvas.closePath();canvas.strokeStyle = "#2944de";canvas.lineWidth = 3;canvas.stroke();}

实现效果：

openlayers 地图限制区域实现方法相关推荐

openlayers地图初始化
1.安装ol(官网ol已更新到openlayers7版本,我所用的是v6.14.1) yarn add ol //安装openlayers 2.初始化openlayer地图先创建一个容器来存放map ...
小程序上让随机的两个点都显示在地图可视区域
功能需求如滴滴打车,当用户叫到车之后,会在用户的界面同时显示用户当前位置和车辆位置,这两个点对程序来说都是随机的,怎么让两个点都显示在地图可视区域呢? 解决方法小程序中不需要我们计算缩放级数,有一 ...
ios 百度地图指定区域_获取百度地图可视区域范围的数据
有个业务场景,需要根据获取到的地图区域显示,根据相应的经纬度反查左侧区域的会议室. 思路: 1.得到百度地图可视区域--可视区域的中心点 2.可视区域的四个角的其中两个(东北角+西南角) http: ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十七)地图自适应区域加载...
目前地图编辑器已经能够对地图图片进行切片了,那么接下来我们需要做的是对切好的地图片进行拼装从而取代整张大地图.需要特别说明的是,如果一次性将所有的切片加载进游戏中并显示出来,那么效果与使用一张整的地图 ...
百度地图 json 区域数据_获取百度地图可视区域范围的数据
有个业务场景,需要根据获取到的地图区域显示,根据相应的经纬度反查左侧区域的会议室. 思路: 1.得到百度地图可视区域--可视区域的中心点 2.可视区域的四个角的其中两个(东北角+西南角) http: ...
【MapBox实战】生成地图+绘制区域+纠偏
[MapBox实战]生成地图+绘制区域+纠偏 mapbox介绍生成地图过程基础配置坐标在地图上绘制一块区域在地图上画上点瓦片地图原理理解原理瓦片地图背景理解编码方式谷歌xyz 百度 ...
Echart + 百度地图实现区域聚合（Vue版）
Echart + 百度地图实现区域聚合(Vue版) 百度地图的聚合很简单,但是根据区域聚合怎么实现呢?结合Echart的百度地图怎么实现区域聚合呢? 单独玩过Echart,也单独用过百度地图,但是两个 ...
自动驾驶中基于地图的视觉定位方法
点云PCL免费知识星球,点云论文速读. 文章:Visual Map-based Localization applied to Autonomous Vehicles 作者:JEAN-ALIX DAV ...
jvectormap的自定义地图和区域上色、图片标记
jvectormap的自定义地图和区域上色.图片标记因为网上例子太少,上手实属不易,所以在这里跟大家分享一下我的使用! (第一次写,因为粘贴代码卡死几次,重写了几次,心累 ╥﹏╥-) 这里就简单的介 ...

openlayers 地图限制区域实现方法

openlayers 地图限制区域实现方法

一、利用arcmap裁剪实现

二、canvas的clip方法实现

openlayers 地图限制区域实现方法相关推荐

最新文章

热门文章