美文网首页
Vue中使用openlayers

Vue中使用openlayers

作者: 莫soso | 来源:发表于2019-08-27 17:03 被阅读0次

安装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

}


效果如下图

相关文章

网友评论

      本文标题:Vue中使用openlayers

      本文链接:https://www.haomeiwen.com/subject/igveectx.html