openlayers4 入门开发系列之地图导航控件篇(附源码下载)
2023-09-11 14:19:51 时间
前言
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之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- JUC回顾之-ConcurrentHashMap源码解读及原理理解
- C# ini文件操作【源码下载】
- 前端MVC框架Backbone 1.1.0源码分析(二) - 模型
- Dubbo-go 源码笔记(二)客户端调用过程
- github命令行下载项目源码
- MFC Windows 程序设计[214]之对话框样式修改例程(附源码)
- MFC Windows 程序设计[九十二]之列表排序(附源码)
- MFC Windows 程序设计[三十]之十六进制查看器(附源码)
- Android版OpenCV图像处理技术亲自验证[四十]之图片缩放(附源码)
- ThreadX全家桶源码和文档下载,含GUI设计器,GUI,文件系统,网络协议栈,USB协议栈等(2020-05-26)
- Java项目练习:后台管理系统——管理员管理模块(附源码下载地址)
- 美女如何无水印下载?python带你批量采集(含完整源码)
- JVMTM Tool Interface:JVM源码分析之javaagent原理完全解读
- 【Linux 内核】Linux 内核源码结构 ( 下载 Linux 内核源码 | 使用 VSCode 阅读 Linux 内核源码 )
- Android开发之使用Handler封装下载图片工具类(源码分享)
- electron chromium源码下载 2020 84
- PostgreSQL的学习心得和知识总结(四)|查询分析(阅读源码)
- 第二人生的源码分析(四十七)发送下载纹理图片请求
- Ubuntu 下载 & 编译 Android5.1 源码
- 重磅来袭,开源Asp.Net MVC网上商城BrnShop正式发布,提供源码下载(转)
- (02)Cartographer源码无死角解析-(56) 2D后端优化→class MapById、ConstIterator、ConstTrajectoryIterator
- 目标检测00-10:mmdetection(Foveabox为例)-源码无死角解析(3)-头部网络bbox_head-训练过程
- 风格迁移0-01:stylegan-源码及数据资源下载
- JDK源码详解之List接口
- 【Android-Jetpack进阶】3、ViewModel 视图模型:使用、源码解析
- 题目:JavaWeb乐购资源管理系统(附源码链接免费下载)
- 题目: javaWeb学院图书借阅系统(附源码链接免费下载)
- Ubuntu下源码编译VirtualBox六 —— 源码编译(5)
- Wine零知识学习2 —— 源码下载、构建与安装
- Android kernel源码下载与编译
- shell之repo/git下载源码断后重新下载(三)
- (16)Blender源码分析之闪屏窗口的菜单从python加载过程