首页 / 浏览问题 / WebGIS / 问题详情
最新vue3 + vite构建iclient-leaflet环境失败
2EXP 2023年06月21日

使用产品及版本信息:

//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语法按需引用,导入包失败:

2 个回答

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

希望可以帮助到您!
1,402EXP 2023年06月21日

不再因为导入而报错,貌似在调用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",版本之后,运行报错

错误错误文本

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

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

安装这个版本就可以了

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

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

加载iserver服务时使用

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

8EXP 2023年06月27日

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

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

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

  define: {

    'process.env': {},

  },
...