control是openlayer中的控件类
他们不会随着地图的移动而移动，一直处于一个固定的位置。 在实现上，并不是在画布上绘制的，而是使用传统的HTML元素来实现的，便于同地图分离，也便于界面实现。 在本章节中，将先概览OpenLayers 3中已有的地图控件，对其实现进行分析，在此基础上进一步修改其样式，从而定义自己的控件。
默认情况下，在地图上是不会显示这么多地图控件的，只会应用ol.control.defaults()这个函数返回的地图控件，默认包含了ol.control.Zoom，ol.control.Rotate和ol.control.Attribution这个控件。 其使用方式同ol.interaction.defaults()很像，同样可以设置一些参数来控制控件的一些功能，从而实现定制化需求。
实现一个没有任何控件的地图
var map = new ol.Map({
// 设置地图控件，默认的三个控件都不显示
controls: ol.control.defaults({
//右下角的地图信息控件
attribution: false,
//指北针控件
rotate: false,
//缩放按钮控件
zoom: false
}),
//或者这样写：
controls: []，
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
默认控件
在地图中默认配置以下选项，如果不自行设置，会返回一个包含下面控件的集合。
1.zoom
缩放控件，包含两个按钮，一个放大，一个缩小，默认的 CSS样式类分别为 .ol-zoom-in和.ol-zoom-out。
zoom
可选参数
new ol.control.zoom({
duration:number=250, // 动画毫秒
className:string,
zoomInLabel:HTMLElement | string,//缩小按钮的文字，也可以用DOM元素进行替换，如(`span`元素)
zoomOutLabel://放大按钮的文字，也可以用DOM元素进行替换，如(`span`元素)
zoomInTipLabel：string ，//鼠标放在缩小按钮上的提示信息
zoomOutTipLabel: string //鼠标放在放大按钮上的提示信息
delta：number //点击按钮的缩放层次
target：HTMLElement | string //如果你想把控件放置在地图的外面
})
2. rotate
地图旋转控件，主要作用是当地图角度不为 0 时，默认显示，点击，使地图恢复旋转角度为 0。
rotate
new ol.control.Rotate({
className:string (默认 'ol-rotate') //
label: string | HTMLElement(默认 '⇧') //渲染按钮的文字，也可以用DOM元素替代
tipLabel:string (默认 'Reset rotation') //鼠标悬浮在按钮上的提示文字
duration:number (默认 250) //动画毫秒
autoHide: boolean (默认 true) // 旋转方向为0时自动隐藏
render: function //当控件重新绘制的时候，调用的函数
resetNorth:function //点击控件时触发的函数
target: HTMLElement | string // 如果你想把控件放置在地图的外面如document.getElementById('')
})
取消当前默认控件
controls: ol.control.defaults({
rotate: false
})
默认情况下，该控件不会显示；当地图旋转角度不为 0 时，才会显示，原因是该控件为地图默认添加控件。当该控件显示时候，其默认的位置和全屏控件重合，所以如果想要显示该按钮，那么全屏按钮就会被覆盖。
有两种方法可以解决该问题：
- 按照
mousepositioncontrol的方式，将其默认位置放于其它地方； - 覆盖其原有的 CSS 样式，最好不要修改原文件，因为其它地方如果使用的话，就会同样改变。
.ol-rotate{
right:40px;
}
new ol.control.Rotate({
autoHide:false
})
3.Attribution
其他控件
加载了所有基本控件的地图
var map = new ol.Map({
// 在默认控件的基础上，再加上其他内置的控件
controls: ol.control.defaults().extend([
//全屏
new ol.control.FullScreen(),
//鼠标位置控件
new ol.control.MousePosition(),
//鸟瞰图控件
new ol.control.OverviewMap(),
//比例尺控件
new ol.control.ScaleLine(),
//缩放滚动条控件
new ol.control.ZoomSlider(),
// 放大到设定区域控件
new ol.control.ZoomToExtent()
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
1.fullscreen- 全屏控件
地图全屏控件，该控件提供一个全屏按钮，当点击的时候，地图充满整个屏幕（注意是整个屏幕，而不是整个浏览器窗口）；当在全屏模式时，在屏幕的右上角会出现一个退出按钮，用于退出全屏模式，同时按 Esc 按钮也可以退出全屏模式。
fullscreen
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
])
2.mouseposition- 鼠标位置控件
mouseposition
鼠标位置控件，用于显示鼠标指针 2D 坐标，默认情况下，它显示的是地图的 view 对象中设置的投影，但是可以修改为任意投影。鼠标位置控件是加载在地图右上角的位置，如，我们在以上全屏控件的基础上加如下代码：
controls: ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.MousePosition()
])
默认的鼠标位置控件，连全屏按钮都遮盖了，为了避免遮盖，我们将鼠标位置控件移动到别的地方。
方法有两种：
- 修改
ol.control.MousePosition参数
<div id="mouse-position" class="mouse-position-wrapper">
<div class="custom-mouse-position"></div>
</div>
.mouse-position-wrapper{
width:300px;
height:29px;
color:#FFFFFF;
position:absolute;
right:20px;
bottom:6px;
z-index:999;
}
controls: ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position')
})
])
- 覆盖其原有的 CSS 样式，最好不要修改原文件，因为其它地方如果使用的话，就会同样改变。
.ol-mouse-position {
right:40px;
}
-
overviewmap - 全局地图控件
overviewmap
全局地图控件，显示当前视口中的地图位于全局地图的哪一部分
默认情况下，控件为收缩状态，点击即可打开，打开后如下图所示：
-
scaleline - 比例尺控件
比例尺控件，显示当前地图的分辨率，也就是比例尺，默认的位置和 overviewmap control位置重合，要移动位置避免覆盖，同样覆盖默认样式：
/* rewrite the default css in `ol.css` */
.ol-scale-line {
#left:100px;
}
-
zoomslider - 缩放条控件
缩放条控件，主要显示当前的分辨率对应的刻度，给予一个直观的显示，其默认的条没有刻度，如果需要有刻度的，需要自己定制。
-
zoomtoextent - 缩放到图层控件
缩放到图层控件，将地图缩放到视口可以容纳整个地图的合适尺度
这个控件也没有什么特殊的选项，除了 extent，表示缩放到范围的大小。需要注意的是该控件位置和 zoomslidercontrol 位置会有部分重叠，同样，我们需要覆盖zoomslidercontrol的样式类： .ol-zoomslider：
.ol-zoomslider{
top:100px;
left: 9px;
}
我们看一下点击之前和之后的效果对比：
点击之后其实已经到了合适的尺寸，但是地图配置为连贯显示，也就是左右不间断，重复拼接在一起，所以会有这样的效果。
修改控件UI
- css修改控件UI
<style>
.ol-zoom .ol-zoom-in {
background-color: #0000ff;
color: #ff0000;
}
.ol-zoom .ol-zoom-out {
background-color: #0000ff;
color: black;
}
</style>
- js修改控件UI
// 设置放大按钮符号，下面这个代码需要引入jquery，或者zepto库
$('#map2 .ol-zoom-in').html('<>');
添加自定义控件
- 利用创建文档流进行DOM元素添加
<style>
.share {
position: absolute;
top: 10px;
right: 10px;
border: 1px;
border-color: #333;
background-color: #339999;
color: #fff;
box-shadow: 0px 0px 2px #666;
cursor: pointer;
padding: 0 4px 0 4px;
}
</style>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// 在viewport节点下添加一个分享按钮
var viewport = map.getViewport();
$(viewport).append('<div id="share" class="share">地图输出</div>');
// 监听按钮点击事件，执行相关操作
document.getElementById('share').onclick = function() {
map.once('postcompose', function (event) {
var canvas = event.context.canvas;
canvas.toBlob(function (blob) {
saveAs(blob, 'map.png');
});
});
map.renderSync();
}
解释一下代码：首先在viewport节点下添加一个输出按钮，然后监听这个按钮，这里我们使用了一个saveAs方法，这是一个调用的封装好的保存文件的js文件，最后重新渲染了map，来看一下效果：
点击地图输出，会显示我们已经下载好的地图：
打开map.png:
网友评论