【发布时间】：2022-08-17 05:16:41
【问题描述】：
我正在使用 React 构建我的 ArcGis 应用程序，但我需要将我的 API 密钥用于要素层之一。我遇到的问题是我的要素图层没有显示。我相信如果我将它作为道具从我的 FeatureLayer 传递给我的地图组件，那么这可能会解决我的问题，但是我可以将我的 API 密钥放在我的 FeatureLayer 组件中还是必须在地图层组件中。我对反应还是很陌生，可能对如何将所有内容组合在一起存在一些误解。
我让它在 Html/Javascript 中工作，它没有问题，但使用 React 可能会有所不同。任何帮助将不胜感激。
import React, { useEffect, useRef, useState } from \"react\";
import { loadModules } from \"esri-loader\";
function Map() {
const [featureLayer1, setFeatureLayer1] = useState(null);
let view;
const MapElement = useRef(null);
useEffect(() => {
loadModules(
[
\"esri/views/MapView\",
\"esri/Map\",
\"esri/config\",
\"esri/layers/GeoJSONLayer\",
\"esri/Graphic\",
\"esri/layers/GraphicsLayer\",
\"esri/layers/FeatureLayer\", //latest
\"esri/renderers/SimpleRenderer\",
\"esri/symbols/SimpleFillSymbol\",
\"esri/widgets/Legend\",
],
{
css: true,
}
).then(
([
MapView,
Map,
esriConfig,
Graphic,
GraphicsLayer,
FeatureLayer,
SimpleRenderer,
SimpleFillSymbol,
Legend,
]) => {
const houseStatus = {
Unreleased: [99, 97, 97], //dark grey
Sold: [255, 0, 0], //red
Available: [0, 255, 0], //green
Other: [0, 0, 255], //blue
};
esriConfig.apiKey =
\"MY_API_KEY\";
const map = new Map({
basemap: \"arcgis-imagery\",
});
view = new MapView({
map: map,
center: [18.9660638, -33.8071444],
zoom: 13,
container: MapElement.current,
});
view.ui.add(\"infoDiv\", \"bottom-left\");
const graphicsLayer = new GraphicsLayer();
graphicsLayer.opacity = 0.5;
map.add(graphicsLayer);
const streetLayer = new FeatureLayer({
url: \"https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/Navigation_Barriers/FeatureServer/0\",
});
setFeatureLayer1(streetLayer);
const erfLayer = new FeatureLayer({
url: \"https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/VdV_Cadastral/FeatureServer/0\",
});
const valdevieLabels = {
symbol: {
type: \"text\",
color: \"#FFFFFF\",
haloColor: \"#5E8D74\",
haloSize: \"2px\",
font: {
size: \"12px\",
family: \"Noto Sans\",
style: \"italic\",
weight: \"normal\",
},
},
labelPlacement: \"center-center\",
labelExpressionInfo: {
expression: \"$feature.Label\",
},
};
const dotLyaer = new FeatureLayer({
url: \"https://services5.arcgis.com/WPkXI1mQdYLzFttB/arcgis/rest/services/Greater_VdV_Addresses/FeatureServer/0\",
labelingInfo: [valdevieLabels],
});
dotLyaer.opacity = 0;
let symbol = {
type: \"simple-fill\",
color: [51, 51, 204, 0.9],
style: \"none\",
outline: {
color: \"black\",
width: 1,
},
};
const erfLayerRenderer = {
type: \"simple\",
symbol: symbol,
};
erfLayer.renderer = erfLayerRenderer;
map.add(streetLayer);
map.add(dotLyaer);
map.add(erfLayer);
}
);
});
return (
<>
<div style={{ height: 800 }} ref={MapElement}>
{featureLayer1 !== null ? \"Not empty\" : \"Empty\"}
</div>
</>
);
}
export default Map;
在我的返回 Div 中，我可以看到 featureLayer1 在浏览器中是空的。
标签： reactjs api-key esri-loader