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, { useRef, useEffect } 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教程六：地图控件之旋转控件与比例尺控件