OpenLayers6学习笔记（一）—— 初始化一个地图

一. OpenLayers概述

1. Map、Layer、Source和View是OpenLayers框架体系中的核心类，几乎所有的动作都围绕这几个核心类展开，以实现地图的加载与其相关操作。
2. 在OpenLayers的体系框架中：把整个地图看作一个容器（Map），核心为地图图层（Layer），每个图层有对应的数据源（Source），并且由地图视图（View）控制地图表现。地图容器上还支持一些与用户交互的控件（Control和Interaction），另外，OpenLayers还支持事件机制。

二. 简单的地图展示

import React from 'react';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import OSM from 'ol/source/OSM';
import 'ol/ol.css';

export default class InitMap extends React.Component{
  constructor(props){
    super(props)
    // 地图
    this._map = {}
  }

  componentDidMount(){
  	// 初始化地图
    this._initMap()
  }

  /**
   * 初始化地图
   */
  _initMap = () => {
    this._map = 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
      }),
    })
  }

  render(){
    return (<div>
      <div id='map' style={{width:'100vw',height:'100vh'}}></div>
    </div>)
  }
}

• 调用Map类生成一个地图容器对象，通过target参数关联到id为map的div容器上。
• 通过layers参数设置需要加载的瓦片图层（TileLayer），这个瓦片图层包含了一个数据源（OSM），这个数据源是OpenStreetMap的地图数据。
• 通过view参数设置地图视图（View），地图视图中设置了相应的空间参考系统（projection）、地图视图中心点（center）、地图视图缩放级别（zoom）。

三. OpenLayers的DOM元素组织结构

        OpenLayers会在自定义的div容器中创建一个viewport容器，地图中的所有内容都放置在viewport中呈现，viewport容器中有三个关键的元素层：

• 地图渲染层（ol-layers）：这是一个canvas元素，地图基于canvas 2D方式渲染。
• 内容叠加层（ol-overlaycontainer）：用于放置叠置层（Overlay），如在地图上添加弹窗。
• 地图控件层（ol-overlaycontainer-stopevent）：用于放置控件，默认情况下会放置Zoom（用于控制地图放大、缩小）、Rotate（用于控制地图旋转）、Attribution（用于控制地图右下角标记）这三个控件。

参考文章：

OpenLayers教程一：OpenLayers概述
OpenLayers教程二：实现简单的地图显示