openlayers4 入門開發系列之圖層控制（附源碼下載）

前言

openlayers4 官網的 api 文檔介紹地址 openlayers4 api，里面詳細的介紹 openlayers4 各個類的介紹，還有就是在線例子：openlayers4 官網在線例子，這個也是學習 openlayers4 的好素材。

openlayers4 入門開發系列的地圖服務基於 Geoserver 發布的，關於 Geoserver 方面操作的博客，可以參考以下幾篇文章：

• geoserver 安裝部署步驟
• geoserver 發布地圖服務 WMS
• geoserver 發布地圖服務 WMTS
• geoserver 集成以及部署 arcgis server 瓦片數據

內容概覽

1.基於 openlayers4 實現地圖圖層控制
2.源代碼 demo 下載

本篇的重點內容是利用 openlayers4 實現地圖圖層控制功能，效果圖如下：

部分核心代碼

• 頁面引用 ztree 插件

<!-- Ztree控件css以及js -->
<link href="${pageContext.request.contextPath}/js/plugins/ztree/zTreeStyle/img/zTreeStyle.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/js/plugins/ztree/jquery.ztree.min.js"></script>
圖層管理器界面布局
DCI.Catalog = {
Html: "<div></div>"
+ "<div style=' height:5px;'></div>"
+ "<div id='CatalogTree'style='height:98%;'><ul id='ztreeThemeServerOfCatalog' class='ztree'><ul></div>"
}

• 圖層配置

"layers": [
{"layer_id":"anjiHXMap","server":"geoserver","level":0,"name":"anjiHXMap","visible":true,"format":"image/png","tile_grid":"grid_GDImage","url":"/gwc/service/wms"},
{"layer_id":"anjiGNMap","server":"geoserver","level":0,"name":"anjiGNMap","visible":true,"format":"image/png","tile_grid":"grid_GDImage","url":"/gwc/service/wms"},
],
"maps":[
{
"map_id":"map_1",
"description":"地圖",
"layer_groups":[
{
"group_id":"tdtmap_img",
"layers":[
{"id":"map_1","pid":"root","title":"安吉縣","tip":"安吉縣"},
//{"id":"g-1","pid":"map_1","title":"影像圖","tip":"影像圖","visible":true,"inswitcher":false,"layers":["GISSERVER_AnJiMapImg"]},
{"id":"g-1","pid":"map_1","title":"影像圖","tip":"影像圖","visible":true,"inswitcher":false,"layers":["tmap_img_w","tmap_cia_w"]},
{"id":"g-10","pid":"map_1","title":"功能區划","tip":"功能區划","visible":true,"layers":["anjiGNMap"]},
{"id":"g-11","pid":"map_1","title":"紅線數據","tip":"紅線數據","visible":true,"layers":["anjiHXMap"]}
]
},
{
"group_id":"tdtmap_vec",
"layers":[
{"id":"map_1","pid":"root","title":"安吉縣","tip":"安吉縣"},
//{"id":"g-1","pid":"map_1","title":"街道圖","tip":"街道圖","visible":true,"inswitcher":false,"layers":["GISSERVER_AnJiMapVec"]},
{"id":"g-1","pid":"map_1","title":"街道圖","tip":"街道圖","visible":true,"inswitcher":false,"layers":["tmap_vec_c","tmap_cva_w"]},
{"id":"g-10","pid":"map_1","title":"功能區划","tip":"功能區划","visible":true,"layers":["anjiGNMap"]},
{"id":"g-11","pid":"map_1","title":"紅線數據","tip":"紅線數據","visible":true,"layers":["anjiHXMap"]}
]
}
],
"olview":"id_view_1"
}
]

• 圖層管理器初始化 js

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波