openlayers4 入门开发系列之地图工具栏篇(附源码下载)
前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:
内容概览
1.基于 openlayers4 实现地图工具栏
2.源代码 demo 下载
本篇的重点内容是利用 openlayers4 实现地图工具栏功能,包括地图缩放、移动、地图量算、地图打印、清空、全屏、鹰眼、比例尺、地图坐标显示等,效果图如下:
部分核心代码
- 地图缩放
//放大缩小
$("#zoomOut").click(function () {
var inter = bmap.getIndexInteraction(bxmap.DEFAULT_INTER_ZOOM_IN_ID);
bmap.setCurrentMutexInteraction(inter);
});
$("#zoomIn").click(function () {
var inter = bmap.getIndexInteraction(bxmap.DEFAULT_INTER_ZOOM_OUT_ID);
bmap.setCurrentMutexInteraction(inter);
});
/*----------矩形放大类{bxmap.interaction.ZoomIn}---------*/
/**
* @classdesc 拉框矩形放大地图
* @constructor
* @extends {ol.interaction.DragZoom}
*/
bxmap.interaction.ZoomIn = function() {
ol.interaction.DragZoom.call(this, {
condition : ol.events.condition.always,
out : false
});
} ol.inherits(bxmap.interaction.ZoomIn, ol.interaction.DragZoom); /**
* @inheritDoc
* @description 使工具激活或失效
* @param {Boolean} active true-激活,false-失效
*/
bxmap.interaction.ZoomIn.prototype.setActive = function(active){
ol.interaction.DragZoom.prototype.setActive.call(this, active); var cursor = active ? "url("+bxmap.Resource.ZoomInCursor+"),auto" : undefined;
this.setCursor(cursor);
} /*----------矩形缩小类{bxmap.interaction.ZoomOut}---------*/
/**
* @classdesc 拉框矩形缩小地图
* @constructor
* @extends {ol.interaction.DragZoom}
*/
bxmap.interaction.ZoomOut = function() {
ol.interaction.DragZoom.call(this, {
condition : ol.events.condition.always,
out : true
});
} ol.inherits(bxmap.interaction.ZoomOut, ol.interaction.DragZoom); /**
* @inheritDoc
* @description 使工具激活或失效
* @param {Boolean} active true-激活,false-失效
*/
bxmap.interaction.ZoomOut.prototype.setActive = function(active){
ol.interaction.DragZoom.prototype.setActive.call(this, active); var cursor = active ? "url("+bxmap.Resource.ZoomOutCursor+"),auto" : undefined;
this.setCursor(cursor);
}
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
openlayers4 入门开发系列之地图工具栏篇(附源码下载)的更多相关文章
- arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- openlayers4 入门开发系列之图层控制(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列结合 echarts4 实现统计图(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- arcgis api 3.x for js入门开发系列九热力图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列八聚合效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- MicroService 微服务架构模式简述
开源地址: https://github.com/TheCodeCleaner/MicroService4Net 本文内容 微服务 微服务风格的特性 组件化(Componentization )与服务 ...
- crontab定时任务, 定时到秒
crontab定时任务最小支持到minute, 定时到秒执行的任务, 写起来比较麻烦 * * * * * /bin/sh /home/jiewang/portraitProc/test.sh > ...
- PAT1003:Emergency
1003. Emergency (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue As an emerg ...
- java多线程及线程安全详解
为什么要使用多线程: 单线程只能干一件事 而多线程可以同时干好多事(将任务放到线程里执行 效率高) 而所谓同时干并不是真正意义上的同时 只是(这里就叫CPU)cpu在每个线程中随机切换来执行 ...
- Ubuntu系统下解决“YourUserName不在sudoers文件中。此事将被报告”的问题
本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=624 问题描述: 之前在使用Fedora系统时遇到过在使用 sudo 时提示"YourUserName不在 ...
- springMVC引入Validation详解
本文简单介绍如何引入validation的步骤,如何通过自定义validation减少代码量,提高生产力.特别提及:非基本类型属性的valid,GET方法的处理,validation错误信息的统一re ...
- SQL注入简单介绍
一.SQL注入概念 1.sql注入是一种将sql代码添加到输入参数中 2.传递到sql服务器解析并执行的一种攻击手法 举例:某个网站的用户名为name=‘admin’.执行时为select ...
- selenium中浏览器及对应的驱动(可下载)
https://blog.csdn.net/huilan_same/article/details/52615123,灰蓝大神的总结,可直接下载 下载chrome浏览器,查看版本 http://blo ...
- TProfiler部署文档--笔记
TProfiler是一个可以在生产环境长期使用的性能分析工具.它同时支持剖析和采样两种方式,记录方法执行的时间和次数,生成方法热点 对象创建热点 线程状态分析等数据,为查找系统性能瓶颈提供数据支持. ...
- multiWriter.go
package blog4go import ( "errors" "fmt" ) var ( // ErrFilePathNotFound 文件路径找不到 E ...