zoukankan      html  css  js  c++  java
  • 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 来实现了地图导航控件功能,效果图如下:

    实现思路

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

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

  • 相关阅读:
    IO流
    myEclipse的使用
    单例模式
    日期的使用
    String类的常用方法
    break、continue和return的区别
    包装类和随机数
    enum类的使用
    Java基础概念性的知识总结
    汇编中的函数调用与递归
  • 原文地址:https://www.cnblogs.com/giserhome/p/9550661.html
Copyright © 2011-2022 走看看