ArcGIS API 加载失败

Question

我已经下载了 npm i --save esri-loader @esri/react-arcgis 但为什么我无法加载地图？我错过了什么吗？

import React from 'react';
import Map from '../../component/Map/Map.js'
const HomePage = () => {
  return (
    <div>
      <Map/>
    </div>
  );
};

export default HomePage;

component/Map/Map.js

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


function Map() {
    const MapElement=useRef(null)
    useEffect(()=>{
        let view;

    loadModules(["esri/views/MapView", "esri/WebMap"],{
        css:true
    }).then(([MapView, WebMap])=>{
        const webmap= new WebMap({
            basemap:'topo-vector'
        })
        view = new MapView({
            map:webmap,
            center:[],
            zoom:8,
            container:MapElement.current
        })
    })
    return()=>{
        if(!!view){
            view.destroy()
            view=null
        }
    }
    })
    return (
        <div style={{height:800}} ref={MapElement}>
            
        </div>
    )
}

export default Map

我得到的错误

我用于此的参考 https://www.youtube.com/watch?v=0RC1Xf_0UUk

package.json

{
       "name": "@country/app",   "private": true,   "scripts": {
       "start": "webpack serve",
       "start:standalone": "webpack serve --port 9003 --env standalone",
       "build": "concurrently yarn:build:*",
       "build:webpack": "webpack --mode=production",
       "analyze": "webpack --mode=production --env analyze",
       "lint": "eslint src --ext js",
       "format": "prettier --write .",
       "check-format": "prettier --check .",
       "test": "cross-env BABEL_ENV=test jest",
       "watch-tests": "cross-env BABEL_ENV=test jest --watch",
       "prepare": "husky install",
       "coverage": "cross-env BABEL_ENV=test jest --coverage"   },   "devDependencies": {
       "@arcgis/webpack-plugin": "^4.20.0",
       "@babel/core": "^7.15.0",
       "@babel/eslint-parser": "^7.15.0",
       "@babel/plugin-transform-runtime": "^7.15.0",
       "@babel/preset-env": "^7.15.0",
       "@babel/preset-react": "^7.14.5",
       "@babel/runtime": "^7.15.3",
       "@testing-library/jest-dom": "^5.14.1",
       "@testing-library/react": "^12.0.0",
       "babel-jest": "^27.0.6",
       "concurrently": "^6.2.1",
       "cross-env": "^7.0.3",
       "eslint": "^7.32.0",
       "eslint-config-prettier": "^8.3.0",
       "eslint-config-react-important-stuff": "^3.0.0",
       "eslint-plugin-prettier": "^3.4.1",
       "husky": "^7.0.4",
       "identity-obj-proxy": "^3.0.0",
       "jest": "^27.4.3",
       "jest-cli": "^27.4.3",
       "prettier": "^2.3.2",
       "pretty-quick": "^3.1.1",
       "webpack": "^5.51.1",
       "webpack-cli": "^4.8.0",
       "webpack-config-single-spa-react": "^4.0.0",
       "webpack-dev-server": "^4.0.0",
       "webpack-merge": "^5.8.0"   },   "dependencies": {
       "@esri/react-arcgis": "^5.1.0",
       "@material-ui/styles": "^4.11.4",
       "@mui/styles": "^5.2.2",
       "@reach/router": "^1.3.4",
       "arcgis-js-api": "^4.21.2",
       "esri-loader": "^3.3.0",
       "react": "^17.0.2",
       "react-dom": "^17.0.2",
       "single-spa-react": "^4.3.1"   }, }

Answer 1

很抱歉没有直接回复您描述的错误，但我不会将 esri-loader 与新版本的 ArcGIS 一起用于 JavaScript API。为什么不将 npm 作为不需要单独脚本加载器的 ES 模块？

Build with ES Module

这样你就可以像这样进行简单的导入：

从“@arcgis/core/WebMap”导入 WebMap；

以下是初始设置说明：

Install instructions

最后，这是来自 Esri 的示例 React 应用程序，正是使用了它：

Esri React App example

ArcGIS API 加载失败

The ArcGIS API failed to load

javascript

arcgis

reactjs

arcgis-js-api