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());
原文:https://www.cnblogs.com/zypweb/p/15073616.html