openlayers入门开发系列之地图导航控件篇

关于自定义的地图导航控件Navigation样式风格思路,可以参照我之前写arcgis api for js系列文章的此篇,这里不再描述:

GIS之家:arcgis api for js共享干货系列之二自定义Navigation控件样式风格​zhuanlan.zhihu.com

本篇实现的地图导航控件效果图如下:

实现思路如下:

  • 创建一个地图控件基类,除了本篇的地图导航控件继承这个地图控件基类之外,后续的其他地图控件也是继承该基类
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);
  • 地图控件基类中创建地图导航控件函数
/**
 * @description 创建导航器控件
 * @param {bxmap.Map} bmap 地图对象
 * @param {String} target DOM指定承载全屏按钮的Element id
 * @returns {bxmap.control.Navigation}
 */
bxmap.control.Defaults.prototype.createNavigation = function(bmap, target){
	var ctl = new bxmap.control.Navigation({
		map: bmap,
		target: target
	});
	//设置控件id
	ctl.set(bxmap.INDEX_CONTROL_ID, 1);
	this.updateVisibility(ctl);
	
	return ctl;
}
  • 地图导航控件类
/*----------导航工具条{bxmap.control.Navigation}---------*/
/**
 * @classdesc Element控件。导航工具条控件,整合NavigationToolbar.js
 * @constructor
 * @param options
 * @param options.map {bxmap.Map}
 * @param options.target {String} Element id
 * @extends {ol.Object}
 */
bxmap.control.Navigation = function(options){
	var bmap = options.map,
		target = options.target,
		map = bmap.getMap(),
		view = map.getView();

	this.element = null;
	if(target == null){
		var elem = this.element = document.createElement("DIV");
		target = elem.id =  "navigationToolbar";
		bmap.getMap().getViewport().appendChild(elem);
	}else{
		this.element = document.getElementById(target);
	}
	
	var config = {
	    targetId: target,
	    minValue: view.get("min_zoom"),     //0
	    maxValue: view.get("max_zoom"),    //19
	    startValue: view.getZoom(),  //0
	    toolbarCss: ["toolBar", "toolBar_button", "toolBar_slider", "toolBar_mark"],
	    marksShow: {
	        countryLevel: null,
	        provinceLevel: null,
	        cityLevel: null,
	        streetLevel: null
	    }
	};
	var toolBar = new MapNavigationToolbar(config);
	/* 地图上移 */
    toolBar.onMoveUp = function () { bmap.pan("up"); };
    /* 地图下移 */
    toolBar.onMoveDown = function () { bmap.pan("down");};
    /* 地图左移 */
    toolBar.onMoveLeft = function () { bmap.pan("left"); };
    /* 地图右移 */
    toolBar.onMoveRight = function () { bmap.pan("right"); };
    /* 地图全图 */
    toolBar.onFullMap = function () { bmap.zoomFullExtent();};
    /* 地图放大 */
    toolBar.onZoomIn = function () { view.setZoom(toolBar.getValue()); };
    /* 地图缩小 */
    toolBar.onZoomOut = function () { view.setZoom(toolBar.getValue()); };
    /* 滑动条滑动结束 */
    toolBar.onSliderEnd = function () { view.setZoom(toolBar.getValue()); };
    /* 地图级别标记-街道 */
    toolBar.onMark_Street = function () { view.setZoom(config.marksShow.streetLevel); };
    /* 地图级别标记-城市 */
    toolBar.onMark_City = function () { view.setZoom(config.marksShow.cityLevel); };
    /* 地图级别标记-省级 */
    toolBar.onMark_Province = function () { view.setZoom(config.marksShow.provinceLevel); };
    /* 地图级别标记-国家 */
    toolBar.onMark_Country = function () { view.setZoom(config.marksShow.countryLevel); };
	toolBar.create();
	toolBar.setValue(config.startValue);
	view.on("change:resolution",function(){
		var level = view.getZoom();
		toolBar.setValue(level);
	});
	ol.Object.call(this);
}
ol.inherits(bxmap.control.Navigation, ol.Object);

/**
 * @description 设置控件是否可见
 * @param visible {Boolean} true可见,false,不可见
 */
bxmap.control.Navigation.prototype.setVisible = function(visible){
	var display = visible ? "block" : "none";
	this.element.style.display = display;
}
  • 最后,地图导航控件初始化调用
var controlCreator = new bxmap.control.Defaults();
//创建地图导航控件
controlCreator.createNavigation(bmap);

 

作者: GIS之家

GIS之家微信号:gishome;GIS之家拥有自己的GIS开发团队,均是高校GIS研究生,具备丰富的webgis开发项目工作经验,专注以及热爱研究webgis技术的团队

发表评论

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