openlayers4 入门开发系列之地图导航控件篇(附源码下载)

时间:2023-03-08 17:06:02
openlayers4 入门开发系列之地图导航控件篇(附源码下载)

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:

内容概览

1.基于 openlayers4 实现地图导航控件
2.源代码 demo 下载

关于自定义的地图导航控件 Navigation 样式风格思路,可以参照我之前写 arcgis api 3.x for js 系列文章的此篇,这里不再描述:
arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格(附源码下载)

本篇的重点内容是利用 openlayers4 来实现了地图导航控件功能,效果图如下:
openlayers4 入门开发系列之地图导航控件篇(附源码下载)

实现思路

  • 创建一个地图控件基类,除了本篇的地图导航控件继承这个地图控件基类之外,后续的其他地图控件也是继承该基类
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);
  • 地图控件基类中创建地图导航控件函数

更多的详情见GIS之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波