Question

使用产品: "@supermap/iclient-leaflet": "^11.1.1", "leaflet": "^1.9.4", "leaflet-draw": "^1.0.4", "vue": "^2.6.14" 操作系统 mac M2， 浏览器 Google

问题详细描述： 我在使用咱们地图的时候， 我地图下面还有一个组件， 上下排列， 会出现 纵向滚动条。 地图加载都是按照官方方法加载的。 然后当我滚动条滚动到下面的时候， 再点击一下地图， 滚动条又自动滚动上去了， 我业务上后面地图上会有点和线， 这种自动滚动， 捕获的点或者线，捕获的不是我鼠标刚点击到的，是滚动条又滚上去以后点到的，就很麻烦。

问题重现步骤： 滚动条拖动到底部， 点击地图， 滚动条自动滚动。 

<template>
  <div class="map-container">
    <div id="leaflet-map" style="height: 80%; width: 100%"></div>
    <div class="table">测试</div>
  </div>
</template>

<script>
import "leaflet-draw";
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    window.map = this.map = L.map(document.getElementById("leaflet-map"), {
      crs: L.CRS.EPSG4326,
      center: [0, 0],
      maxZoom: 18,
      minZoom: 1,
      zoom: 1,
      zoomControl: false,
      attributionControl: false,
      editable: true,
    });

    L.supermap
      .tiledMapLayer(
        "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World"
      )
      .addTo(this.map);
    let editableLayers = new L.FeatureGroup();
    let control = new L.Control.Draw({
      position: "topleft",
      draw: {
        polyline: {},
        polygon: {},
        circle: false,
        rectangle: false,
        marker: false,
        remove: false,
      },
    });

    this.map.addControl(control);
    editableLayers.addTo(this.map);
    this.map.on(L.Draw.Event.CREATED, function (e) {
      var type = e.layerType,
        layer = e.layer;
      let geo = layer.toGeoJSON();
      console.log(geo);
      let coordinate = geo.geometry.coordinates;
      editableLayers.addLayer(layer);
    });
  },
};
</script>
<style>
.map-container {
  height: 100%;
  width: 100%;
  overflow: scroll
}
.table{
  height: 500px;
  width: 100%;
  border: 1px solid #333
}
</style>

 

Answer 1

您好， 这个问题可能是因为滚动条滚动时，地图容器的高度发生了变化，导致 Leaflet 地图重新渲染，从而导致捕获的点或线不是你鼠标刚点击到的。

Comments

我 DOM 上看了一下 ， 滚动条滚动的时候， 地图以及地图所在容器高度是没有发生变化的。

---

可以添加一个事件监听器，当地图被点击时阻止默认的滚动行为。

 document.getElementById('map').addEventListener('click', function(event) {
        event.stopPropagation(); // 阻止事件冒泡
        event.preventDefault(); // 阻止默认行为
    });

---

这个方法试过了，不行

---

阻止默认事件、样式的设置和修改等这些方法都试过了，都是不行， 我这个使用了 LMap 这个组件， 我如果不使用这个组件， 在另一个项目， 直接在 div 上面加载地图的话不会出现这个情况， 应该是 LMap 这个组件内部的行为？