地图控件controls

前言

这个属性 不是必须存在 的，默认使用的是control~defaults 内容，并且是已 Array数组形式存在，也就是说可以像图层和交互一样，可以多个控件功能承载在地图上。

常见的controls控件

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

控件的使用

FullScreen 全屏控件

官网 🤪查看更多 (opens new window)

import { defaults as defaultControls, FullScreen } from "ol/control";
// 方式1
new Map({
    // ...
    controls:[new FullScreen()]
})
// 方式2
map.value.addControl(new FullScreen());

// 其它控件类似

MousePosition 鼠标位置控件

官网 👍查看更多 (opens new window)

import MousePosition from "ol/control/MousePosition";
import { createStringXY } from 'ol/coordinate';

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

OverviewMap 全局视图(鹰眼图)控件

官网 😀查看更多 (opens new window) 参数：以下参数都为可选

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

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

ScaleLine 比例尺控件

官网 👻查看更多 (opens new window)

import {  ScaleLine } from "ol/control";

Zoom 缩放控件

官网 😱查看更多 (opens new window)

// 方式1
defaultControls({ zoom: true })
// 方式2
import { Zoom } from 'ol/control';
const zoom = new Zoom()

ZoomSlider 缩放滑块刻度控件

官网 ✨查看更多 (opens new window)

import {  ZoomSlider } from "ol/control";
const zoomSlider = new ZoomSlider()