Use the latest vue-cli3.x

1.Install vue-cli3.0.1: https://cli.vuejs.org/guide/

Cnpm install-g @ vue/cli

Vue-V View version

2.Create a new project vue create vue-openlayers, and select the default template

3.Run

Cd vue-openlayers
Npm run serve

4.Open the project with vscode, open the terminal, and install openlayers Openlayers official website: http://openlayers.org

Cnpm I-S ol

Delete HelloWorld.vue

Create a new olmap.vue component (you can install vetur and vue vscode snippets plugins under the vscode editor to facilitate code hints and write vue code-vbase commands)

components/olmap.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";
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    var mapcontainer = this.$refs.rootmap;
    this.map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //use this coordinate system
        center: [114.064839,22.548857],  //Shenzhen
        zoom: 12
      })
    });
  }
};
</script>

App.vue

<template>
  <div id="app">
    <olmap />
  </div>
</template>

<script>
import olmap from './components/olmap.vue'

export default {
  name: 'app',
  components: {
    olmap
  }
}
</script>

<style>
*{padding:0; margin:0;}
html,body{
  height: 100%;
}
#app {
  height: 100%;
}
</style>

5.Run npm run serve

6.Put some information into the configuration file, create a new config folder in the src directory, and build mapconfig.js src/config/mapconfig.js

Import TileLayer from "ol/layer/Tile"
Import TileArcGISRest from 'ol/source/TileArcGISRest'
Import OSM from "ol/source/OSM"
Import XYZ from 'ol/source/XYZ'

Let maptype=2 / / 0 represents the deployed offline tile map, 1 indicates OSM,2 indicates the use of the Arcgis online midnight blue map service

Var streetmap=function () {
    Var maplayer=null
    Switch (maptype) {
        Case 0:
            Maplayer=new TileLayer ({
                Source: new XYZ ({
                    Url:' http://127.0.0.1:7080/streetmap/shenzhen/{z}/{x}/{y}.jpg'
                })
            })
        Break
        Case 1:
            Maplayer=new TileLayer ({
                Source: new OSM ()
            })
        Break
        Case 2:
            Maplayer=new TileLayer ({
                Source:new TileArcGISRest ({
                    Url:' https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
                })
            })
        Break
    }
    Return [maplayer]
}

Var mapconfig= {
    XRV 114.064839, / / longitude and latitude of the center point
    Y:22.548857
    Zoom:15, / / Map Zoom level
    Streetmap:streetmap
}

Export default mapconfig

src/components/olmap.vue make corresponding changes

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

    </div>
</template>

<script>
Import "ol/ol.css"
Import {Map, View} from "ol"
Import mapconfig from'.. / config/mapconfig'
Export default {
  Data () {
    Return {
      Map: null
    }
  }
  Mounted () {
    Var mapcontainer = this.$refs.rootmap
    This.map = new Map ({
      Target: mapcontainer
      Layers: mapconfig.streetmap ()
      View: new View ({
        Projection: "EPSG:4326", / / use this coordinate system
        Center: [mapconfig.x,mapconfig.y], / / Shenzhen
        Zoom: mapconfig.zoom
      })
    });
  }
}
</script>

<style>
#map{height:100%;} 
/ * hide some native elements of ol * /
. ol-attribution,.ol-zoom {display: none;}

</style>