【esri-loader】幫助文檔翻譯 part2 用法

esri-loader怎么用？看完不要太清楚。

【未完待續】！！！

Q1: 在哪里用？

這是我最疑惑的問題之一，我知道要用esri-loader，肯定是某條js導入語句起作用的，但是你得告訴我寫在哪里吧?

目前測試成功的是，在webpack打包的入口js文件中寫：

import esriLoader from 'esri-loader'

其中，esriLoader是導入后的模塊名，當然也可以叫loader，mapLoader隨意。

服務器環境下打開html，F12查看：

加載成功，接下來就可以正常使用esri-loader加載ArcGIS API for JavaScript的模塊了。

至於頁面的組織，那就要看開發者的前端功底了。

Q2: 導入

在加載ArcGIS API for JS之前，先要加載官方給的CSS：

esriLoader.loadCss('https://js.arcgis.com/4.6/esri/css/main.css');
//此方法雖然是esriLoader模塊的方法，但是並沒有export暴露出來，所以webpack打包后運行是失敗報錯的，不知道什么原因，所以推測並不是在js代碼中導入的css

上面報錯如下：

 

可以通過傳統的方式加載，例如在html中添加<link>標簽，或在CSS中用@import語句。

CSS導入語句可以寫在css文件中嵌入html的link標簽中、寫在style標簽中；

<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

@import url('https://js.arcgis.com/4.6/esri/css/main.css');

效果見下：

Vue中可以寫在根組件的style標簽中：

加載成功的樣子：

Q3: 怎么用

使用loadModules方法即可。

esriLoader.loadModules(['esri/views/MapView', 'esri/WebMap'])
.then(([MapView, WebMap]) => {
  var webmap = new WebMap({
    portalItem: { 
      id: 'f2e9b762544945f390ca4ac3671cfa72'
    }
  });
  var view = new MapView({
    map: webmap,
    container: 'viewDiv'
  });
})
.catch(err => {
  console.error(err);
});

抽出主干

loadModules([模塊數組])
.then(callback)
//盡管dojo在以后希望用戶用when代替then

這里loadModules()就相當於require的第一個字符串數組參數；

而then里的callback回調就是require里的第二個方法參數。只不過此處用了Lambda表達式。

后面catch是處理異常。

Q4: 高級用法

待更新。