关于前端:OpenLayers6学习笔记一-初始化一个地图

一. OpenLayers概述

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

二. 简略的地图展现

import React, { useEffect } 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 function Index() {

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

  /**
   * 初始化地图
   */
  const initMap = () => {
    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
      })
    })
  }

  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教程二：实现简略的地图显示