摘要：本文主要介紹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有四種基本類型的Layer:
- ol.layer.Tile - 渲染在網(wǎng)格中提供平鋪圖像的源妒蔚，這些網(wǎng)格由特定分辨率的縮放級(jí)別組織穿挨。
- ol.layer.Image - 渲染以任意范圍和分辨率提供地圖圖像的源。
- ol.layer.Vector - 渲染矢量數(shù)據(jù)客戶端肴盏。
- 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)榨崩。那就需要更多的類，比如Icon, Feature, Point章母，當(dāng)需要做事件響應(yīng)的時(shí)候需要Intereaction母蛛，當(dāng)涉及坐標(biāo)的時(shí)候甚至還需要fromLonLat這樣的方法。至于使用哪個(gè)類乳怎，以及這些類的實(shí)例有哪些方法彩郊，可以參考官網(wǎng)的API文檔。
四蚪缀、總結(jié)
回過(guò)頭再看我們的例子是不是就清晰很多了秫逝？可以看出OpenLayers是基與一系列基本的類來(lái)構(gòu)造實(shí)例，這些類的實(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)刷后，最主要的就是類的嵌套太多狈醉，明明可以用一個(gè)類實(shí)現(xiàn)的配置，非要用2個(gè)甚至3個(gè)類來(lái)實(shí)現(xiàn)惠险，最終構(gòu)造出很多看起來(lái)沒(méi)有作用的實(shí)例苗傅，例如Point, Source, Style這樣的類。
后來(lái)才發(fā)現(xiàn)這樣的好處是可以對(duì)邏輯進(jìn)行解耦班巩，可以快速定位業(yè)務(wù)需求渣慕，并非過(guò)度設(shè)計(jì)，而是恰到好處抱慌！
