ArcGis for js React 初始化安装

1、React App：通过脚手架搭建项目；

2、在项目demo根目录下打开命令行窗口，然后安装@arcgis/core这个包：

　　npm install @arcgis/core

 

 

 

3、安装完成之后，我们打开项目根目录下的"package.json"文件，修改项目启动命令：

"scripts": {

"start": "npm run copy && react-scripts start",

"build": "npm run copy && react-scripts build",

"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",

以上的启动命令中我们修改了默认的start和build命令，然后新增了一个copy命令，这条命令主要是将@arcgis/core这个包里面的静态资源拷贝到了项目的public目录下。

可以看到copy命令里面使用了ncp这个命令，所以我们要通过以下命令来全局安装一下这个工具： 

　　npm install ncp -g

重新启动项目后，public目录新增arcgis静态资源

 

 

 

3、然后在React项目的"App.js"或者"index.js"文件中通过如下命令引入ArcGIS API for JavaScript所需的样式文件包，如下：

import '@arcgis/core/assets/esri/themes/light/main.css';

4、最后在组件代码文件顶部位置引入所需要的API模块，此处我们仅仅创建一张二维地图，所以代码直接写在了App.js文件里，如下所示：

import Map from '@arcgis/core/Map';

import MapView from '@arcgis/core/views/MapView';

5、写一个生命周期函数，然后在函数里面编写实例化二维地图的代码，

import { Component } from "react"
import logo from './logo.svg';
import './App.css';
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

class ArcGIS extends Component {
  constructor(props) {
    super(props)
  }
  // 生命周期函数，然后在函数里面编写实例化二维地图的代码
  componentDidMount = () => {
    this.initMap();
  }
  initMap = () => {
    const map = new Map({
      basemap: "osm",
    });
    const view = new MapView({
      container: "mapView",
      map,
      zoom: 13,
      center: [118.75069,31.94153]
    })
  }


  render() {
    return (
      <div id="mapView"></div>
    )
  }
}
export default ArcGIS;

css 高度依次设置为100%即可

作者：X北辰北
https://www.bilibili.com/read/cv8965701
出处： bilibili