微信訂閱號：Rabbit_svip
Openlayers 是一個模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包乘寒，用于顯示地圖及空間數(shù)據(jù)望众，并與之進行交互，具有靈活的擴展機制伞辛。
簡單來說烂翰，使用 Openlayers（后面簡稱ol） 可以很靈活自由的做出各種地圖和空間數(shù)據(jù)的展示。而且這個框架是完全免費和開源的蚤氏。
通過CDN引入和通過vue-cli的使用方式是有所不同的甘耿。
萌新剛接觸 ol 會被很多新概念嚇到，跟著敲慢慢就會學得懂竿滨。
首先通過vue腳手架初始化項目
vue create vue-ol
安裝 Openlayers
cd vue-ol
npm install ol --save
先看效果（這是OSM底圖的效果佳恬，實際開發(fā)中千萬不能使用OSM）
微信訂閱號：Rabbit_svip
這個效果圖里展示了一個地圖，并且中心點是深圳市于游。
<template>
<div class="vm">
<div id="map"></div>
</div>
</template>
<script>
/*
【1】
import 'ol/ol.css'
引入所需的css毁葱，這項是必須的。
【2】
import { Map, View } from 'ol'
引入 Map 和 View贰剥。這項也是必須的倾剿。
Map是一個地圖容器，是最最最核心的部分蚌成。Map可以加載各類地圖與功能控件前痘，也用于渲染、表現(xiàn)動態(tài)地圖笑陈。每一個地圖都是一個Map對象际度。
View是地圖視圖，控制地圖縮放等基礎交互涵妥，以及地圖投影坐標系乖菱、地圖中心坡锡、分辨率、旋轉角度等窒所。
【3】
import Tile from 'ol/layer/Tile'
Tile翻譯成中文就是“瓦片”鹉勒。這項是必須的。
Tile用來承放所需的底圖吵取。
【4】
import OSM from 'ol/source/OSM'
OSM是ol提供的一個底圖禽额，可以作為練習使用。正式開發(fā)不能用OSM皮官，因為OSM的中國邊界有點問題脯倒。
*/
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
export default {
name: 'FirstMap',
data () {
return {
map: null
}
},
methods: {
initMap () {
// 地圖實例
this.map = new Map({
target: "map", // 對應頁面里 id 為 map 的元素
layers: [ // 圖層
new Tile({
source: new OSM() // 圖層數(shù)據(jù)源
})
],
view: new View({ // 地圖視圖
projection: "EPSG:4326", // 坐標系，有EPSG:4326和EPSG:3857
center: [114.064839, 22.548857], // 深圳坐標
minZoom:10, // 地圖縮放最小級別
zoom: 12 // 地圖縮放級別（打開頁面時默認級別）
})
})
}
},
mounted () {
// 在此生命周期階段捺氢，調(diào)用 initMap 完成地圖渲染
this.initMap();
}
}
</script>
這里省略了所有樣式藻丢，只解釋邏輯部分。
HTML部分
需要有一個元素作為地圖容器摄乒，通常習慣使用 div 元素悠反。
并且該元素需要有一個id屬性，通過id屬性馍佑，js就能綁定這個元素斋否。
JS 部分
JS 部分的使用其實不難，通過 Map 實例出一個地圖拭荤，但這是還什么都沒有茵臭。
通過 target 選中頁面上的目標元素。
layers 是圖層的意思穷劈。layers 是一個數(shù)組笼恰，其實和ps原理一樣踊沸，可以通過多個圖層來渲染出最終效果歇终。這個例子里只有一個圖層（即使只有一個圖層也需要放在數(shù)組里），通過 Tile 拿到底圖數(shù)據(jù)源 OSM逼龟。
之后通過view评凝，把地圖的投影坐標系、地圖中心點腺律、地圖初始縮放級別奕短、地圖最小縮放級別都規(guī)定好。
所以在Map里匀钧，必須有target翎碑、layers、view這三項之斯。一個基礎的地圖就出來里日杈。
最后需要提醒：實際開發(fā)中千萬不能使用OSM。
