前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：
内容概览
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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波