前言
openlayers4 官網(wǎng)的 api 文檔介紹地址 openlayers4 api讶泰，里面詳細(xì)的介紹 openlayers4 各個(gè)類的介紹，還有就是在線例子：openlayers4 官網(wǎng)在線例子檐涝，這個(gè)也是學(xué)習(xí) openlayers4 的好素材遏匆。
openlayers4 入門開發(fā)系列的地圖服務(wù)基于 Geoserver 發(fā)布的，關(guān)于 Geoserver 方面操作的博客谁榜，可以參考以下幾篇文章：
內(nèi)容概覽
1.基于 openlayers4 實(shí)現(xiàn)地圖模態(tài)層
2.源代碼 demo 下載
本篇的重點(diǎn)內(nèi)容是為了到達(dá)自己想要的區(qū)域高亮效果幅聘，利用 openlayers4 結(jié)合 turf.js 實(shí)現(xiàn)地圖模態(tài)層功能，效果圖如下：
image
實(shí)現(xiàn)思路
利用 turf.js 提供的 difference 相差函數(shù)窃植，計(jì)算最大四至和裁剪區(qū)域的差值帝蒿，這里的最大四至即：（-180,-90,180,90），由于底圖是墨卡托投影坐標(biāo)系的巷怜，所以我的代碼實(shí)現(xiàn)過程中把經(jīng)緯度轉(zhuǎn)換墨卡托投影坐標(biāo)葛超；裁剪區(qū)域就是需要高亮的多邊形，我這里是嘉興市區(qū)域延塑。
- 界面設(shè)計(jì)
//地圖模態(tài)層
"<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;'>地圖模態(tài)層</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;">地圖模態(tài)層</label>' +
'</div>' +
- 點(diǎn)擊事件
//地圖模態(tài)層
$("#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;
}
}
})
- 嘉興市區(qū)域數(shù)據(jù)源绣张，ggeojson 格式的我這里，由于太長(zhǎng)了关带，截圖部分
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":"嘉興市"}}]}
- 核心實(shí)現(xiàn)代碼
更多的詳情見：GIS之家小專欄
文章尾部提供源代碼下載侥涵，對(duì)本專欄感興趣的話，可以關(guān)注一波
