vue加载离线地图

一.通过工具下载瓦片地图的图片
1.91卫图助手 (企业版需要激活)

2.迈高图 (需要会员,没有会员限制下载数量并且有水印)

3.地图下载器 (免费挺好用的)

二.OpenLayers的使用
1.安装依赖 npm install ol
2.创建 OpenLayers 组件

<template>
  <div class="openlayer">
     <div id="map" ref="rootmap">
     <div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import mapconfig from "@/mapconfig";

export default {
  data(){
    return {
       mapData: null,
       mapCenter: [118.727169, 31.997967],
       mapZoom: 16,
    }
  },
  mounted(){
  },
  methods:{
    initMap(){
      const mapContainer = this.$refs.rootmap;
      const map = new Map({
        layers: mapconfig.streetmap(), //在mapconfig.js封装的
        // controls: [FullScreen, ScaleLine, Zoom],
        target: mapContainer,
        view: new View({
          projection: "EPSG:4326",
          center: this.mapCenter,
          zoom: this.mapZoom,
        }),
      });
       // 添加鼠标点击事件
      map.on("click", this.mapClick);
      // 添加鼠标经过事件
      map.on("pointermove", this.mapPointerMove);
      // 保存地图
      this.mapData = map;
    },
    // 鼠标点击地图事件  
     mapClick(evt) {}
    //鼠标划过事件
     mapPointerMove(evt) {}
  }
}
</script>
<style>
.openlayer {
  height: 100vh;
  width: 100vw;
}
#map {
  height: 100%;
  width: 100vw;
}
</style>

3.mapconfig.js

import TileLayer from 'ol/layer/Tile'
import {
    OSM,
    XYZ,
    TileArcGISRest
} from 'ol/source'
const maptype = 0
// 0 表示部署的离线瓦片地图，1表示OSM, 2表示使用Arcgis在线午夜蓝地图服务
const streetmap = function () {
    let maplayer = null
    switch (maptype) {
        case 0:
            maplayer = new TileLayer({
                source: new XYZ({
                    url: 'static/tiles/{z}/{y}/{x}.png' //本地瓦片地图的图片路径
                })
            })
            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]
}
const mapconfig = {
    streetmap: streetmap
}
export default mapconfig