1) fullscreen全屏控件
写法一:
import { FullScreen } from "ol/control";
this.map.addControl(new FullScreen());
写法二:
import { defaults as defaultControls, FullScreen } from "ol/control";
controls: defaultControls({
zoom: false,
rotate: false,
attribution: false
}).extend([
new FullScreen()
]
2) mouseposition鼠标位置控件
import MousePosition from "ol/control/MousePosition";
import { createStringXY } from "ol/coordinate";
var mousePositionControl = new MousePosition({ //坐标格式 coordinateFormat: createStringXY(5), //地图投影坐标系(若未设置则输出为默认投影坐标系下的坐标) projection: "EPSG:4326", //坐标信息显示样式类名,默认是‘ol-mouse-position‘ className: "custom-mouse-position", //显示鼠标位置信息的目标容器 target: document.getElementById("mouse-position"), //未定义坐标的标记 undefinedHTML: " ", }); this.map.addControl(mousePositionControl);
import MousePosition from "ol/control/MousePosition"; import { format } from "ol/coordinate"; var mousePositionControl = new MousePosition({ //坐标格式 coordinateFormat: function (coordinate) { return format(coordinate, "经度:{x} 纬度:{y}", 2); }, //地图投影坐标系(若未设置则输出为默认投影坐标系下的坐标) projection: "EPSG:4326", //坐标信息显示样式类名,默认是‘ol-mouse-position‘ className: "custom-mouse-position", //显示鼠标位置信息的目标容器 target: document.getElementById("mouse-position"), //未定义坐标的标记 undefinedHTML: " ", }); this.map.addControl(mousePositionControl);
3) overviewmap 地图全局视图(鹰眼图)控件
import { defaults as defaultControls, OverviewMap } from "ol/control";
var overviewMapControl = new OverviewMap({
layers: [
new TileLayer({
source: new OSM(),
})
]
});
controls: defaultControls({ zoom: true }).extend([
overviewMapControl
])
4) scaleline 比例尺控件
import { ScaleLine } from "ol/control";
this.map.addControl(new ScaleLine());
5) zoom缩放控件
controls: defaultControls({
zoom: true,
}).extend([]),
6) zoomslider缩放滑块刻度控件
import { ZoomSlider } from "ol/control";
this.map.addControl(new ZoomSlider());
7) Rotate地图旋转控件
(shift+alt+鼠标旋转地图)
import { Rotate } from "ol/control";
this.map.addControl(new Rotate());
8) ZoomToExtent缩放到全局控件
import { ZoomToExtent } from "ol/control";
this.map.addControl(new ZoomToExtent());