【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: 高级用法

待更新。

posted @ 2018-03-18 20:31  四季留歌  阅读(1398)  评论(2编辑  收藏  举报