openlayers4 入門開發系列之地圖導航控件篇（附源碼下載）

前言

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

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

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

內容概覽

1.基於 openlayers4 實現地圖導航控件
2.源代碼 demo 下載

關於自定義的地圖導航控件 Navigation 樣式風格思路，可以參照我之前寫 arcgis api 3.x for js 系列文章的此篇，這里不再描述：
arcgis api 3.x for js 共享干貨系列之二自定義 Navigation 控件樣式風格（附源碼下載）

本篇的重點內容是利用 openlayers4 來實現了地圖導航控件功能，效果圖如下：

實現思路

• 創建一個地圖控件基類，除了本篇的地圖導航控件繼承這個地圖控件基類之外，后續的其他地圖控件也是繼承該基類

bxmap.control = bxmap.control || {};
/*----------默認交互工具類{bxmap.control.Defaults}---------*/

/**
* @constructor
* @classdesc 默認控件類，從默認配置bxmap.config.ToolConfig中讀取控件信息，設置控件id和visible
* @extends {ol.Object}
* @example <caption> 創建默認控件 </caption>
* var controlCreator = new bxmap.control.Defaults();
* //地圖滑動卷簾控件
* controlCreator.createSwipeControl(bmap);
* //創建地圖導航控件
* controlCreator.createNavigation(bmap);
* //顯示鷹眼
* controlCreator.createOverviewMap(bmap);
* //創建底部背景條
* controlCreator.createBottomBackgroudControl(bmap);
* //顯示地圖比例尺
* controlCreator.createScaleLine(bmap);
* //顯示當前坐標
* controlCreator.createMousePosition(bmap);
* //顯示Toolbox工具箱
* controlCreator.createToolboxControl(bmap);
*/
bxmap.control.Defaults = function (){
this.reader = new bxmap.reader.ToolConfigReader(bxmap.config.ToolConfig);
ol.Object.call(this);
}

ol.inherits(bxmap.control.Defaults, ol.Object);

• 地圖控件基類中創建地圖導航控件函數

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

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