前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >地图模态层的实现

地图模态层的实现

作者头像
lzugis
发布2018-10-23 10:48:20
5800
发布2018-10-23 10:48:20
举报

概述

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

效果

效果1
效果1
效果2
效果2

实现

一、生成模态数据

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

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

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

代码语言:javascript
复制
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);

二、渲染模态数据

代码语言:javascript
复制
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;

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年07月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 效果
  • 实现
    • 一、生成模态数据
      • 二、渲染模态数据
        • 1、为了能够保证模态层在最上层,设置图层的zIndex属性为999;
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档