一. OpenLayers概述
- Map、Layer、Source和View是OpenLayers框架体系中的核心类，几乎所有的动作都围绕这几个核心类展开，以实现地图的加载与其相关操作。
- 在OpenLayers的体系框架中：把整个地图看作一个容器（Map），核心为地图图层（Layer），每个图层有对应的数据源（Source），并且由地图视图（View）控制地图表现。地图容器上还支持一些与用户交互的控件（Control和Interaction），另外，OpenLayers还支持事件机制。
二. 简单的地图展示
import React from 'react';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
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 id='map' style={{ width: '100vw', height: '100vh' }}></div>)
}
}
OSM.png
- 调用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（用于控制地图右下角标记）这三个控件。
DOM.png
