Question

在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>

Answer 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)

希望能够帮助到您！