一. 控件简介
- 归属控件（Attribution）：展现地图资源的版权或归属，默认退出到地图中。
- 全屏控件（FullScreen）：管制地图全屏展现。
- 坐标拾取控件（MousePosition）：显示鼠标所在地图地位的坐标。
- 鹰眼控件（OverviewMap）：地图的一个概览图。
- 比例尺控件（ScaleLine）：地图比例尺。
- 旋转控件（Rotate）：管制地图旋转，默认退出到地图中，alt+shift+左键旋转地图。
- 缩放控件（Zoom）：管制地图缩放，默认退出到地图中。
- 滑块缩放控件（ZoomSlider）：以滑块的模式缩放地图。
- 缩放至特定地位控件（ZoomToExtent）：将地图缩放至特定地位。
二. 控件的应用
2.1 归属控件
2.2 全屏控件
map.current.addControl(new FullScreen());2.3 坐标拾取控件
map.current.addControl(new MousePosition({ // 设置数据格式 coordinateFormat: createStringXY(6), // 设置空间参考零碎为'EPSG:4326' projection: 'EPSG:4326'}));2.4 鹰眼控件
map.current.addControl(new OverviewMap({ // 概览图图层 layers: [new TileLayer({ source: new OSM() })], // 管制鹰眼控件开展 collapsed: false}));2.5 比例尺控件
map.current.addControl(new ScaleLine());2.6 旋转控件
2.7 缩放控件
2.8 滑块缩放控件
map.current.addControl(new ZoomSlider());2.9 缩放至特定地位控件
map.current.addControl(new ZoomToExtent({ extent: [ // 地位矩形的左下角坐标 12667718, 2562800, // 地位矩形的右上角坐标 12718359, 2597725 ]}))三. 移除默认退出到地图中的控件
map.current = new Map({ // 挂载到id为map的div容器上 target: 'map', // 设置地图图层 layers: [ // 创立一个应用OpenStreetMap地图源的瓦片图层 new TileLayer({ source: new OSM() }) ], // 设置地图视图 view: new View({ // 设置空间参考零碎为'EPSG:3857' projection: 'EPSG:3857', // 地图的显示核心 center: fromLonLat([0, 0]), // 地图的显示层级 zoom: 3 }), controls: defaults({ // 移除归属控件 attribution: false, // 移除缩放控件 zoom: false, // 移除旋转控件 rotate: false })})四. 批改控件款式
OpenLayers为承载控件的各个DOM元素都设置了类名，通过CSS的类选择器就能够批改指定的控件款式。
import React, { useEffect, useRef } from 'react';import { Map, View } from 'ol';import TileLayer from 'ol/layer/Tile';import { defaults, FullScreen, MousePosition, OverviewMap, ScaleLine, ZoomSlider, ZoomToExtent } from 'ol/control';import { createStringXY } from 'ol/coordinate';import { fromLonLat } from 'ol/proj';import OSM from 'ol/source/OSM';import 'ol/ol.css';import styles from './index.less';export default function Index() { // 地图 const map = useRef<any>(); useEffect(() => { // 初始化地图 initMap(); }) /** * 初始化地图 */ const initMap = () => { map.current = new Map({ // 挂载到id为map的div容器上 target: 'map', // 设置地图图层 layers: [ // 创立一个应用OpenStreetMap地图源的瓦片图层 new TileLayer({ source: new OSM() }) ], // 设置地图视图 view: new View({ // 设置空间参考零碎为'EPSG:3857' projection: 'EPSG:3857', // 地图的显示核心 center: fromLonLat([0, 0]), // 地图的显示层级 zoom: 3 }), controls: defaults({ // 移除归属控件 // attribution: false, // 移除缩放控件 // zoom: false, // 移除旋转控件 // rotate: false }).extend([ // 增加全屏控件 new FullScreen(), // 增加坐标拾取控件 new MousePosition({ // 设置数据格式 coordinateFormat: createStringXY(6), // 设置空间参考零碎为'EPSG:4326' projection: 'EPSG:4326' }), // 增加鹰眼控件 new OverviewMap({ // 概览图图层 layers: [new TileLayer({ source: new OSM() })], // 管制鹰眼控件开展 collapsed: false }), // 增加比例尺控件 new ScaleLine(), // 滑块缩放控件 new ZoomSlider(), // 缩放至特定地位控件 new ZoomToExtent({ extent: [ // 地位矩形的左下角坐标 12667718, 2562800, // 地位矩形的右上角坐标 12718359, 2597725 ] }) ]) }) } return (<div> <div id='map' className={styles.map}></div> </div>)}.map { width: 100vw; height: 100vh; :global { /* 批改滑块缩放控件的款式 */ .ol-zoomslider { top: 105px; } /* 批改鹰眼控件的款式 */ .ol-overviewmap { bottom: 40px; } /* 批改坐标拾取控件的款式 */ .ol-mouse-position { top: initial; bottom: 0px; right: 200px; } /* 批改旋转控件的款式 */ .ol-rotate { right: 40px; } }}参考文章
OpenLayers教程三：地图控件之缩放控件
OpenLayers教程四：地图控件之归属控件和全屏控件
OpenLayers教程五：地图控件之坐标拾取控件和鹰眼控件
OpenLayers教程六：地图控件之旋转控件与比例尺控件