Question

vue3+SuperMap iClient for Leaflet按照官网流程安装并全局引入相关包，然后刚开始报“ Cannot read properties of undefined (reading 'tiledMapLayer')”，然后换成按需引入又报“Cannot read properties of undefined (reading 'lat')”错误。

<template>

  <div id="map"></div>

</template>

<script setup>

import { onMounted } from "vue";

import L from "leaflet";

import { TiledMapLayer } from "@supermap/iclient-leaflet";
 

function addMapA() {

  var url =

    "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";

  var map = L.map("map", {

    crs: L.CRS.EPSG4326,

    center: [0, 0],

    maxZoom: 18,

    zoom: 1,

  });

  var layer = new TiledMapLayer(url);

  layer.addTo(map);

}

onMounted(() => {

  addMapA();

});

</script>

Answer 1

您好，

http://ask.supermap.com/49774

您可以参考一下

http://iclient.supermap.io/web/introduction/leafletDevelop.html#Ready中ES6全模块引入的写法。

希望可以帮助到您。

Comments

您好，我看到您发的第一个提问了，但是尝试npm重装了也不行。也确实是按照咱们官网的流程操作的，官网说可以全模块引入，但是我试了不行，然后采用按需引入不报“TiledMapLayer”的错误了，但是又报lat的错误。我可以加一下您的联系QQ或者微信吗？

---

您好，我又重新npm uninsatll @supermap/iclient-leaflet，同时npm uninsatll leaflet（因为我最开始在网上看有人说需要安装leaflet，我就安装了）后重新再npm insatll @supermap/iclient-leaflet之后又好了。和http://ask.supermap.com/49774问题最后一个回复的朋友情况一样，重新安装几次iclient-leaflet可能就解决了。（我发现同样执行npm insatll @supermap/iclient-leaflet命令后安装的包里面文件好像不太一样，在@supermap/iclient-leaflet/node_modules路径下有时有leaflet依赖有时没有（我只关注到leaflet包，可能还有其他不同我没有注意到，也有可能只有这个区别），不知道是什么原因，最后一次安装我看里面没有leaflet依赖，但是能正常显示地图--个人理解仅供参考）

---

npm多次安装成功的话可能是网络情况哦，使用npm安装的话 leaflet本身不需要手动安装的，仅npm iclient for leaflet就可以。

---

可能是版本的问题。是安装npm install @supermap/iclient-leaflet过程中会自动下载leaflet。有可能是

iclient-leaflet和leaflet版本不适配，或者自动下载的leaflet版本太高。可以这样解决

import L from '@supermap/iclient-leaflet/node_modules/leaflet'。我是这样解决的从凌晨0点到凌晨2点，耗费两个小时才解决。vu2升级到vue3的痛

第二天

后面有点问题，然后我是安装的@supermap/iclient-leaflet/node_modules中leaflet版本 npm install leaflet@1.7.1，安装完成后@supermap/iclient-leaflet/node_modules中leaflet文件被移除，

import L from 'leaflet'

程序正常运行