首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ArcGIS API加载失败

ArcGIS API加载失败
EN

Stack Overflow用户
提问于 2021-12-01 15:40:02
回答 1查看 367关注 0票数 0

我下载了npm -保存esri加载程序@esri/ map arcgis,但是为什么我不能加载地图呢?我错过了什么吗?

代码语言:javascript
运行
复制
import React from 'react';
import Map from '../../component/Map/Map.js'
const HomePage = () => {
  return (
    <div>
      <Map/>
    </div>
  );
};

export default HomePage;

组件/Map/Map.js

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
{
       "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"   }, }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-04 16:36:13

很抱歉没有直接响应您所描述的错误,但是我不会将esri加载器与更新版本的ArcGIS用于JavaScript API。为什么npm模块不需要单独的脚本加载程序呢?

用ES模块构建

这样您就可以进行如下简单的导入:

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

以下是初始设置说明:

安装说明

最后,这里有一个来自Esri的示例react应用程序,它使用的正是:

示例

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70187103

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档