openlayers6【七】地图控件controls详解

文章目录

1. controls 简述
2. 常见的 controls 控件
3. 控件的使用
- 3.1 fullscreen 全屏控件
- 3.2 mouseposition 鼠标位置控件
- 3.3 overviewmap 地图全局视图（鹰眼图）控件
- 3.4 scaleline 比例尺控件
- 3.5 zoom 缩放控件
- 3.6 zoomslider 缩放滑块刻度控件
4. 总结

1. controls 简述

上篇文章我们将了在地图上的交互(interaction)，那些都是一些隐性的需要去使用才能知道存在有这样一个东西，就像彩蛋一样。这篇我们主要讲地图上的控件(controls)，这些可以说都是显性的东西，如果设置了，打开地图页面就能够看到的东西。场景

跟 interaction交互一样，可以看到官网的描述：最初添加到地图的控件。如果未指定， module:ol/control~defaults则使用。也就是说这个属性 不是必须存在 的，默认使用的是control~defaults 内容，并且是已 Array数组形式存在，也就是说可以像图层和交互一样，可以多个控件功能承载在地图上。

2. 常见的 controls 控件

controldefaults，地图默认包含的控件，包含缩放控件和旋转控件；
fullscreen，全屏控件，用于全屏幕查看地图；
mouseposition，鼠标位置控件，显示鼠标所在地图位置的坐标，可以自定义投影；
overviewmap，地图全局视图控件（鹰眼图）；
scaleline，比例尺控件；
zoom，缩放控件；
zoomslider，缩放滑块刻度控件；

3. 控件的使用

3.1 fullscreen 全屏控件

import { defaults as defaultControls, FullScreen } from "ol/control";
this.map.addControl(new FullScreen());

3.2 mouseposition 鼠标位置控件

import MousePosition from "ol/control/MousePosition";
// 向地图添加 MousePosition
var mousePositionControl = new MousePosition({//坐标格式coordinateFormat: createStringXY(5),//地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）projection: "EPSG:4326",//坐标信息显示样式类名，默认是'ol-mouse-position'className: "custom-mouse-position",//显示鼠标位置信息的目标容器target: document.getElementById("mouse-position"),//未定义坐标的标记undefinedHTML: "&nbsp;"});this.map.addControl(mousePositionControl);

3.3 overviewmap 地图全局视图（鹰眼图）控件

参数：以下参数都为可选，添加如下代码：

collapsed，收缩选项，默认为true，收缩；
collapseLabel，收缩后的图标按钮；
collapsible，是否可以收缩为图标按钮，默认为 true；
label，当 overviewmapcontrol 收缩为图标按钮时，显示在图标按钮上的文字或者符号，默认为 »；
layers，overviewmapcontrol针对的图层，默认情况下为所有图层，一般这里设置的图层和map图层数据一致；
render，当 overviewmapcontrol 重新绘制时，调用的函数；
target，放置的 HTML 元素；
tipLabel，鼠标放置在图标按钮上的提示文字。

var overviewMapControl = new OverviewMap({layers: [new TileLayer({source: new XYZ({url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"})})]
});
this.map = new Map({target: target,layers: tileLayer,view: view,// 添加鹰眼图的控件controls: defaultControls({ zoom: true }).extend([overviewMapControl])
});

3.4 scaleline 比例尺控件

import { defaults as defaultControls,ScaleLine} from "ol/control";
this.map.addControl(new ScaleLine());

3.5 zoom 缩放控件

controls: defaultControls({ zoom: true }).extend([])

3.6 zoomslider 缩放滑块刻度控件

import { defaults as defaultControls, ZoomSlider } from "ol/control";
this.map.addControl(new ZoomSlider());

4. 总结

这里只是简单介绍了几个常用的控件全屏，鼠标位置，鹰眼图，比例尺，缩放，缩放滑块等，更多的控件可以去官网查看。