vue项目加载离线地图

第一步：通过工具下载瓦片地图的图片

使用地图下载器下载瓦片地图

地图下载器

第二步：使用依赖 ol - npm 

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

 关于：离线地图点位标注：

1.创建map.vue页面

<template>
  <div class="openlayer">
     <div id="map" ref="rootmap">
        <div
        v-for="(item, index) in mapMarkData"
        :key="index"
      >
        <MapIconMark
          :position="item"
          :icon="item.img"
          :key="index"
        ></MapIconMark>
      </div>
     <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,
       mapMarkData: [
          {
            lng:118.727169,
            lat:31.997967,
            img:'图片路径',
          },
           {
            lng:118.727169,
            lat:31.997967,
            img:'图片路径',
          }
       ], 
    }
  },
  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>

2.创建MapiconMark.vue页面

<script>
// 点标注组件
import { Vector as SourceVec, Cluster } from "ol/source";
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Style, Icon, Stroke, Fill, Text } from "ol/style";
import { Vector as LayerVec } from "ol/layer";
export default {
  name: "MapIcon",
  render() {
    return this.$parent.preventChildrenRender;
  },
  props: {
    position: { type: Object },
    elementName: { type: String },
    className: { type: String },
    label: { type: String },
    icon: { type: String },
    zIndex: { type: Number },
  },
  data() {
    return {
      iconLayer: null,
    };
  },
  watch: {
    position: {
      handler(newVal, oldVal) {
        this.MapIconMark();
      },
      deep: true,
    },
    elementName: {
      handler(newVal, oldVal) {
        this.MapIconMark();
      },
      deep: true,
    },
    className: {
      handler(newVal, oldVal) {
        this.MapIconMark();
      },
      deep: true,
    },
    label: {
      handler(newVal, oldVal) {
        this.MapIconMark();
      },
      deep: true,
    },
    icon: {
      handler(newVal, oldVal) {
        this.MapIconMark();
      },
      deep: true,
    },
    zIndex: {
      handler() {
        this.MapIconMark();
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.MapIconMark();
    });
  },
  methods: {
    // 单个标注
    MapIconMark() {
      console.log(this.position);
      const _that = this;
      if (_that.iconLayer) {
        _that.iconLayer.getSource().clear();
      }
      // 创建矢量容器
      const vectorSource = new SourceVec({});
      //创建图标特性
      const iconFeature = new Feature({
        type: "icon",
        name: _that.elementName || "el-mapIconMark",
        geometry: new Point([this.position.lng, this.position.lat]),
      });
      // 图标特性添加到矢量容器
      vectorSource.addFeature(iconFeature);
      //创建矢量层
      _that.iconLayer = new LayerVec({
        className: _that.className || "map-icon-mark",
        source: vectorSource,
        zIndex: _that.zIndex || 800,
        //创建图标样式
        style: new Style({
          image: new Icon({
            src: _that.icon || null,
            scale: 0.05,
            // size: [50, 50],
          }),
          // 文本样式
          text: new Text({
            text: _that.label || null,
            fill: new Fill({
              color: "#fff",
            }),
            font: "14px Microsoft YaHei",
            offsetX: 0,
            offsetY: 30,
            padding: [2, 10, 0, 10],
            // 文本填充
            backgroundFill: new Fill({
              color: "rgba(0,0,0,0.5)",
            }),
          }),
        }),
      });
      _that.$parent.$data.mapData.addLayer(_that.iconLayer);
    },
    clickHandle() {
      this.$emit("clickHandle");
    },
    mouseHandle() {
      this.$emit("mouseHandle");
    },
  },
};
</script>

本文转载自 vue加载离线地图 - 漫漫码农路  如有侵权，请联系我删除