无法在 React 应用程序中加载 ESRI ArcGIS JS API 地图

Posted 2023-02-21

【中文标题】无法在 React 应用程序中加载 ESRI ArcGIS JS API 地图

【英文标题】：Not able to load ESRI ArcGIS JS API Map in React app

【发布时间】：2021-07-11 04:26:31

【问题描述】：

我正在为应用程序使用 React [^17.0.1] 和 arcgis-js-api [^4.18.1]，

在“npm start”之后，我收到以下错误，

控制台错误如下，

[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Attribution TypeError: t is not a constructor
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Zoom TypeError: t is not a constructor
index.js:1 [esri.widgets.Widget] widget-intl:locale-error esri.widgets.Popup TypeError: t is not a constructor
[esri.Basemap] #load() Failed to load basemap (title: 'Basemap', id: 'gray-vector') TypeError: t is not a constructor
workerFactory.js:5 Uncaught (in promise) TypeError: e is not a function
Uncaught (in promise) TypeError: Cannot read property 'zoomIn' of null

SalesChartCard.js

import React,  useRef, useEffect  from 'react';
import  Card, CardBody, CardTitle  from 'reactstrap';
import ArcGISMap from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import esriConfig from '@arcgis/core/config';

import '../../assets/css/map.css';

const SalesChartCard = () => 
  esriConfig.assetsPath = '/assets';

  const mapDiv = useRef(null);

  useEffect(() => 
    if (mapDiv.current) 
      /**
       * Initialize application
       */
      const map = new ArcGISMap(
        basemap: 'gray-vector',
      );

      /* eslint-disable no-unused-vars */
      const view = new MapView(
        map,
        container: mapDiv.current,
        extent: 
          spatialReference: 
            wkid: 102100,
          ,
          xmax: -13581772,
          xmin: -13584170,
          ymax: 4436367,
          ymin: 4435053,
        ,
      );
      /* eslint-enable no-unused-vars */
    
  , []);

  return (
    <Card>
      <CardBody>
        <CardTitle>Map</CardTitle>
        <div className="mapDiv" ref=mapDiv />
      </CardBody>
    </Card>
  );
;

export default SalesChartCard;

我按照以下链接进行开发，

jsapi-resources 使用ES modules 构建 Link

我仍然遇到相同的控制台错误。

请查看更新后的Git-repo 并提出解决方案。

克隆 repo 并运行应用程序，然后导航到 url

http://localhost:3000/app/dashboards/default

然后应用程序中断并开始出错。

【问题讨论】：

我会考虑在 esri 的 geonet 论坛上提出这个问题，当谈到 arcgis js api 时，该社区更加活跃和知识渊博。在尝试将 @arcgis/core 包与 parcel-bundler 一起使用时，我遇到了类似的问题......我很惊讶你在 CRA（webpack）中拥有它。可能是新的 @arcgis/core 包的错误？

【参考方案1】：

尝试升级到 4.19。您所看到的看起来像是在 4.19 更改的配置问题。