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

9次阅读

共计 1413 个字符，预计需要花费 4 分钟才能阅读完成。

Map、Layer、Source 和 View 是 OpenLayers 框架体系中的外围类，简直所有的动作都围绕这几个外围类开展，以实现地图的加载与其相干操作。
在 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 会在自定义的 div 容器中创立一个 viewport 容器，地图中的所有内容都搁置在 viewport 中出现，viewport 容器中有三个要害的元素层：

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

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

正文完