openlayers4 入门开发系列之地图模态层篇（附源码下载）

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

1.基于 openlayers4 实现地图模态层
2.源代码 demo 下载

本篇的重点内容是为了到达自己想要的区域高亮效果，利用 openlayers4 结合 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":"嘉兴市"}}]}

• 核心实现代码

更多的详情见：GIS之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波