arcgis api 4.x for js 結合 react 入門開發系列初探篇（附源碼下載）

你還在使用 JQuery 或者 Dojo 框架開發 arcgis api 4.x for js 嗎？想試試模塊化開發嗎？隨着前端技術的發展，arcgis api 4.x for js 也有了結合 react.js、vue.js、es6 的開發模式。

筆者由於項目開發前端選型 react.js，“不得以”嘗試了幾種 react+arcgis 的開發模式，現在比較流行的解決方案有 esri-loader、@webpack/webpack-plugin。

筆者為避免 esri-loader 中繁瑣的模塊導出操作（loadModules），故選擇的是后者，至於他們之間應用場景可以參看以下鏈接：https://community.esri.com/people/TWayson-esristaff/blog/2018/05/10/arcgiswebpack-plugin-vs-esri-loader。

結論如下：

好了，現在我們可以愉快的進行開發了：

環境搭建

• 安裝 node.js，筆者版本為：10.13.0
  

• 下載安裝 vscode

• 下載 demo，具體見文章尾部

• demo 項目工程文件目錄以及關鍵代碼講解
  

public/index.html 系統主頁
public/assets 存放系統用到的靜態資源，如圖片。
src/components 目錄存放所有的組件，比如 WebMap 是我們的地圖組件
src/css 存放全局引用到的樣式文件
src/data存放系統組件需要的數據
src/config 負責存儲地圖配置 
src/index.js 負責將主頁Dom節點接入
package.json 記錄了項目的配置信息，包括名稱、版本、許可證等元數據，也會記錄所需的各種模塊，包括 執行依賴，和開發依賴
.babelrc 負責對系統 javascript 語法編譯配置
webpack.config.js webpack 的配置文件

• index.html 系統入庫，初始化 root 的 Dom 節點

• index.js 將 webmap 組件掛載至 root 節點，同時引入 esriConfig 的相關配置

• WebMap.js

• app.js 引入 jsapi 的 webmap、mapview、search 模塊，並初始化，提供傳遞 view 的 dom 節點回調函數，在 webmap.js中調用

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波