概述

咱们书接上上文，在上上文里面给大家分享了"ol4中实现只能查看用户权限所在区的地图"，在本文给大家分享一个结合turf.js实现区域裁剪实现地图模态层的效果。

效果

效果1
效果2

实现

一、生成模态数据

1、输入
1）最大的四至（-180,-90,180,90）
2）裁剪区域的地图边界数据；

2、操作
计算最大四至和裁剪区域的difference

3、输出
裁除了裁剪区域的多边形

var boundCoord = [[[-180,-90], [180,-90], [180,90], [-180,90], [-180,-90]]];
var zoneCoord = [[[],[]]];
var boundGeo = turf.polygon(boundCoord),
    zoneGeo = turf.polygon(zoneCoord);
var modalJson = turf.difference(boundGeo, zoneGeo);

二、渲染模态数据

var features = (new ol.format.GeoJSON()).readFeatures(modalJson);
var vector = new ol.layer.Vector({
    renderMode: "image",//image, vector
    source: new ol.source.Vector({
        features: features
    }),
    style: new ol.style.Style({
         fill: new ol.style.Fill({
         color: 'rgba(0, 0, 0, 0.5)'
        })
     }),
    zIndex: 999
 });
 map.addLayer(vector);

注意：
1、为了能够保证模态层在最上层，设置图层的zIndex属性为999；

---

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	452117357
Android群	337469080
GIS数据可视化群	458292378

“GIS讲堂”知识星球开通了，在星球，我将提供一对一的问答服务，你问我答，期待与你相见。

知识星球二维码 LZUGIS