傳統的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>
)
}
}