首页 / 浏览问题 / 云GIS / 问题详情
运行leaflet示例程序报错,地图加载出不来
3EXP 2022年04月21日

使用产品:iclient 10i

问题详细描述:从基于Vue快速搭建超图二维iClient开发环境_supermapsupport的博客-CSDN博客下载的Leaflet示例程序,尝试运行报错

[vue warn]: Error in mounted hook : "TypeError: Cannot read properties of undefined(reading 'tiledMapLayer')

问题重现步骤:

1.

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

<script>
import L from "leaflet";
import "@supermap/iclient-leaflet";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    mapInit() {
      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,
      });
      L.supermap.tiledMapLayer(url).addTo(map);
    },
  },
  mounted() {
    this.mapInit();
  },
};
</script>


<style scoped>
#map {
  margin: 0;
  overflow: hidden;
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

2 个回答

您好,根据您截图中的报错信息,可以判断是您项目中加载 SuperMap iClient For Leaflet 库没有成功的原因,建议您从一下位置检测:

  1. 在项目 node_modules 目录下检测 "@supermap" 目录是否存在;
  2. 检测 "@supermap" 目录下的 "iclient-common" 和 "iclient-leaflet" 内容是否完整;
  3. 检测 npm install 的时候是否存在异常,是否有部分包因为网络或其他原因导致下载失败;
  4. 建议移除已存在的 node_modules 目录,通过 cnpm install 重新下载运行环境,确保不会因为网络或其他原因影响导致下载的包不完整。

希望可以帮到您。

2,138EXP 2022年04月21日
您好,您遇到的这个问题的确是引入 SuperMap 包时出的异常,建议您参考该贴子的上述解决方案,确认node_modules中的 SuperMap for Leaflet 包是否完整;若已确认下载完整,则建议您删除当前项目的编译输出目录后重新编译看看;若还是存在该问题,建议您将您的项目结构以及引入 SuperMap for Leaflet 的代码和使用 SuperMap for Leaflet 扩展的代码截图贴上来,以便更好的分析造成该问题的原因以及为您提供解决方案。
vue3,nodejs16+,是可以使用的吗,L上是没有supermap的,和上面一样的问题
您好,建议您将您的示例项目通过邮件(liuchengxian@supermap.com)发给我,我运行看看无法识别supermap模块的原因。
我也有这个问题,问题解决了吗
我解决了,单独引入包

import {

  TiledMapLayer,

  TiandituTileLayer,

  TileVectorLayer,

  MapService,

  crsFromMapJSON,

} from '@supermap/iclient-leaflet',并且leaflet 要在main.js 引入,supermap leaflet 在组件引入
只需要npm iclient-leaflet就行,里面附带有leaflet,不需要npm leaflet。兵器在卸载leaflet时候不要直接只卸载leaflet,把leaflet和iclient-leaflet都uninstall之后,再只npm iclient-leaflet,我的就可以使用了,可以看看这样是否也可以。
5EXP 2022年11月01日
...