Question

使用产品及版本信息：

//package.json(部分）

"dependencies": {
"@supermap/iclient-leaflet": "^11.1.0-beta",
"leaflet": "^1.9.4",
"pinia": "^2.1.3",
"vue": "^3.3.4"
},
"devDependencies": {
"@supermap/babel-plugin-import": "^0.0.1",
"@vitejs/plugin-vue": "^4.2.3",
"events": "^3.3.0",
"util": "^0.12.4",
"vite": "^4.3.9"
}

按照supermap官网手册添加.babelrc配置，但未说明vite.config.js中如何配置。

按照社区已有问答资料解决无效，参考博文“基于Vue快速搭建超图二维iClient开发环境”无效。

按es6语法按需引用，导入包失败：

Answer 1

您好！建议您暂时不使用最新的Beta版本。重新安装supermap/iclient-leaflet为11.0.1版本后使用，例如使用npm命令，npm uninstall  @supermap/iclient-leaflet 后， npm install @supermap/iclient-leaflet @11.0.1

希望可以帮助到您！

Comments

不再因为导入而报错，貌似在调用api时报错：

我的vue组件代码：

<script setup>
import L from 'leaflet';
import {TiledMapLayer} from '@supermap/iclient-leaflet';
import {onMounted} from "vue";

onMounted(()=>{
const url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
let map = L.map('mapView',{
crs:L.CRS.EPSG4326,
center:[0, 0],
maxZoom:18,
zoom:3
}
);
const layer = new TiledMapLayer(url)
layer.addTo(map)
})


</script>

<template>
<div id="mapView">

</div>
</template>

<style scoped>

</style>

该组件已成功挂载，报错信息如下：

---

参考这篇博客方案试试 https://blog.csdn.net/qq_43334519/article/details/128239500

对于Vite构建的Vue环境使用iclient-leaflet 可以参考一下这篇博客排查一下搭建过程，https://blog.csdn.net/supermapsupport/article/details/130778845

---

您好，参考博客排查之后，仍然存在Cannot read properties of undefined (reading 'lat')的问题，同时博客中提到的无需单独安装leaflet显然存在问题，在官方文档或是其他博客中均直接import L from 'leaflet',这个包与@supermap内的leaflet依赖并不能通用。iclient-leaflet官方文档看起来有些版本管理混乱，一些api已弃用但文档中并未标识，同时对于es6的支持在文档中看起来很弱。

---

您好，尝试将leaflet降级至与@supermap中的leaflet依赖一致以后暂时解决了问题。

---

import L from 'leaflet' 的这个Leaflet是 iclient-leaflet 里面的，不是直接install leaflet的原生的库；直接使用原生的会因为版本冲突导致问题，iClient-leaflet最高支持的leaflet版本到v1.7.1；install iclient-leaflet后不需要再install leaflet使用

---

import L from 'leaflet'我这边为什么无法直接访问到iclient-leaflet中的依赖？需要安装一个与依赖等版本的leaflet才能这样引入，是否需要在vite.config.js中做额外配置？我尝试直接import '@supermap/iclient-leaflet/node_modules/leaflet'，显示超过访问深度。

---

import '@supermap/iclient-leaflet/node_modules/leaflet' 这样引入是不行的，install @supermap/iclient-leaflet 后在node_modules中就会有leaflet依赖， import L from 'leaflet' 引用的就是这个，所以不需要再install leaflet。你这里无法访问可能是一开始就install 了 leaflet，建议uninstall leaflet 再更新一下依赖。或者直接重新搭建一个项目使用

---

引入这个"@supermap/iclient-leaflet": "^11.0.1",版本之后，运行报错

Answer 2

这个问题当时折磨我一天，同样的环境，不要安装最新版本

"@supermap/iclient-leaflet": "^11.0.1",

安装这个版本就可以了

加载地图和引入leaflet的时候使用

import { TiledMapLayer } from '@supermap/iclient-leaflet'
import L from 'leaflet'

加载iserver服务时使用

new TiledMapLayer(url).addTo(map.value)

Comments

你好请问下，打包后运行有没有报错？开发环境都没有问题，打包后运行会报错

---

看下是不是vite.config.js里面没有配置这个导致的(猜测)

//这里为了supermap编译添加了配置

  define: {

    'process.env': {},

  },