首页 / 浏览问题 / WebGIS / 问题详情
vue+leaflet 卷帘功能报错
11EXP 2023年09月13日

在vue环境下,使用iclient-leaflet时,在添加了sidebyside控件之后,控制台报错:TypeError: leaflet__WEBPACK_IMPORTED_MODULE_0___default(...).control.sideBySide is not a function,使用的是iclient-leaflet的10.2.1版本,请问是什么原因呢

<template>
  <div
    id="map"
    style="position: absolute; left: 0px; right: 0px; width: 100%; height: 100%"
  ></div>
</template>

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

export default {
  name: "MapMain",
  props: {},
  watch: {
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    initmap() {
      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);
      var osmLayer = L.supermap
        .tiledMapLayer(
          "https://iserver.supermap.io/iserver/services/map-world/rest/maps/世界地图_Night",
          { noWrap: true }
        )
        .addTo(map);
      var stamenLayer = L.supermap
        .tiledMapLayer(
          "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World",
          { noWrap: true }
        )
        .addTo(map);
      L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
    },
  },
  mounted() {
    this.initmap();
  },
};
</script>

1个回答

您好,这个错误是因为Leaflet库中没有名为sideBySide的控件,可能是由于iclient-leaflet的版本问题引起的。在旧版本的 Leaflet中,sideBySide 方法可能不存在或不可用。

1、需要安装leaflet-side-by-side插件。您可以通过以下步骤安装它:

      ①在项目中安装leaflet-side-by-side插件:

    npm install leaflet-side-by-side

      ②在脚本部分导入leaflet-side-by-side插件:

    import 'leaflet-side-by-side';

      ③修改initmap方法中的代码:

    methods: { initmap() { // 省略其他代码 var sideBySide = L.control.sideBySide(stamenLayer, osmLayer);        sideBySide.addTo(map); }, },

2、可以去官网下载最新的iclient-leaflet,并替换掉你当前项目中的旧版本文件。下载地址为:下载 (supermap.io)

希望能够帮助到您!

735EXP 2023年09月14日
...