vue+openlayers 加载离线地图demo

第一步

• 下载地图瓦片下载器

  
  
  全能地图下载器.png

第二步

vue项目安装依赖 openlayers

npm install ol 

第三步

创建openlayersvue页面

<template>
  <div class="openlayer">
    <div id="map" ref="openlayerMap"></div>
  </div>
</template>
<script>
import { Map, View } from "ol";
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import "ol/ol.css";
export default {
  data(){
    return {
       mapData: null, 
       mapCenter: [120.165264,33.34847], // 地图居中显示经纬度
       mapZoom: 11, // 默认缩放比例
       // 限制地图缩放最大级别为14，最小级别为10
       minZoom: 10,
       maxZoom: 13
    }
  },
  mounted(){
    this.initMap()   // 执行地图初始化
  },
  methods:{
    initMap(){
      const mapContainer = this.$refs.openlayerMap; 
      // 加载瓦片地图
      const tileMap = new TileLayer({
          source: new XYZ({
              url: 'static/tiles/{z}/{x}/{y}.png' //本地瓦片地图的图片路径
          })
      })

      this.mapData = new Map({
        layers: [tileMap],             // 直接在配置上加载
        target: mapContainer,          // 地图容器
        view: new View({
          projection: "EPSG:4326", // 坐标系
          center: this.mapCenter,  // 地图中心点
          zoom: this.mapZoom,      // 缩放
          minZoom: this.minZoom,   // 缩放最小级别 10
          maxZoom: this.maxZoom,   // 缩放最大级别 13
        }),
      });

      // 方法手动添加一个使用离线瓦片地图的层
      // const maplayer = new TileLayer({
      //   source: new XYZ({
      //         url: 'static/tiles/{z}/{x}/{y}.png' //本地瓦片地图的图片路径
      //     })
      // })
      // // 将图层添加到地图
      // this.mapData.addLayer(maplayer)

       // 添加鼠标点击事件
      this.mapData.on("click", this.mapClick);
      // 添加鼠标经过事件
      this.mapData.on("pointermove", this.mapPointerMove);
    },
    // 鼠标点击地图事件  
     mapClick(evt) {
      console.log(evt,'鼠标点击事件')
     },
    //鼠标划过事件
     mapPointerMove(evt) {
      console.log(evt,'鼠标划过事件')
     }
  }
}
</script>
<style>
.openlayer {
  height: 100vh;
  width: 100vw;
}
#map {
  height: 100%;
  width: 100vw;
}
</style>

参考文献

OpenLayers 3 介绍
openlayers官网