如何为地图特定图层单独设置位置？解决GeoJSON图层受DomUtil影响问题

你当前的场景是：用以下代码给特定图层实现相对定位，代码会在每次地图视图更新时触发，但导致无需调整的GeoJSON/JSON图层出现定位异常。

你的定位代码：

const mapSize = map.getSize();
const globalPos = L.DomUtil.getPosition(map.getPane("mapPane"));
const topLeft = globalPos.multiplyBy(-1);
const bottomRight = topLeft.add(mapSize);
L.DomUtil.setPosition(map.getPane(this.options.pane), topLeft);

这里提供两个可行的解决思路：

思路一：仅给特定图层的专属Pane设置位置 #

不要直接修改通用Pane的位置，给需要特殊定位的图层单独创建一个专属Pane，让GeoJSON图层使用默认Pane，从根源隔离两者的影响：

• 先创建专属Pane并绑定到目标图层：

  // 初始化地图时创建专属Pane
  map.createPane('customLayerPane');
  // 给需要定位的图层指定这个Pane
  const targetLayer = L.yourLayerType({
    pane: 'customLayerPane'
  }).addTo(map);
  

• 修改定位代码，仅操作这个专属Pane：

  const adjustCustomPane = () => {
    const mapSize = map.getSize();
    const globalPos = L.DomUtil.getPosition(map.getPane("mapPane"));
    const topLeft = globalPos.multiplyBy(-1);
    L.DomUtil.setPosition(map.getPane('customLayerPane'), topLeft);
  };
  // 绑定地图视图更新事件
  map.on('moveend zoomend', adjustCustomPane);
  

这种方案不会让GeoJSON图层受到任何额外影响，是最稳妥的解决方式。

思路二：反向偏移GeoJSON图层抵消影响 #

如果不想改动现有Pane结构，可以给GeoJSON图层做反向位置调整，抵消你的定位代码带来的偏移：

• 给GeoJSON图层绑定相同的视图更新事件，执行反向定位逻辑：

  const geoJsonLayer = L.geoJson(yourGeoJsonData).addTo(map);
  const fixGeoJsonPosition = () => {
    const globalPos = L.DomUtil.getPosition(map.getPane("mapPane"));
    // 用原globalPos反向抵消topLeft带来的偏移
    L.DomUtil.setPosition(geoJsonLayer.getElement(), globalPos);
  };
  // 绑定到地图视图更新事件，确保在你的定位代码之后执行
  map.on('moveend zoomend', fixGeoJsonPosition);
  

注意：要保证反向调整的事件在你的定位代码之后触发，否则可能出现偏移不准或图层闪烁的问题。

内容的提问来源于stack exchange，提问作者HPressure