Front-end: visualización de mapas basada en Vue, Openlayer, compatible con OSM, Gaode

Instalación de componentes

cnpm i ol -S 

código vue

<template>
  <div id="map" ref="rootmap"></div>
</template>

<script>
import 'ol/ol.css'
import {
    
     Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
export default {
    
    
  name: 'ol',
  data () {
    
    
    return {
    
    
      message: 'ol-test',
      map: null
    }
  },
  mounted () {
    
    
    var mapcontainer = this.$refs.rootmap
    this.map = new Map({
    
    
      target: 'map',
      layers: [
        new TileLayer({
    
    
          // 显示osm
          // source: new OSM()

          // 显示高德
          source: new XYZ({
    
    
            visible: true,
            url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8',
          })
        })
      ],
      view: new View({
    
    
        projection: 'EPSG:4326', // 使用这个坐标系
        center: [114.064839, 22.548857], // 深圳
        zoom: 1
      })
    })
  },
  methods: {
    
    }
}
</script>

<style scoped>
#map {
    
    
  height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
    
    
  display: none;
}
</style>

anexo