Vue+Proj4Leaflet实现地图瓦片(Nginx代理本地地图瓦片为网络url)加载并实现CRS投影转换(附资源下载)

<template>
  <div id="map" style="height: 600px; width: 800px;"></div>
</template>
 
<script>
import L from 'leaflet';
import 'leaflet-crs-wkt';
import 'leaflet/dist/leaflet.css';
 
export default {
  name: 'MapComponent',
  data() {
    return {
      map: null,
      wktCrs: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const wkt = 'PROJCRS["WGS_1984_Web_Mercator_Auxiliary_Sphere",\n' +
                  '    BASEGEOGCS["WGS_1984",\n' +
                  '        DATUM["WGS_1984",\n' +
                  '            SPHEROID["WGS_1984",6378137,298.257223563]],\n' +
                  '    PRIMEM["Greenwich",0],\n' +
                  '    UNIT["degree",0.0174532925199433],\n' +
                  '    AXIS["E",EAST],\n' +
                  '    AXIS["N",NORTH],\n' +
                  '    AUTHORITY["EPSG",3857]]';
 
      this.wktCrs = L.wktCrs(wkt);
 
      this.map = L.map('map', {
        crs: this.wktCrs,
        center: [0, 0],
        zoom: 2,
        minZoom: 2,
        maxZoom: 18
      });
 
      const baseUrl = 'http://localhost:8080/arcgis/rest/services/NGS_Imagery_World/MapServer/tile/{z}/{y}/{x}';
      L.tileLayer(baseUrl, {
        minZoom: 2,
        maxZoom: 18,
        attribution: 'Imagery from NGS'
      }).addTo(this.map);
 
      this.map.setView([34.052235, -117.192611], 10);
    }
  }
};
</script>

在这个代码实例中，我们首先导入了Vue组件所需的库，并在模板中定义了地图容器。在mounted生命周期钩子中，我们初始化了Leaflet地图，并使用了自定义的CRS (WKT形式)。然后，我们使用了一个本地代理服务器作为瓦片图层的来源，并设置了地图的中心点和缩放级别。最后，我们设置了地图视图。这个例子展示了如何在Vue中结合Proj4和Leaflet来加载和显示地图瓦片，并处理不同的坐标参考系统。