前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：
内容概览
1.基于 openlayers4 实现地图工具栏
2.源代码 demo 下载
本篇的重点内容是利用 openlayers4 实现地图工具栏功能，包括地图缩放、移动、地图量算、地图打印、清空、全屏、鹰眼、比例尺、地图坐标显示等，效果图如下：
image
image
image
image
image
部分核心代码
- 地图缩放
//放大缩小
$("#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);
}
- 地图移动
//移动
$("#panMove").click(function () {
var inter = bmap.getIndexInteraction(bxmap.DEFAULT_INTER_DRAG_PAN_ID);
bmap.setCurrentMutexInteraction(inter);
});
/*----------平移类{bxmap.interaction.DragPan}---------*/
/**
* @classdesc 平移工具
* @constructor
* @extends {ol.interaction.Interaction}
*/
bxmap.interaction.DragPan = function() {
ol.interaction.Interaction.call(this, {
handleEvent: function() { return true; }
});
}
ol.inherits(bxmap.interaction.DragPan, ol.interaction.Interaction);
/**
* @inheritDoc
* @description 使工具激活或失效
* @param {Boolean} active true-激活，false-失效
*/
bxmap.interaction.DragPan.prototype.setActive = function(active){
ol.interaction.Interaction.prototype.setActive.call(this, active);
var cursor = active ? "url("+bxmap.Resource.DragPanCursor+"),auto" : undefined;
this.setCursor(cursor);
}
- 地图量算
更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波
