解决使用leaflet里L.supermap为underfind 的报错信息

报错信息为：Cannot read properties of undefined (reading 'TiledMapLayer'

由于我要加载WMTS瓦片服务 加载的api为 new L.supermap.WMTSLayer（url,options）但是加载时一直报错 Cannot read properties of undefined (reading 'TiledMapLayer'。

通过打印，发现承载于leaflet的L  里面根本就没有supermap这个属性 找了好久的文档 都找不到方法 最后终于找到原因 写下来造福人民！

由于引用了 @supermap/iclient-leaflet 和  leaflet 正常直接install都会直接下载最新版本 最新版本由于改版 L更轻量了 里面没有supermap属性 不可以直接加载wmts格式

想要加载wmts 需要把下载的最新版卸载

npm uninstall @supermap/iclient-leaflet

npm uninstall leaflet

下载后下载@supermap/iclient-leaflet v10以下版本 建议v10我用的10.1.2

leaflet 降版本为^1.7.1

npm install @supermap/iclient-leaflet@10.1.2 --save

npm install leaflet@1.7.1 --save

 然后npm run dev 重新加载 到页面里打印L就会出现啦

 

下面是我加载wmts的代码啦

<template>
  <div id="app">
    <div id="map" />
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.leafletMap();
  },
  methods: {
    leafletMap() {
       console.log(L)
      //设置地图相关初始配置
      var map = L.map("map", {
        center: [0,0], // 设置地图中心点
        zoom: 1, //设置当前地图显示的缩放等级
        crs: L.CRS.EPSG4326, //设置坐标系4326
      });

      // //设置地图可以进行0-22的等级缩放
      var matrixIds = [];
      for (var i = 0; i < 22; ++i) {
      	matrixIds[i] = {
      		identifier: "" + i,
      		topLeftCorner: new L.LatLng(90, -180)
      	};
      }

      // //设置地图wmts瓦片地图加载配置
      var urlMap =
        "http://localhost:8090/iserver/services/map-china400/wmts100"; //瓦片地图地址

      var wmtsOptionsMap = {
        layer: "China",
        style: "default",
        tilematrixSet: "Custom_China",
        format: "image/png",
        requestEncoding: "REST",
		matrixIds:matrixIds,
      };
      L.supermap.wmtsLayer(urlMap, wmtsOptionsMap).addTo(map);
    },
  },
};
</script>
<style>
#map {
  width: 100%;
  height: 100vh;
}
</style>

加油加油加油！