使用openlayers加载OSM地图

一，安装ol

cnpm i ol -S

二，在components文件夹下面新建olmap.vue

<template>
    <div id="map"></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 {
        
    };
  },
  mounted() {
    new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [104.704968,31.540962],  //西南科技大学
        zoom: 15
      })
    });
  }
};
</script>

<style>
    #map{height:100%;}
</style>

修改APP.vue如下

<template>
  <div id="app">
    <olmap/>
    <router-view/>
  </div>
</template>

<script>
import olmap from '@/components/olmap.vue'
export default {
  name: 'App',
  components:{
    olmap
  }
}
</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */

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

目录结构：

三，运行结果

注意：有时候加载出来的地图只显示一半，此时只需要将APP.vue中的app样式中的text-align属性设为‘left’即可