【vue-openlayers】Hello Openlayers

微信订阅号：Rabbit_svip

Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制。

简单来说，使用 Openlayers（后面简称ol） 可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的。

通过CDN引入和通过vue-cli的使用方式是有所不同的。

萌新刚接触 ol 会被很多新概念吓到，跟着敲慢慢就会学得懂。

---

首先通过vue脚手架初始化项目

vue create vue-ol

安装 Openlayers

cd vue-ol

npm install ol --save

先看效果（这是OSM底图的效果，实际开发中千万不能使用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可以加载各类地图与功能控件，也用于渲染、表现动态地图。每一个地图都是一个Map对象。
View是地图视图，控制地图缩放等基础交互，以及地图投影坐标系、地图中心、分辨率、旋转角度等。


【3】
import Tile from 'ol/layer/Tile'
Tile翻译成中文就是“瓦片”。这项是必须的。
Tile用来承放所需的底图。


【4】
import OSM from 'ol/source/OSM'
OSM是ol提供的一个底图，可以作为练习使用。正式开发不能用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() // 图层数据源
          })
        ],
        view: new View({ // 地图视图
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [114.064839, 22.548857], // 深圳坐标
          minZoom:10, // 地图缩放最小级别
          zoom: 12 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }
  },
  mounted () {
    // 在此生命周期阶段，调用 initMap 完成地图渲染
    this.initMap();
  }
}
</script>

这里省略了所有样式，只解释逻辑部分。

HTML部分

需要有一个元素作为地图容器，通常习惯使用 div 元素。

并且该元素需要有一个id属性，通过id属性，js就能绑定这个元素。

JS 部分

JS 部分的使用其实不难，通过 Map 实例出一个地图，但这是还什么都没有。

通过 target 选中页面上的目标元素。

layers 是图层的意思。layers 是一个数组，其实和ps原理一样，可以通过多个图层来渲染出最终效果。这个例子里只有一个图层（即使只有一个图层也需要放在数组里），通过 Tile 拿到底图数据源 OSM。

之后通过view，把地图的投影坐标系、地图中心点、地图初始缩放级别、地图最小缩放级别都规定好。

所以在Map里，必须有target、layers、view这三项。一个基础的地图就出来里。

---

最后需要提醒：实际开发中千万不能使用OSM。

点击获取本例源码（可关注码云长期更新）