报错信息为: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>
加油加油加油!