openlayers入門開發系列之地圖工具欄篇

來自專欄 GIS之家博客6 人贊了文章

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

部分核心代碼如下：

• 地圖縮放

//放大縮小$("#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);}

• 地圖移動

//移動$("#panMove").click(function () { var inter = bmap.getIndexInteraction(bxmap.DEFAULT_INTER_DRAG_PAN_ID); bmap.setCurrentMutexInteraction(inter);});/*----------平移類{bxmap.interaction.DragPan}---------*//** * @classdesc 平移工具 * @constructor * @extends {ol.interaction.Interaction} */bxmap.interaction.DragPan = function() { ol.interaction.Interaction.call(this, { handleEvent: function() { return true; } });}ol.inherits(bxmap.interaction.DragPan, ol.interaction.Interaction);/** * @inheritDoc * @description 使工具激活或失效 * @param {Boolean} active true-激活，false-失效 */bxmap.interaction.DragPan.prototype.setActive = function(active){ ol.interaction.Interaction.prototype.setActive.call(this, active); var cursor = active ? "url("+bxmap.Resource.DragPanCursor+"),auto" : undefined; this.setCursor(cursor);}

• 地圖量算

//測距$("#bMeasureLine").click(function () { //var bmap = mapInterface.bmap; var inter = bmap.getIndexInteraction(bxmap.DEFAULT_INTER_MEASURE_DIST_ID); bmap.setCurrentMutexInteraction(inter);});//測面積$("#bMeasureArea").click(function () { //var bmap = mapInterface.bmap; var inter = bmap.getIndexInteraction(bxmap.DEFAULT_INTER_MEASURE_AREA_ID); bmap.setCurrentMutexInteraction(inter);});

• 地圖列印

引用js文件

<script src="${pageContext.request.contextPath}/js/olmap/bus/FileSaver.min.js"></script>

列印js代碼

//地圖列印$("#bPrint").click(function () { map.once(postcompose, function(event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), map.png); } else { canvas.toBlob(function(blob) { saveAs(blob, map.png); }); } }); map.renderSync();});

• 地圖清空

//清除$("#bClear").click(function () { bmap.setCurrentMutexInteraction(null); if(bmap.dataClear){ bmap.dataClear.clear(); }});

• 全屏

var flag = false; //全屏$("#fullScreen").click(function () { if(!flag){//全屏 flag = true; var elem = document.body; if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen() } else { if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen() } else { if (elem.msRequestFullscreen) { elem.msRequestFullscreen() } else { if (elem.requestFullScreen) { elem.requestFullscreen() } else { alert("瀏覽器不支持全屏") } } } } }else{//退出全屏 flag = false; var elem = parent.document; if (elem.webkitCancelFullScreen) { elem.webkitCancelFullScreen() } else { if (elem.mozCancelFullScreen) { elem.mozCancelFullScreen() } else { if (elem.cancelFullScreen) { elem.cancelFullScreen() } else { if (elem.msExitFullscreen) { elem.msExitFullscreen() } else { if (elem.exitFullscreen) { elem.exitFullscreen() } else { alert("瀏覽器不支持全屏") } } } } } } });

• 地圖比例尺

var controlCreator = new bxmap.control.Defaults();//顯示地圖比例尺controlCreator.createScaleLine(bmap);/** * @description 創建比例尺控制項 * @param {bxmap.Map} bmap 地圖對象 * @returns {ol.control.ScaleLine} */bxmap.control.Defaults.prototype.createScaleLine = function(bmap){ var ctl = new ol.control.ScaleLine({ "className":"ol-custom-scaleline" }); bmap.addControl(ctl); //設置控制項id ctl.set(bxmap.INDEX_CONTROL_ID, 2); this.updateVisibility(ctl); return ctl;}

• 地圖顯示坐標

var controlCreator = new bxmap.control.Defaults();//顯示當前坐標controlCreator.createMousePosition(bmap);/** * @description 創建滑鼠位置控制項 * @param {bxmap.Map} bmap 地圖對象 * @returns {bxmap.control.MousePosition} */bxmap.control.Defaults.prototype.createMousePosition = function(bmap){ var ctl = new bxmap.control.MousePosition(); bmap.addControl(ctl); //設置控制項id ctl.set(bxmap.INDEX_CONTROL_ID, 3); this.updateVisibility(ctl); return ctl;}

• 地圖鷹眼

var controlCreator = new bxmap.control.Defaults(); //顯示鷹眼controlCreator.createOverviewMap(bmap);/** * @description 創建鷹眼控制項 * @param {bxmap.Map} bmap 地圖對象 * @returns {ol.control.OverviewMap} */bxmap.control.Defaults.prototype.createOverviewMap = function(bmap){ var v_layers = bmap.getBaseLayerGroup().getLayers(); var mapView = bmap.getMap().getView(); var view = new ol.View({ "projection" : mapView.getProjection(), "maxZoom" : mapView.get("max_zoom"), "minZoom" : mapView.get("min_zoom") - 1 }); var ctl = new ol.control.OverviewMap({ "className": "ol-overviewmap ol-custom-overviewmap", "layers" : v_layers, "tipLabel": "鷹眼視圖", "collapseLabel": "u00BB", "label": "u00AB", "collapsed": true, "view": view }); bmap.addControl(ctl); //設置控制項id ctl.set(bxmap.INDEX_CONTROL_ID, 4); this.updateVisibility(ctl); return ctl;}

GIS之家新博客系列發布更新在GIS之家網站，歡迎關注收藏：GIS之家網站

GIS之家作品：GIS之家

GIS之家交流諮詢：諮詢模式

推薦閱讀：

相关文章