Vue.js+OpenLayers 1、初始化地图


一、安装 openlayer 依赖

1
2
3
npm install ol --save
或
yarn add ol --save

二、添加地图功能页面

功能页面中添加 OpenLayers 需要的所有依赖，以及地图交互方法的封装，这里使用 OSM 做地图测试。可以通过地图的单击事件查看地图当前的缩放范围和点的坐标，在地图初始化时设置。

InitMap.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
  <div></div>
</template>
<script>
import "ol/ol.css"
import Map from "ol/Map"
import View from "ol/View"
import TileLayer from "ol/layer/Tile"
import OSM from "ol/source/OSM"
import { defaults as defaultControls } from 'ol/control'
import ZoomSlider from 'ol/control/ZoomSlider' // 缩放控制

export default {
  name: 'InitMap',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 地图单击事件
    singleClickFun() {
      this.map.on('singleclick', (event) => {
        console.log(event)
      })
    },

    // 初始化地图
    initMap() {
      let view = new View({
        projection: "EPSG:4326",
        center: [117.36599976909781, 39.1470299097626],
        zoom: 12,
        extent: [
          117.09722430138682,
          38.988772821718655,
          117.72502101428843,
          39.30561397526118
        ]
      })

      let layer = new TileLayer({
        source: new OSM(),
        visible: true,
        zIndex: 9,
        name: OSM
      })

      this.map = new Map({
        layers: [],
        target: "map",
        view: view,
        controls: defaultControls().extend([new ZoomSlider()]) // 缩放控制
      })

      this.map.addLayer(layer)

      this.singleClickFun() // 地图单击事件

    }

  }
}
</script>

<style lang="scss" scoped>
</style>

三、添加地图内容页面

MapMain.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
  <div class="map_main">
    <!-- 地图 -->
    <div id="map" class="map">
      <init-map ref="InitMap">
      </init-map>
    </div>
    <!-- 地图 E -->
  </div>
</template>

<script>
import InitMap from '@/components/map/InitMap'
export default {
  name: 'MapMain',
  components: {
    InitMap
  },
  data() {
    return {}
  },
  mounted() { },
  methods: {}
}

</script>

<style lang="scss" scoped>
.map {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
}
</style>

这种方式添加 ol 可以方便使用地图功能页面中的方法，可通过 this.$refs.InitMap.方法名() 的方式去使用。

四、添加地图页面

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="app">
    <map-main></map-main>
  </div>
</template>

<script>
import MapMain from '@/views/MapMain'
export default {
  name: 'App',
  components: {
    MapMain
  }
}
</script>