vue加载离线地图

2022-06-08 14:35:12 阅读：215 来源： 互联网

标签：map vue const maplayer mapconfig 离线 ol new 加载

一.通过工具下载瓦片地图的图片
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

标签：map,vue,const,maplayer,mapconfig,离线,ol,new,加载
来源： https://www.cnblogs.com/itcjh/p/16355388.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue加载离线地图