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

esri-loader怎麼用？看完就能上手了

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: 進階用法

待更新。