openPlayer工具加载离线瓦片地图

openPlayer工具加载离线瓦片地图

背景： 因为公司项目需要在内网上运行，所以之前加载的高德地图就无法使用。因此需要替换成瓦片加载

1、瓦片资源结构如下

注意

• 瓦片资源文件夹，需要发给后端，进行nginx代理
• 瓦片文件夹0-11这几个文件夹，0代表当前瓦片可加载的最低层级，11代表当前瓦片可加载的最高层级，超过最低或者最高层级，都会加载瓦片失败。打印日志为png：404

2、代理的瓦片路径

代理的瓦片路径是静态的，需要挂载到window下

window.customizeConfig = {
	mapUrl : `http://192.168.102.54/tiles/{z}/{x}/{y}.png`,
}

3、OL加载瓦片规则

<template>
    <div id="map"></div>
</template>
<script>
//导入基本模块
import 'ol/ol.css';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Map, View, Feature } from 'ol';
import { fromLonLat, toLonLat, transform } from 'ol/proj';
import { Fill, Style, Stroke } from 'ol/style';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { Polygon, Circle } from 'ol/geom';
import { getVectorContext } from 'ol/render';
import Overlay from "ol/Overlay";
export default {
    data() {
        return {
            map: null,
            tileLayer: null,   // 离线瓦片的图层
            tileSource: null,   // 离线瓦片资源
            vector: null,
        };
    },
    methods: {
        // 初始化地图
        initMap() {
            // 瓦片图层
            this.tileLayer = new TileLayer({
                source: new XYZ({
                    // 瓦片地址
                    url: window.customizeConfig.mapUrl,
                }),
            });
            this.map = new Map({
                layers: [this.tileLayer],
                view: new View({
                    // 设置中心点 
                    // transform：将经纬度 转换为 米单位（必须的，否则加载不出来覆盖物）
                    center: transform([113.645358, 34.750684], 'EPSG:4326', 'EPSG:3857'),
                    // 这两个对应的是切片的文件夹
                    minZoom: 0, // 最小缩放级别  
                    maxZoom: 11, // 最大缩放级别
                    // 首先会加载当前层级
                    // nginx代理的瓦片文件夹数字名字代表 瓦片可展示的地图层级
                    zoom: 9
                }),
                target: "map", // 将地图注入到 dom 元素中，此处写 dom id
            });
        },
    },
    // mounted生命周期下 进行初始化
    mounted() {
        this.initMap();
    },
};
</script>
  
<style scoped>
#map {
    width: 100%;
    height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
    display: none;
}
#map>>>canvas {
    width: 100%;
}
</style>

4、openPlayer 官网

OL官网