openlayers4 入门开发系列之地图工具栏篇（附源码下载）

前言

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

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

geoserver 安装部署步骤

geoserver 发布地图服务 WMS

geoserver 发布地图服务 WMTS

geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

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 入门开发系列之地图工具栏篇（附源码下载）相关推荐

openlayers入门开发系列之地图工具栏篇
本篇的重点内容是利用openlayers实现地图工具栏功能,包括地图缩放.移动.地图量算.地图打印.清空.全屏.鹰眼.比例尺.地图坐标显示等,效果图如下: 部分核心代码如下: 地图缩放地图移动地图 ...
openlayers4 入门开发系列之船讯篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
cesium 3dtiles 加载本地数据_cesium结合geoserver实现地图空间查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
geoserver三维_cesium结合geoserver实现地图空间查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
openlayers4 入门开发系列之风场图篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
克里金插值详细步骤_openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇（附源码下载）...
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
openlayers入门开发系列之地图属性查询篇
本篇的重点内容是利用openlayers实现地图属性查询功能,效果图如下: 实现思路: 模糊查询点击事件 //模糊查询 $("#swatchQuery").bind("c ...
leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...

openlayers4 入门开发系列之地图工具栏篇（附源码下载）

前言

内容概览

部分核心代码

openlayers4 入门开发系列之地图工具栏篇（附源码下载）相关推荐

最新文章

热门文章