vue+Tomcat虚拟目录加载openlayers离线地图

注意：加载的离线地图，使用了Tomcat的虚拟目录，其他方式暂时加载不出来地图瓦片(切片规则无法对上)

以淄博市的离线地图瓦片为例

地图离线目录结构

拿到目录之后，配置Tomcat的虚拟目录（虚拟目录有多种配置方式，我这边方式供参考，该方式可以无需重启Tomcat就可以生效）

在本机Tomcat目录下的conf/Catalina/localhost目录下，创建一个xml文件，里面添加如下语句

<Context docBase="C:\worktemp\map"/>

其中c:\worktemp\map对应的是地图瓦片的物理路径，如下图

另外，特别注意，假如使用的后台IDE是idea，需要在idea里面做如下设置

启动后台之后的访问虚拟目录的效果图

前台需要执行一次 npm install ol，安装ol下对应的API

前台Vue代码

<template>
  <div class="mapMoniter" style="width: 100%;height: 100%;">
    <div id="map" class="map"/>
  </div>
</template>
<script >
// 初始化地图相关
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import OlMap from 'ol/Map'
import OlView from 'ol/View'
import { get as getProjection } from 'ol/proj'
export default{
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
    this.initMap()
  },
  methods: {
  initMap() {
      var targetMap = document.getElementById('map')
      var offlineMapLayer = new TileLayer({
        source: new XYZ({
          url: BASE_API.SERVER_IP + 'map/{z}/{x}/{y}.png',// 加载虚拟目录下的图片
          // 这块的BASE_API.SERVER_IP是我这边配置的静态路径ip，值如下：http://192.168.4.61:8080/
          wrapX: true
        })
      })
      var projection = getProjection('EPSG:4326')
      var map = new OlMap({
        layers: [offlineMapLayer],
        view: new OlView({
          center: [118.10131072998047, 36.819305419921875],// 地图中心
          projection: projection, // 对应地图的切片规则
          zoom: 13,// 地图初始化渲染等级
          minZoom: 9, // 地图最小缩放等级
          maxZoom: 16,// 地图最大缩放等级
          zoomControl: true// 地图是否可被缩放控制
        }),
        target: targetMap.id
      })
    }
  }
}

</script>
<style scoped>
.map
{
  height: 100%;
  width: 100%;
}
</style>

效果图

注意一点的是，Vue里面使用openlayers，必须声明对应的所有类，才可以调用对应的api，否则即便是打debugger，在控制台很明显看到有存在对应的API也会报undefined,对比说明下，比如TileLayer这个API，在原生js中，只需要ol.Tile.Layer即可调用，但是vue不可以，你声明了Ol之后，通过ol.tile.layer调用，会直接报tileundefined，官方文档也给了对应的import方式，可以参考