摘要：本文主要介绍OpenLayers的使用。
一、一个简单的例子(基于ES6语法环境)
const { Vector as VectorSource, OSM } = window.ol.source;`
const { Feature } = window.ol;
const { Point } = window.ol.geom;
const { fromLonLat } = window.ol.proj;
const { Vector as VectorLayer, Tile as TileLayer } = window.ol.layer;
const { View } = window.ol;
const { Style } = window.ol.style;
const source = new VectorSource({
features: [
new Feature({ geometry: new Point(fromLonLat([32, 12])) }),
new Feature({ geometry: new Point(fromLonLat([32, 12])) }),
new Feature({ geometry: new Point(fromLonLat([33, 11])) }),
]
})
const layer = new VectorLayer({
source,
style() {
return new Style({
image: new Icon({ src: 'icon.png' })
})
}
})
const map = new Map({
target: 'map',
layers: [
new TileLayer({ source: new OSM() }),
layer
],
view: new View({
center: fromLonLat([37.41, 8.82]),
zoom: 4,
})
})
以上代码渲染的结果如下图所示，在一个id为map的div容器里渲染出一副底图并且有3个目标点。
是不是已经被各种构造函数弄的眼花缭乱了？不着急我们慢慢分析。
二、基本概念
1.Map
OpenLayers的核心组件是map（ol.Map）。它被呈现给target容器（例如div，包含地图的网页上的元素）。所有地图属性都可以在构造时配置，或者使用setter方法配置，例如setTarget()。
const map = new Map({ target: 'map' })
2.View
Map不会对中心，缩放级别和地图投影等内容负责，负责这些的是View
map.setView(new View({
center: [0, 0],
zoom: 2
}));
3.Source
Source表示数据源，常用的有ol.source.Vector与ol.source.OSM
const osmSource = new OSM(); //底图数据源
4.Layer
Layer是数据的集合与展示，OpenLayers有四种基本类型的Layer:
- ol.layer.Tile - 渲染在网格中提供平铺图像的源，这些网格由特定分辨率的缩放级别组织。
- ol.layer.Image - 渲染以任意范围和分辨率提供地图图像的源。
- ol.layer.Vector - 渲染矢量数据客户端。
- ol.layer.VectorTile - 渲染作为矢量切片提供的数据。
const osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);
三、进阶
当有了基本的概念后，就可以搭建一个只有底图的地图了，那么如何基于地图做实际业务的开发呢？列如在指定的经纬度展示目标点，以及移除目标点。那就需要更多的类，比如Icon, Feature, Point，当需要做事件响应的时候需要Intereaction，当涉及坐标的时候甚至还需要fromLonLat这样的方法。至于使用哪个类，以及这些类的实例有哪些方法，可以参考官网的API文档。
四、总结
回过头再看我们的例子是不是就清晰很多了？可以看出OpenLayers是基与一系列基本的类来构造实例，这些类的实例又进行嵌套组合，最终实现地图的渲染。当需要动态改变地图的某些展现时，需要对构造出来的实例进行setter与getter操作。
刚开始使用OpenLayer的时候有太多不适应，最主要的就是类的嵌套太多，明明可以用一个类实现的配置，非要用2个甚至3个类来实现，最终构造出很多看起来没有作用的实例，例如Point, Source, Style这样的类。
后来才发现这样的好处是可以对逻辑进行解耦，可以快速定位业务需求，并非过度设计，而是恰到好处！
