概述
A library for mapping needs.
- 語言：JavaScript
- 協(xié)議：2-clause BSD License（FreeBSD）
- 版本：項目選用v4.6.5（latest v5.3.0）
基礎(chǔ)
- JavaScript 編程能力
- GIS 理論知識
- 了解 GIS 引擎的作用
- 面向?qū)ο笏枷?/li>
學(xué)習(xí)步驟（按照v4學(xué)習(xí)）
選自http://www.itdecent.cn/p/6785e755fa0d，作者：猿基地
- 官網(wǎng) Quick Start
- 弄清楚每一行代碼的意思。然后嘗試在這個基礎(chǔ)上進(jìn)行修改。（比如修改地圖中心，定位到你所在城市，或者你家。 修改地圖縮放的層級，限制最大/最小縮放層級。）
- 增加一層，ol.layer.Vector，并在上面添加一些元素（比如點，圓，多邊形，并修改其樣式，比如線條粗細(xì)，顏色。）
- 學(xué)習(xí)如何交互，實現(xiàn)選擇2中添加的點，圓，或多邊形。
- 學(xué)習(xí)高級交互，手動繪制圓，多邊形。
- 學(xué)習(xí)其他類型的layer，同時需要更多的GIS知識，比如同服務(wù)器通信的各種協(xié)議，以及如何請求獲取資源，以及如何加載到地圖上，整個結(jié)合起來。
學(xué)習(xí)過程中，多參照學(xué)習(xí)官方的examples里面的例子。
安裝依賴
npm包安裝
$ yarn add ol@4.6.5 --registry=https://registry.npm.taobao.org
<script>引用
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
兼容IE
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
Quick Start with Vue
<template>
<div class="olMap-con">
<h2>My Map</h2>
<!-- map container -->
<div class="olMap" id="olMap"></div>
</div>
</template>
<script>
import Map from 'ol/map.js'
import View from 'ol/view.js'
import TileLayer from 'ol/layer/tile.js'
import XYZ from 'ol/source/xyz.js'
export default {
name: 'olMap',
mounted () {
// 創(chuàng)建一個Map對象
var map = new Map({
// target指向map container的id
target: 'olMap',
// layers數(shù)組用于定義地圖中可用的圖層列表
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
// view指定地圖的中心、分辨率、旋轉(zhuǎn)
view: new View({
center: [0, 0],
zoom: 2
})
})
}
}
</script>
<style lang="stylus" scoped>
.olMap
height 400px
width 100%
</style>
