Vue集成openlayers

Posted 2021-02-10 gisblog

1.安装ol库

使用cnpm i ol -s命令安装

2.建一个olMap.vue文件夹

<template>
    <div class=‘olMap‘>
        <h2>{{this.name}}</h2>
        <div class=‘map‘  ref=‘rootmap‘></div>
    </div>
</template>

<script>
import ‘ol/ol.css‘
import { Map, View } from ‘ol‘
import mapconfig from ‘../../mapconfig‘

export default {
    name: ‘HomeMap‘,
    data () {
        return {
            name: ‘地图展示‘,
            map: null
        }
    },
    mounted () {
        var mapcontainer = this.$refs.rootmap
        this.map = new Map({
          target: mapcontainer,
          layers: mapconfig.streetmap(),
          view: new View({
            projection: ‘EPSG:4326‘,    
            center: [mapconfig.x, mapconfig.y], 
            zoom: mapconfig.zoom
          })
        })
    }
}

</script>

<style lang=‘stylus‘>
    .olMap
        width: 100%
        .map
            height: 100%
            .ol-attribution
                display: none
            .ol-zoom 
                display: none
</style>    

View Code

3.在首页home.vue中使用该olMap组件

<template>
    <div>
      <home-header></home-header>
         <home-swiper></home-swiper>
    <home-content></home-content>
         <home-map></home-map>
     </div>
</template>

<script>
import HomeHeader from ‘./components/Header‘
import HomeSwiper from ‘./components/Swiper‘
import HomeContent from ‘./components/Content‘
import HomeMap from ‘./components/olMap‘

export default {
  name: ‘Home‘,
  components: {
    HomeHeader,
    HomeSwiper,
    HomeContent,
    HomeMap
  }
}
</script>

<style>
</style>

View Code

4.使用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 = 1         
//0表示部署的离线瓦片地图，1表示OSM,2表示使用Arcgis在线午夜蓝地图服务
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 = {
    x: 114.064839,     
    y: 22.548857,
    zoom: 15,          
    streetmap: streetmap
}

export default mapconfig

View Code

5.效果如下

 源码地址：https://gitee.com/newGlobe/vueLearn/tree/master/src/pages/