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>
)
}
}
效果: