你還在使用 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。?

community.esri.com

結論如下：

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

環境搭建

  • 安裝 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中調用

更多的詳情見：

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

xiaozhuanlan.com圖標

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

GIS之家店鋪：GIS之家

GIS之家源碼諮詢：GIS之家webgis入門開發系列demo源代碼諮詢
推薦閱讀：
相關文章