ArcGIS地图中GeoJSON点点击无弹窗数据问题排查求助

核心问题：地图初始化逻辑执行时机错误 #

你的代码中useEffect的返回值是组件卸载时触发的清理函数，你错误地将initMap放在了这个清理函数中，导致地图初始化代码只会在组件卸载时执行——虽然你看到了地图和点位加载正常，可能是偶然的渲染残留，但这直接导致图层交互逻辑（比如弹窗）无法正确绑定。

修复步骤 #

1. 修正useEffect的执行逻辑 #

把initMap的调用从清理函数中移出，直接在useEffect内部执行，确保组件挂载时就完成地图初始化：

useEffect(() => {
  const initMap = async () => {
    // ... 原有初始化逻辑不变
  };

  // 直接调用初始化函数，而非放在清理逻辑里
  initMap();

  // 保留视图销毁的清理逻辑
  return () => {
    if (view) {
      view.destroy();
    }
  };
}, []);

2. 可选优化：确保图层加载完成后再添加到地图 #

监听GeoJSONLayer的加载完成事件，能避免因图层未就绪导致的交互异常：

const geojsonLayer = new GeoJSONLayer({
  url: '/GeoJson.json',
  popupTemplate: popupTemplate,
});

// 等待图层加载完成后再添加到地图
geojsonLayer.when(() => {
  console.log("GeoJSON图层加载完成");
  webmap.add(geojsonLayer);
  setMapLoaded(true);
});

3. 验证PopupTemplate字段匹配 #

你的GeoJSON属性Death、Injuries与PopupTemplate中的占位符完全匹配，这部分无需修改。如果后续需要展示Home Damaged字段，注意字段名包含空格，直接用{Home Damaged}即可：

const popupTemplate = new PopupTemplate({
  title: "洪水数据",
  content: `
    <p>死亡人数: {Death}</p>
    <p>受伤人数: {Injuries}</p>
    <p>受损房屋: {Home Damaged}</p>
  `,
});

完整修正后的组件代码 #

import React, { useRef, useEffect, useState } from 'react';
import { loadModules } from 'esri-loader';

const loadEsriModules = async () => {
  const [MapView, WebMap, GeoJSONLayer, PopupTemplate] = await loadModules([
    'esri/views/MapView',
    'esri/WebMap',
    'esri/layers/GeoJSONLayer',
    'esri/PopupTemplate', 
  ]);
  return { MapView, WebMap, GeoJSONLayer, PopupTemplate };
};

export default function PakFlood() {
  const mapEI = useRef(null);
  const [mapLoaded, setMapLoaded] = useState(false);
  let view; // 提升view作用域，确保清理函数能访问

  useEffect(() => {
    const initMap = async () => {
      if (mapLoaded) return;

      const { MapView, WebMap, GeoJSONLayer, PopupTemplate } = await loadEsriModules();

      if (typeof window !== 'undefined') {
        const webmap = new WebMap({
          basemap: 'topo-vector',
        });

        view = new MapView({
          map: webmap,
          center: [69.3451, 30.3753],
          zoom: 5,
          container: mapEI.current,
        });

        try {
          const popupTemplate = new PopupTemplate({
            title: "洪水数据",
            content: "{Death} 人死亡, {Injuries} 人受伤",
          });

          const geojsonLayer = new GeoJSONLayer({
            url: '/GeoJson.json',
            popupTemplate: popupTemplate,
          });

          geojsonLayer.when(() => {
            webmap.add(geojsonLayer);
            setMapLoaded(true);
          });

        } catch (error) {
          console.error("初始化出错:", error);
        }
      }
    };

    initMap();

    return () => {
      if (view) {
        view.destroy();
      }
    };
  }, [mapLoaded]);

  return <div style={{ height: '400px', width: '100%' }} ref={mapEI}></div>;
}

额外排查点 #

• 检查浏览器控制台是否有报错，确认/GeoJson.json路径是否正确，是否存在跨域问题
• 确保ArcGIS API版本与esri-loader兼容，避免版本不匹配导致的交互异常

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