概述

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>

v4.6.5 其他资料

• docs
• API
• examples
• more available layer sources