地图模态层的实现

最新推荐文章于 2024-07-11 10:32:08 发布

牛老师讲GIS

最新推荐文章于 2024-07-11 10:32:08 发布

阅读量1.4k

点赞数

分类专栏： GIS加油站文章标签： ol openlayers modal mapmodal

本文链接：https://blog.csdn.net/GISShiXiSheng/article/details/81147107

版权

GIS加油站专栏收录该内容

321 篇文章 245 订阅

订阅专栏

概述

咱们书接上上文，在上上文里面给大家分享了”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);