![60a0f09b5f5ca5f37817e26e0a829ea7.png](https://i-blog.csdnimg.cn/blog_migrate/7404b25da45ee0adf475679b9ea6b3d9.jpeg)
前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:
geoserver 安装部署步骤
geoserver 发布地图服务 WMS
geoserver 发布地图服务 WMTS
geoserver 集成以及部署 arcgis server 瓦片数据
内容概览
1.基于 openlayers4 实现地图导航控件
2.源代码 demo 下载
关于自定义的地图导航控件 Navigation 样式风格思路,可以参照我之前写 arcgis api 3.x for js 系列文章的此篇,这里不再描述:
arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格(附源码下载) - 小专栏xiaozhuanlan.com![b9fdf35640867ba7645eceb9d386d698.png](https://i-blog.csdnimg.cn/blog_migrate/d7cc76fc530bf98ed9fa6ee58cd38540.jpeg)
本篇的重点内容是利用 openlayers4 来实现了地图导航控件功能,效果图如下:
![ad1a0d82e0740d32a322ded5508f68b4.png](https://i-blog.csdnimg.cn/blog_migrate/c4c5412e3bf3def099eae19834e33cae.jpeg)
实现思路
- 创建一个地图控件基类,除了本篇的地图导航控件继承这个地图控件基类之外,后续的其他地图控件也是继承该基类
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;
}
- 地图导航控件类
更多的详情见:
openlayers4 入门开发系列之地图导航控件篇(附源码下载) - 小专栏xiaozhuanlan.com![c91353cd3114b4a78d852628b2f3e8d9.png](https://i-blog.csdnimg.cn/blog_migrate/218c9a9948aeaf85099d1a749b8d70dc.png)
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
GIS之家店铺:GIS之家
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询