OpenLayers 学习笔记 01：start
2019-08-19 本文已影响0人
BML0
概述
A library for mapping needs.
- 语言：JavaScript
- 协议：2-clause BSD License（FreeBSD）
- 版本：项目选用v4.6.5（latest v5.3.0）
基础
- JavaScript 编程能力
- GIS 理论知识
- 了解 GIS 引擎的作用
- 面向对象思想
学习步骤（按照v4学习）
选自https://www.jianshu.com/p/6785e755fa0d，作者：猿基地
- 官网 Quick Start
- 弄清楚每一行代码的意思。然后尝试在这个基础上进行修改。（比如修改地图中心，定位到你所在城市，或者你家。 修改地图缩放的层级，限制最大/最小缩放层级。）
- 增加一层，ol.layer.Vector，并在上面添加一些元素（比如点，圆，多边形，并修改其样式，比如线条粗细，颜色。）
- 学习如何交互，实现选择2中添加的点，圆，或多边形。
- 学习高级交互，手动绘制圆，多边形。
- 学习其他类型的layer，同时需要更多的GIS知识，比如同服务器通信的各种协议，以及如何请求获取资源，以及如何加载到地图上，整个结合起来。
学习过程中，多参照学习官方的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 () {
// 创建一个Map对象
var map = new Map({
// target指向map container的id
target: 'olMap',
// layers数组用于定义地图中可用的图层列表
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
// view指定地图的中心、分辨率、旋转
view: new View({
center: [0, 0],
zoom: 2
})
})
}
}
</script>
<style lang="stylus" scoped>
.olMap
height 400px
width 100%
</style>
