我正在尝试在 ArcGIS 地图上显示巴基斯坦洪水数据。地图加载正常。 Geojsos的点也显示了，但是当我点击它时，它没有显示任何数据。你能调查一下吗？我感觉图层有问题，但无法排除故障。请看看这个？
这是我的地图组件：
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 }; // Add PopupTemplate to the returned object
};
export default function PakFlood() {
const mapEI = useRef(null);
const [mapLoaded, setMapLoaded] = useState(false);
useEffect(() => {
const initMap = async () => {
if (mapLoaded) {
return; // Map has already been loaded, do not load again
}
const { MapView, WebMap, GeoJSONLayer, PopupTemplate } = await loadEsriModules(); // Include PopupTemplate
let view;
if (typeof window !== 'undefined') {
const webmap = new WebMap({
basemap: 'topo-vector',
});
// const centerCoordinates = [69.3451, 30.3753];
view = new MapView({
map: webmap,
center: [69.3451, 30.3753],
zoom: 5,
container: mapEI.current,
});
try {
// Simplified Popup Template
const popupTemplate = new PopupTemplate({
title: "Flood Data",
content: "{Death} deaths, {Injuries} injuries",
});
console.log("GeoJSON Layer created"); // Debugging Step 1
const geojsonLayer = new GeoJSONLayer({
url: '/GeoJson.json',
popupTemplate: popupTemplate,
});
console.log("Before adding layer:", webmap.layers.length); // Debugging Step 2
// Add the GeoJSON layer to the map
webmap.add(geojsonLayer);
console.log("After adding layer:", webmap.layers.length); // Debugging Step 2
setMapLoaded(true);
} catch (error) {
console.error("An error occurred:", error); // Debugging Step 4
}
}
return () => {
if (view) {
view.destroy();
}
};
};
return () => initMap();
}, []);
return <div style={{ height: '400px', width: '100%' }} ref={mapEI}></div>;
}
我的 geojson 文件是：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Death": 336,
"Injuries": 106,
"Home Damaged": "4,26,897"
},
"geometry": {
"coordinates": [
67.02502796328298,
30.208618740113437
],
"type": "Point"
},
"id": 0
},
{
"type": "Feature",
"properties": {
"Death": 309,
"Injuries": 348,
"Home Damaged": "3,26,897"
},
"geometry": {
"coordinates": [
71.56406913421023,
34.166707649222474
],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"Death": 799,
"Injuries": 8422,
"Home Damaged": "57,496"
},
"geometry": {
"coordinates": [
66.97593758543181,
25.004585896445533
],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"Death": 23,
"Injuries": 8,
"Home Damaged": "1,160"
},
"geometry": {
"coordinates": [
74.31454667531628,
35.99794367334606
],
"type": "Point"
}
},
{
"type": "Feature",
"properties": { "Death": 223,
"Injuries": 3858,
"Home Damaged": "UNKNOWN"
},
"geometry": {
"coordinates": [
74.28116274467547,
31.745012657468934
],
"type": "Point"
}
}
]
}
最近完成了一个地图项目（仅针对核弹），我感受到你的痛苦。要在单击 GeoJSON 点时显示数据，您需要将弹出模板添加到 GeoJSONLayer。弹出窗口模板定义用户单击某个功能时弹出窗口中显示的内容。
确保从 esri-loader 导入必要的模块。 创建弹出模板来显示死亡、受伤和房屋损坏。 将 Popup 附加到图层：将 PopupTemplate 附加到 GeoJSONLayer。 将图层添加到地图。
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 mapEl = useRef(null);
const [mapLoaded, setMapLoaded] = useState(false);
useEffect(() => {
const initMap = async () => {
if (mapLoaded) {
return; // Map has already been loaded, do not load again
}
const { MapView, WebMap, GeoJSONLayer, PopupTemplate } = await loadEsriModules();
let view;
if (typeof window !== 'undefined') {
const webmap = new WebMap({
basemap: 'topo-vector',
});
const centerCoordinates = [69.3451, 30.3753];
view = new MapView({
map: webmap,
center: centerCoordinates,
zoom: 5,
container: mapEl.current,
});
// Create a PopupTemplate
const popupTemplate = new PopupTemplate({
title: "Flood Data",
content: [
{
type: "fields",
fieldInfos: [
{ fieldName: "Death", label: "Deaths" },
{ fieldName: "Injuries", label: "Injuries" },
{ fieldName: "Home Damaged", label: "Homes Damaged" },
],
},
],
});
// Create a GeoJSONLayer using your GeoJSON data
const geojsonLayer = new GeoJSONLayer({
url: '/GeoJson.json',
popupTemplate: popupTemplate, // Attach the popup template
});
// Add the GeoJSON layer to the map
webmap.add(geojsonLayer);
setMapLoaded(true);
}
return () => {
if (view) {
view.destroy();
}
};
};
initMap();
}, [mapLoaded]);
return <div style={{ height: '400px', width: '100%' }} ref={mapEl}></div>;
}
如果没有看到完整的代码，很难说，但你可以运行一些日志：
const geojsonLayer = new GeoJSONLayer({
url: '/GeoJson.json',
popupTemplate: popupTemplate,
});
console.log("Before adding layer:", webmap.layers.length); // Debugging Step 2
// Simplified Popup Template
const popupTemplate = new PopupTemplate({
title: "Flood Data",
content: "{Death} deaths, {Injuries} injuries" // Debugging Step 3
});
const geojsonLayer = new GeoJSONLayer({
url: '/GeoJson.json',
popupTemplate: popupTemplate,
});
console.log("GeoJSON Layer created"); // Debugging Step 1
webmap.add(geojsonLayer);
console.log("After adding layer:", webmap.layers.length); // Debugging Step 2
setMapLoaded(true);
}
} catch (error) {
console.error("An error occurred:", error); // Debugging Step 4
}
};
initMap();
}, [mapLoaded]);
并告诉我他们报告了什么，或者如果你从日志中找出来，都很好！