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


前言

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之家小專欄

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM