摘要：本文主要介紹OpenLayers的使用。
一、一個(gè)簡(jiǎn)單的例子(基于ES6語(yǔ)法環(huán)境)
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,
})
})
以上代碼渲染的結(jié)果如下圖所示，在一個(gè)id為map的div容器里渲染出一副底圖并且有3個(gè)目標(biāo)點(diǎn)。
是不是已經(jīng)被各種構(gòu)造函數(shù)弄的眼花繚亂了？不著急我們慢慢分析。
二、基本概念
1.Map
OpenLayers的核心組件是map（ol.Map）。它被呈現(xiàn)給target容器（例如div，包含地圖的網(wǎng)頁(yè)上的元素）。所有地圖屬性都可以在構(gòu)造時(shí)配置，或者使用setter方法配置，例如setTarget()。
const map = new Map({ target: 'map' })
2.View
Map不會(huì)對(duì)中心，縮放級(jí)別和地圖投影等內(nèi)容負(fù)責(zé)，負(fù)責(zé)這些的是View
map.setView(new View({
center: [0, 0],
zoom: 2
}));
3.Source
Source表示數(shù)據(jù)源，常用的有ol.source.Vector與ol.source.OSM
const osmSource = new OSM(); //底圖數(shù)據(jù)源
4.Layer
Layer是數(shù)據(jù)的集合與展示，OpenLayers有四種基本類(lèi)型的Layer:
- ol.layer.Tile - 渲染在網(wǎng)格中提供平鋪圖像的源，這些網(wǎng)格由特定分辨率的縮放級(jí)別組織。
- ol.layer.Image - 渲染以任意范圍和分辨率提供地圖圖像的源。
- ol.layer.Vector - 渲染矢量數(shù)據(jù)客戶(hù)端。
- ol.layer.VectorTile - 渲染作為矢量切片提供的數(shù)據(jù)。
const osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);
三、進(jìn)階
當(dāng)有了基本的概念后，就可以搭建一個(gè)只有底圖的地圖了，那么如何基于地圖做實(shí)際業(yè)務(wù)的開(kāi)發(fā)呢？列如在指定的經(jīng)緯度展示目標(biāo)點(diǎn)，以及移除目標(biāo)點(diǎn)。那就需要更多的類(lèi)，比如Icon, Feature, Point，當(dāng)需要做事件響應(yīng)的時(shí)候需要Intereaction，當(dāng)涉及坐標(biāo)的時(shí)候甚至還需要fromLonLat這樣的方法。至于使用哪個(gè)類(lèi)，以及這些類(lèi)的實(shí)例有哪些方法，可以參考官網(wǎng)的API文檔。
四、總結(jié)
回過(guò)頭再看我們的例子是不是就清晰很多了？可以看出OpenLayers是基與一系列基本的類(lèi)來(lái)構(gòu)造實(shí)例，這些類(lèi)的實(shí)例又進(jìn)行嵌套組合，最終實(shí)現(xiàn)地圖的渲染。當(dāng)需要?jiǎng)討B(tài)改變地圖的某些展現(xiàn)時(shí)，需要對(duì)構(gòu)造出來(lái)的實(shí)例進(jìn)行setter與getter操作。
剛開(kāi)始使用OpenLayer的時(shí)候有太多不適應(yīng)，最主要的就是類(lèi)的嵌套太多，明明可以用一個(gè)類(lèi)實(shí)現(xiàn)的配置，非要用2個(gè)甚至3個(gè)類(lèi)來(lái)實(shí)現(xiàn)，最終構(gòu)造出很多看起來(lái)沒(méi)有作用的實(shí)例，例如Point, Source, Style這樣的類(lèi)。
后來(lái)才發(fā)現(xiàn)這樣的好處是可以對(duì)邏輯進(jìn)行解耦，可以快速定位業(yè)務(wù)需求，并非過(guò)度設(shè)計(jì)，而是恰到好處！
