openlayers入门开发系列之地图模态层篇

本篇的重点内容是为了到达自己想要的区域高亮效果,利用openlayers结合turf.js实现地图模态层功能,效果图如下:

实现思路

利用turf.js提供的difference相差函数,计算最大四至和裁剪区域的差值,这里的最大四至即:(-180,-90,180,90),由于底图是墨卡托投影坐标系的,所以我的代码实现过程中把经纬度转换墨卡托投影坐标;裁剪区域就是需要高亮的多边形,我这里是嘉兴市区域。

  • 界面设计
        //地图模态层
        "<div style=‘height:25px;background:#30A4D5;margin-top:10px;width: 98%;margin-left: 3px;float: left;‘>" +
             "<span style=‘margin-left:5px;font-size: 13px;color:white;‘>地图模态层</span>" +
        "</div>" +
       ‘<div id="modalLayer" style="padding:5px;float: left;">‘ +
            ‘<input type="checkbox" name="modallayer" id="modallayer"  style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>‘ +
            ‘<label style="font-weight: normal;vertical-align: middle;margin: auto;">地图模态层</label>‘ +
       ‘</div>‘ +    
  • 点击事件
        //地图模态层
        $("#modalLayer input").bind("click", function () {
            if (this.checked) {
                DCI.modalLayer.Init(bmap.getMap());
            }
            else {
                if(DCI.modalLayer.layer){
                    bmap.getMap().removeLayer(DCI.modalLayer.layer);
                    DCI.modalLayer.layer = null;
                }
            }
        })   
  • 嘉兴市区域数据源,ggeojson格式的我这里,由于太长了,截图部分
var modalData = {"type":"FeatureCollection", "features": [{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[13463825.244668555,3637243.4277185723],[13464136.939242788,3636775.738240453],[13464537.689409656,3636827.702864958]……]]]},"properties":{"OBJECTID":2,"XZDM":"330411000000","XJMC":"嘉兴市"}}]}
  • 核心实现代码
    Init: function (map) {
        //经纬度转换墨卡托投影坐标
        var xy1 = ol.proj.fromLonLat([-180, -90]);
        var xy2 = ol.proj.fromLonLat([180, 90]);
        var xy3 = ol.proj.fromLonLat([180, -90]);
        var xy4 = ol.proj.fromLonLat([-180, 90]);
        var boundCoord = [[[xy1[0],xy1[1]], [xy3[0],xy3[1]], [xy2[0],xy2[1]], [xy4[0],xy4[1]], [xy1[0],xy1[1]]]];
        var zoneCoord = modalData.features[0].geometry.coordinates;
        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 = DCI.modalLayer.layer = 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);
         //地图跳转范围
         map.getView().setCenter([13442827.291, 3590017.907]);
         map.getView().setZoom(10);
    }

原文地址:https://www.cnblogs.com/giserhome/p/10088600.html

时间: 2024-10-09 13:31:28

openlayers入门开发系列之地图模态层篇的相关文章

openlayers入门开发系列之地图展示篇

GIS之家一直打算写一个openlayers入门开发系列文章(openlayers目前版本用4.x),只是一直没抽出时间来整理:本文是openlayers入门开发系列的第一篇:地图展示篇,后续会持续更新一系列入门开发文章. 整个系列的系统主界面会随着功能增加而对应改变,大体布局如下: 详细的实现过程见:这里 原文地址:https://www.cnblogs.com/giserhome/p/9425156.html

openlayers入门开发系列之地图导航控件篇

本篇的重点内容是利用openlayers来实现了地图导航控件功能,效果图如下: 实现思路如下: 创建一个地图控件基类,除了本篇的地图导航控件继承这个地图控件基类之外,后续的其他地图控件也是继承该基类 地图控件基类中创建地图导航控件函数 地图导航控件类 最后,地图导航控件初始化调用 详细的实现过程见:这里 原文地址:https://www.cnblogs.com/giserhome/p/9550661.html

openlayers入门开发系列之批量叠加zip压缩SHP图层篇

本篇的重点内容是直接加载压缩文件zip形式shp,可以批量加载点.线.面shp图层,效果图如下: 实现的思路跟之前实现arcgis api for js版本是一致的:arcgis api for js入门开发系列二十三批量叠加zip压缩SHP图层 压缩的shp截图如下: 实现的核心代码: //叠加压缩SHP图层,批量加载显示 $("#zipshp").click(function () { shp("js/main/shpJS/gishome.zip").then(

leaflet-webpack 入门开发系列五地图卷帘(附源码下载)

前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 webpack 配置介绍文档详细的 webpack 文档配置介绍,适合新手查看,我也是边看边学 vscode 安装包下载,我这边用 vscode工具编译开发前端项目,个人觉的这款工具还不错 leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 l

arcgis api for js入门开发系列四地图查询(含源代码)

备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的 上一篇实现了demo的地图工具栏,本篇新增地图查询功能,包括属性查询和空间查询两大块,截图如下: 属性查询效果图: 空间查询效果图: 谈核心代码实现之前,我大概的讲一讲arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTask (1)FindTask查询模式:基于关键字来模糊查询

openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇(附源码下载)

前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材. openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章: geoserver 安装部署步骤 geoserver 发布地图服务 WMS geoserver 发布地

openlayers4 入门开发系列结合 echarts4 实现交通线流动图

前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材. openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章: geoserver 安装部署步骤 geoserver 发布地图服务 WMS geoserver 发布地

openlayers5-webpack 入门开发系列一初探篇(附源码下载)

前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 webpack 配置介绍文档详细的 webpack 文档配置介绍,适合新手查看,我也是边看边学 vscode 安装包下载,我这边用 vscode工具编译开发前端项目,个人觉的这款工具还不错 openlayers5 api文档介绍,详细介绍 openlayers5 每个类的函数以及属性等等 op

leaflet-webpack 入门开发系列一初探篇(附源码下载)

前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 webpack 配置介绍文档详细的 webpack 文档配置介绍,适合新手查看,我也是边看边学 vscode 安装包下载,我这边用 vscode工具编译开发前端项目,个人觉的这款工具还不错 leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 l