openlayers入门开发系列之地图工具栏篇

本篇的重点内容是利用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之家微信号:gishome;GIS之家拥有自己的GIS开发团队,均是高校GIS研究生,具备丰富的webgis开发项目工作经验,专注以及热爱研究webgis技术的团队

发表评论

电子邮件地址不会被公开。