关于前端:OpenLayers6学习笔记二-地图控件

一. 控件简介

1. 归属控件（Attribution）：展现地图资源的版权或归属，默认退出到地图中。
2. 全屏控件（FullScreen）：管制地图全屏展现。
3. 坐标拾取控件（MousePosition）：显示鼠标所在地图地位的坐标。
4. 鹰眼控件（OverviewMap）：地图的一个概览图。
5. 比例尺控件（ScaleLine）：地图比例尺。
6. 旋转控件（Rotate）：管制地图旋转，默认退出到地图中，alt+shift+ 左键旋转地图。
7. 缩放控件（Zoom）：管制地图缩放，默认退出到地图中。
8. 滑块缩放控件（ZoomSlider）：以滑块的模式缩放地图。
9. 缩放至特定地位控件（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 教程六：地图控件之旋转控件与比例尺控件