Vue中使用openlayers

安装openlayers

网址：npm-ol

安装：npm install ol

引用

参考网址：简单的地图

代码如下

注：我使用了一个新的页面

1、在components文件下，新建一个新的map.vue文件

代码如下：

<template>

  <div>

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

    </div>

  </div>

</template>

<script>

  import Map from 'ol/Map.js'

  import '../../node_modules/ol/ol.css'

  import OSM from 'ol/source/OSM.js'

  import TileLayer from 'ol/layer/Tile';

  import {getLayers} from 'ol/Map.js'

  import View from 'ol/View.js'

  import {fromLonLat, toLonLat} from 'ol/proj.js'

  export default {

    name: "index",

    data() {

      return {

        map: null

      }

},

  mounted：

    mounted() {

     this.mapint()

},

    methods: {

mapint(){

    var map = this.$refs.map

     var layer = new TileLayer({     

          source: new OSM(),       

           wrapX:false      })     

     this.map = new Map({ 

        target: 'map',       

        layers:[layer],   

        view: new View({         

                center: fromLonLat([116, 39]),             

                 zoom: 5        })})

}

}

</script>

<style lang="scss" scoped>

  #map {

position:absolute;

    /*top:100px;*/

    bottom:0px;

    width:100%;

    height:100%;

  }

</style>

2、显示,在配置路由router.js文件中引入：

import map from '@/components/map'

在const routes中添加如下代码 ：

{

  path: '/',

  name: 'map',

  component: map

}

效果如下图