关于前端:OpenLayers6学习笔记四-图层切换

import React, {useRef, useState, useEffect} from 'react';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import {defaults} from 'ol/control';
import {fromLonLat} from 'ol/proj';
import {OSM, Stamen, BingMaps} from 'ol/source';
import {Radio} from 'antd';
import 'ol/ol.css';
import styles from './index.less';

export default function Index() {
  // 地图
  const map = useRef<any>();
  // 以后图层
  const [currentLayer, setCurrentLayer] = useState('osm');

  useEffect(() => {
    // 初始化地图
    initMap();}, [])

  /**
   * 初始化地图
   */
  const initMap = () => {
    // 创立一个应用 OpenStreetMap 地图源的瓦片图层
    let osmLayer = new TileLayer({source: new OSM() });
    osmLayer.set('layerId', 'osm');
    // 创立一个应用 Stamen Map 地图源的瓦片图层
    let stamenMapLayer = new TileLayer({
      source: new Stamen({layer: 'watercolor'})
    });
    stamenMapLayer.set('layerId', 'stamenMap');
    // 创立一个应用 Bing Map 地图源的瓦片图层
    let bingMapLayer = new TileLayer({
      source: new BingMaps({
        key: 'Bing Map 的 key，能够去官网申请',
        imagerySet: 'AerialWithLabels'
      })
    });
    bingMapLayer.set('layerId', 'bingMap');

    // 加载地图
    map.current = new Map({
      // 挂载到 id 为 map 的 div 容器上
      target: 'map',
      // 设置地图图层
      layers: [osmLayer, stamenMapLayer, bingMapLayer],
      // 设置地图视图
      view: new View({
        // 设置空间参考零碎为 'EPSG:3857'
        projection: 'EPSG:3857',
        // 地图的显示核心
        center: fromLonLat([0, 0]),
        // 地图的显示层级
        zoom: 3
      }),
      controls: defaults({
        // 移除归属控件
        attribution: false,
        // 移除缩放控件
        zoom: false,
        // 移除旋转控件
        rotate: false
      })
    })
  }

  useEffect(() => {const layerCollection = map.current.getLayers().getArray();
    layerCollection.forEach((v: any) => {if (v.get('layerId') === currentLayer) {v.setVisible(true);
      } else {v.setVisible(false);
      }
    });
  }, [currentLayer])

  return (<div className={styles.mapCon}>
    <div id='map' className={styles.map}></div>
    <div className={styles.switchLayer}>
      <Radio.Group onChange={(e) => {setCurrentLayer(e.target.value) }} value={currentLayer}>
        <Radio value={'osm'}>OpenStreetMap</Radio>
        <Radio value={'stamenMap'}>Stamen Map</Radio>
        <Radio value={'bingMap'}>Bing Map</Radio>
      </Radio.Group>
    </div>
  </div>)
}

参考文章

OpenLayers 教程七：地图控件之本人实现图层切换控件
OpenLayers 教程十一：多源数据加载之用最简略的形式加载瓦片地图