openlayers4 入門開發系列之地圖工具欄篇（附源碼下載）

前言

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

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

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

內容概覽

1.基於 openlayers4 實現地圖工具欄
2.源代碼 demo 下載

本篇的重點內容是利用 openlayers4 實現地圖工具欄功能，包括地圖縮放、移動、地圖量算、地圖打印、清空、全屏、鷹眼、比例尺、地圖坐標顯示等，效果圖如下：

部分核心代碼

• 地圖縮放

//放大縮小
$("#zoomOut").click(function () {
var inter = bmap.getIndexInteraction(bxmap.DEFAULT_INTER_ZOOM_IN_ID);
bmap.setCurrentMutexInteraction(inter);
});
$("#zoomIn").click(function () {
var inter = bmap.getIndexInteraction(bxmap.DEFAULT_INTER_ZOOM_OUT_ID);
bmap.setCurrentMutexInteraction(inter);
});
/*----------矩形放大類{bxmap.interaction.ZoomIn}---------*/
/**
* @classdesc 拉框矩形放大地圖
* @constructor
* @extends {ol.interaction.DragZoom}
*/
bxmap.interaction.ZoomIn = function() {
ol.interaction.DragZoom.call(this, {
condition : ol.events.condition.always,
out : false
});
}
 
ol.inherits(bxmap.interaction.ZoomIn, ol.interaction.DragZoom);
 
/**
* @inheritDoc
* @description 使工具激活或失效
* @param {Boolean} active true-激活，false-失效
*/
bxmap.interaction.ZoomIn.prototype.setActive = function(active){
ol.interaction.DragZoom.prototype.setActive.call(this, active);
 
var cursor = active ? "url("+bxmap.Resource.ZoomInCursor+"),auto" : undefined;
this.setCursor(cursor);
}
 
/*----------矩形縮小類{bxmap.interaction.ZoomOut}---------*/
/**
* @classdesc 拉框矩形縮小地圖
* @constructor
* @extends {ol.interaction.DragZoom}
*/
bxmap.interaction.ZoomOut = function() {
ol.interaction.DragZoom.call(this, {
condition : ol.events.condition.always,
out : true
});
}
 
ol.inherits(bxmap.interaction.ZoomOut, ol.interaction.DragZoom);
 
/**
* @inheritDoc
* @description 使工具激活或失效
* @param {Boolean} active true-激活，false-失效
*/
bxmap.interaction.ZoomOut.prototype.setActive = function(active){
ol.interaction.DragZoom.prototype.setActive.call(this, active);
 
var cursor = active ? "url("+bxmap.Resource.ZoomOutCursor+"),auto" : undefined;
this.setCursor(cursor);
}

 

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

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