前言
openlayers4 官網的 api 文檔介紹地址 openlayers4 api,里面詳細的介紹 openlayers4 各個類的介紹,還有就是在線例子:openlayers4 官網在線例子,這個也是學習 openlayers4 的好素材。
openlayers4 入門開發系列的地圖服務基於 Geoserver 發布的,關於 Geoserver 方面操作的博客,可以參考以下幾篇文章:
內容概覽
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之家小專欄
文章尾部提供源代碼下載,對本專欄感興趣的話,可以關注一波