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

前言

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 控件样式风格（附源码下载）

本篇的重点内容是利用 openlayers4 来实现了地图导航控件功能，效果图如下：

image

实现思路

• 创建一个地图控件基类，除了本篇的地图导航控件继承这个地图控件基类之外，后续的其他地图控件也是继承该基类

bxmap.control = bxmap.control || {};

/*----------默认交互工具类{bxmap.control.Defaults}---------*/
/**
 * @constructor
 * @classdesc 默认控件类，从默认配置bxmap.config.ToolConfig中读取控件信息，设置控件id和visible
 * @extends {ol.Object}
 * @example  创建默认控件 
 * 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;
}

• 地图导航控件类

更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式