openlayers使用Canvas实现行政区划遮罩地图

有时候我们做GIS开发时需要只显示某个区域的地图，需要把其他地方遮罩住，比如下图这样：

好了，上代码：

//添加遮罩function clipmap(data) {$.getJSON(data, function(data) {var fts = new ol.format.GeoJSON().readFeatures(data);var ft = fts[0];var converGeom =ft.getGeometry()converGeom.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));//var convertFt =new  ol.Feature(converGeom);//converLayer.getSource().addFeature(convertFt);var center,pixelScale,offsetX,offsetY,rotation;map.on('precompose',function(evt) {var canvas=evt.context;canvas.save();var coords=converGeom.getCoordinates();var frameState = evt.frameState;var pixelRatio = frameState.pixelRatio;var viewState = frameState.viewState;center = viewState.center;var resolution = viewState.resolution;rotation = viewState.rotation;var size = frameState.size;var size1=map.getSize();offsetX = Math.round(pixelRatio * size[0] / 2);offsetY = Math.round(pixelRatio * size[1] / 2);pixelScale = pixelRatio / resolution;canvas.beginPath();if(converGeom.getType() == 'MultiPolygon'){for(var i=0;i<coords.length;i++){createClip(coords[i][0], canvas);}}else if(converGeom.getType() == 'Polygon'){createClip(coords[0], canvas);}canvas.backgroundColor="red";canvas.clip();});function createClip(coords, canvas) {for (var i = 0, cout = coords.length; i < cout; i++) {var xLen = Math.round((coords[i][0] - center[0]) * pixelScale);var yLen = Math.round((center[1] - coords[i][1]) * pixelScale);var x = offsetX;var y = offsetY;if (rotation) {x = xLen * Math.cos(rotation) - yLen * Math.sin(rotation) + offsetX;y = xLen * Math.sin(rotation) + yLen * Math.cos(rotation) + offsetY;} else {x = xLen + offsetX;y = yLen + offsetY;}if (i == 0) {canvas.moveTo(x, y);} else {canvas.lineTo(x, y);}}canvas.closePath();}map.on('postcompose', function(event) {var ctx = event.context;ctx.restore();});})}var dataURL="../data/geojson/hubei.geojson";clipmap(dataURL);

示例网址：

http://www.mapmonster.cn:7000/exapmles/openlayers/base_add_geojson_clip_canvas.html

openlayers使用Canvas实现行政区划遮罩地图相关推荐

OpenLayers 3 之加载百度地图
虽然百度地图有自己的 JavaScript API,但是有时候,一个项目已经用 OpenLayers 做了很多功能,不可能弃之不用,同时,又想使用百度地图,该怎么办呢?所以很多人想使用 OpenLay ...
openlayers 3扩展，调用百度地图、高德地图、天地图服务
调用这三个商业地图服务,我们使用的都是切片(Tile)地图服务,关于切片地图的含义这里做简单的介绍: 切片地图就是指将显示的地图切成一块一块的(256 * 256)分别显示加载.openlayers ...
Leaflet实现地图按照行政区划遮罩
我们使用Leaflet进行GIS地图应用开发时,有时候需要仅仅显示某个区域的地图,上一篇文章我分享了使用OpenLayers实现的方法与代码,那么使用Leaflet如何实现呢? 实现的方法与代码如下: ...
openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...
Openlayers 2.X加载高德地图
概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍Openlayers 2.X下加载高德地图. 实现效果: 高德地图高德影像图中:蓝色的省市边界为我本机发布的,能够与高 ...
Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合
场景 Openlayers中实现地图上打点并显示图标和文字: Openlayers中实现地图上打点并显示图标和文字_BADAO_LIUMANG_QIZHI的博客-CSDN博客_openlayers 打 ...
基于canvas的视频遮罩插件
作者:云荒杯倾作者博客视频遮罩介绍为一个视频添加一个覆盖物,从而挡住视频某区域,在视频的某一时间段,比如第10到第20分钟不显示划定的这块区域.应用场景包括遮挡卫视图标.遮挡视频右下角广告.充当 ...
（转）Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
html怎么给视频加遮罩,详解基于canvas的视频遮罩插件
为一个视频添加一个覆盖物,从而挡住视频某区域,在视频的某一时间段,比如第10到第20分钟不显示划定的这块区域.应用场景包括遮挡卫视图标 . 遮挡视频右下角广告 . 充当马赛克等. 一个长视频可能包 ...

openlayers使用Canvas实现行政区划遮罩地图

openlayers使用Canvas实现行政区划遮罩地图相关推荐

最新文章

热门文章