Vue结合Openlayers示例

此爱如少年

已于 2022-10-12 16:42:47 修改

阅读量8.8k

点赞数 4

分类专栏： openlayers开发文章标签： openlayers5 vue 地图

于 2019-10-19 11:13:58 首次发布

本文链接：https://blog.csdn.net/u012413551/article/details/102635300

版权

openlayers开发专栏收录该内容

16 篇文章 9 订阅

订阅专栏

文章目录

1、简单示例
2、地图配置
3、npm 构建
- 3.1 安装openlayers
- 3.2 在mapView组建中导入相关模块

1、简单示例

先看下以引入< JavaScript >的方式的使用方法

1.1创建一个mapView组件

mapView.js

export default {
  template: '<div id="map"></div>',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap(){
      let baseLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
        })
      })
  
      let view = new ol.View({
        projection: 'EPSG:4326',
        zoom: 4,
        center: [114, 32]
      })
  
      this.map = new ol.Map({
        target: 'map',
        layers: [baseLayer],
        view: this.view
      })
    }
  }
}

1.2 创建一个Vue实例，并注册mapView组件

import mapView from './components/mapView.js'

const app = new Vue({
  components: {mapView}
}).$mount('#app')

1.3在页面中应用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue结合openlayers</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    head, body, .mapview{
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="app">
    <map-view class="mapview"></map-view>
  </div>
  <script src="./main.js" type="module"></script>
</body>
</html>

2、地图配置

通常，为了灵活使用地图起见，我们把地图的一些常用设置，提取出来单独配置。比如：地图的view（视图）配置，假设我们需要在地图初始化时设置地图的中心点在北京，我们写了一个配置文件
mapConfig.js

const mapConfig = {
  viewOption: {
    projection: 'EPSG:4326',
    zoom: 12,
    center: [116.405,39.9228], //北京中心点坐标
    maxZoom: 16,
    minZoom: 4
  }
}

export default mapConfig

而后，修改mapView，让它的**initMap()**方法可以接收view参数配置

export default {
  template: '<div id="map"></div>',
  data() {
    return {
      map: null
    }
  },
  // mounted() {
  //   this.initMap()
  // },
  methods: {
    initMap(options){
      let viewOptions = options.view ? options.view : {
        projection: 'EPSG:4326',
        zoom: 15,
        center: [108.944, 34.3615]
      }

      let baseLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
        })
      })
  
      let view = new ol.View(viewOptions)
  
      this.map = new ol.Map({
        target: 'map',
        layers: [baseLayer],
        view: this.view
      })
    }
  }
}

接着，修改main.js，把参数传递进去，
main.js

import mapView from './components/mapView.js'
import mapConfig from './config/mapConfig.js'

const app = new Vue({
  components: {mapView},
  mounted() {
    this.$refs['mapview'].initMap({
      view: mapConfig.viewOption
    })
  },
}).$mount('#app')

同时，html也做微调，给mapview标签加上ref属性，这样就可以通过Vue.$refs访问到这个组建

<map-view class="mapview" ref="mapview"></map-view>

假设后续要把地图中心点调整到其它地方，只要修改mapConfig.js中的配置就可以了。

3、npm 构建

如果时通过npm 的方式来在Vue框架中使用Openlayers，方法与此大同小异。
假设你项目中已经安装了Vue，接下来

3.1 安装openlayers

npm install ol

3.2 在mapView组建中导入相关模块

mapView.js

import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'

export default {
  template: '<div id="map"></div>',
  data() {
    return {
      map: null
    }
  },
  // mounted() {
  //   this.initMap()
  // },
  methods: {
    initMap(options){
      let viewOptions = options.view ? options.view : {
        projection: 'EPSG:4326',
        zoom: 15,
        center: [108.944, 34.3615]
      }

      let baseLayer = new TileLayer({
        source: new XYZ({
          url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
        })
      })
  
      let view = new View(viewOptions)
  
      this.map = new Map({
        target: 'map',
        layers: [baseLayer],
        view: view
      })
    }
  }
}