React + ArcGIS项目创建：从零开始搭建

1.首先创建react项目：（这里使用了typescript,如果不需要则去掉–template typescript）：

create-react-app projectname --template typescript

在react中使用arcgis有三种方法：

   这里介绍第二种和第三种

AMD local build  方式：

1.安装@esri/react-arcgis

npm install @esri/react-arcgis

2.安装esri-loader

npm install esri-loader

3.使用：

import React, { Component } from 'react';
import {loadModules} from 'esri-loader'
import './Fristarc.css'

export default class Firstarc extends Component {
    public esriMap:any;
    componentDidMount(){
        loadModules(['esri/Map', 'esri/views/MapView']).then(([Map, MapView])=>{
            this.esriMap= new Map({
                basemap: "streets-vector"
            });
            new MapView({
                map: this.esriMap,
                container: "Firstarc",
                center: [-118.244, 34.052],
                zoom: 12
            });
        })
    }
    render() {
        return (
            <div id='Firstarc'> 
                
            </div>
        )
    }
}

注意要给id为Fristarc的div设置高度否则不会展示，另外需要在index. html  中引入：

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">

App.js:

import React from 'react';
import Firstarc from './components/Firstarc/Firstarc'
import './App.css';

function App() {
  return (
    <div className="App">
      <Firstarc />
    </div>
  );
}

export default App;

ES Moudle方式:

1.安装 @arcgis/core

npm install @arcgis/core

2.Copy assets：需要将api需要的资源如 image 复制到public中，可以在package.json中加入copy命令，参考官网：

{
    "script": {
        "start": "npm run copy && react-scripts start",
        "build": "npm run copy && react-scripts build",
        "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
    }
}

3.使用：

   在index.js中引入css:

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

APP.js

import React from 'react';
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

import './App.css';

export default class App extends React.Component {
  public esriMap: any;
  componentDidMount() {
      this.esriMap = new Map({
        basemap: "streets-vector"
      });
      new MapView({
        map: this.esriMap,
        container: "Firstarc",
        center: [-118.244, 34.052],
        zoom: 12
      });
  }
  render() {
    return (
      <div id='Firstarc' style={{height:'100vh'}}>

      </div>
    )
  }
}

效果：

如果没有放大缩小按钮、footer等，看看是否引入了css

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删