首页 / 浏览问题 / / 问题详情
运行leaflet示例程序报错,地图加载出不来
4月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>

1个回答

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

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

希望可以帮到您。

刘程贤  (778分)  学富五车
4月21

已检查1、2项

3、4项:cnpm install正常

结果还是报一样的错

您好,添加了您的QQ,麻烦您有空的时候通过一下
我也遇到这个问题,我把npm , nodejs 版本升到最高,移动端地图项目是正常的,PC端的就不正常了,请问下是怎么解决的
同一个问题请问是怎么解决的
您好,先清空当前的项目,重新下载一个示例项目,然后通过 cnpm install 部署环境。
nodejs建议使用长期支持版(LTS),最新版对应的npm版本可以存在差异,安装的包可能存在版本差异。
您好,我想问怎么通过cnpm install 部署环境呢,我也出现这样问题

建议您尝试下载 基于SuperMapiClientForLeaflet前端库+Vue2x实现的简单网页-Javascript文档类资源-CSDN文库 这个项目,然后按照该资源描述的步骤操作。

...