传统的arcgis api for js 的开发包是用require.js引用开发包的各个模块，然后再实例化对象。随着前端技术的发展，react.js、vue.js、es6的普及，模块化开发越来越多。也有很多跟arcgis相关的组件应运而生，比如react的react-arcgis组件，包含了arcgis api的部分功能，但是其并没有包含arcgis api 的所有功能，很多功能还是需要在引用arcgis开发包模块的基础上再次开发。正好，最近项目中需要用到react结合arcgis api ，查阅了很多网上的博客，找到了esri-loader的模块，此模块相当于dojo.require功能，引用arcgis的开发模块，从而使开发者能够更好地运用arcgis api的相关知识。
一、arcgis api for js 3.x
（1）首先在项目中安装esri-loader模块：
yarn add esri-loader //yarn
npm install esri-loader //npm（2）在public目录下的index.html中引入arcgis api 的css样式文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>react结合arcgis api</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
</head>
<body>
<div id="root"></div>
</body>
</html>（3）地图组件
import React, { Component } from 'react'
import esriLoader from 'esri-loader'
export default class ArcGISMap extends Component{
constructor(props){
super(props)
this.tileMapUrl = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
}
componentDidMount(){
this.initMap()
}
initMap(){
const mapURL = {
url : "https://js.arcgis.com/3.25/"
}
esriLoader.loadModules([
"esri/map",
"esri/SpatialReference",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Extent",
"dojo/domReady!"
], mapURL).then(([Map,SpatialReference,ArcGISTiledMapServiceLayer,Extent])=>{
let extent = new Extent(95.56, 36.28, 125.65, 45.33, new SpatialReference({ wkid: 4326 }))
//定义地图
let map = new Map('mapDiv', {
logo: false,
slider: false,
showLabels: true,
extent: extent,
zoom: 4
})
let tiledLayer = new ArcGISTiledMapServiceLayer(this.tileMapUrl, {
id: 'baseMap'
})
map.addLayer(tiledLayer);
})
}
render(){
let style = {
width: '900px',
height: '600px'
}
return(
<div>
<div id="mapDiv" style = {style}></div>
</div>
)
}
}二、arcgis api for js 4.x
(1) 在public目录下的index.html中引入arcgis api 的css样式文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<meta http-equiv="X-UA-Compatible" content="IE =edge,chrome =1" >
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<title>arcgis4.7&&echarts4.0</title>
</head>
<body>
<noscript>
</noscript>
<div id="root"></div>
</body>
</html>(2)地图组件
import React, { Component } from 'react'
import esriLoader from 'esri-loader'
export default class ArcGISMap extends Component{
constructor(props){
super(props)
this.tileMapUrl = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
}
componentDidMount(){
this.initMap()
}
initMap(){
const mapURL = {
url : "https://js.arcgis.com/4.7/dojo/dojo.js"
}
esriLoader.loadModules([
"esri/Map",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/views/MapView",
"dojo/domReady!"
], mapURL).then(([Map,Basemap,TileLayer,MapView])=>{
let layer = new TileLayer({
url: this.tileMapUrl
})
let baseMap = new Basemap({
baseLayers: [layer],
title: "Custom Basemap",
id: "myBasemap"
});
// Create a Map instance
let map = new Map({
basemap: baseMap
});
// Create a MapView instance (for 2D viewing) and reference the map instance
let view = new MapView({
center : [120.2, 32.1],
map: map,
container : "mapDiv",
zoom:5
});
})
}
render(){
let style = {
width: '900px',
height: '600px'
}
return(
<div>
<div id="mapDiv" style = {style}></div>
</div>
)
}
}