【esri-loader】帮助文档翻译 part2 用法
2024-10-18 23:25:06
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: 高级用法
待更新。
最新文章
- linux 下添加库的加载路径的方式
- hdu5714 拍照[2016百度之星复赛C题]
- Trie,HDU1875world puzzle
- jboss项目迁移至WebLogic12
- vs2010 &ldquo;发生生成错误,运行上次的成功运行的程序&rdquo;怎么改回不运行。
- source insight3.5中文乱码解决方案
- tc令牌桶限速心得
- IIS的Connection由改为close改为Keep-Alive
- MYSQL中添加时间
- Android Bootloader LittleKernel的两篇文章
- 20164320 王浩 Exp1 PC平台逆向破解
- jieba库与词云的使用——以孙子兵法为例
- 记一次easywechat企业付款问题
- String的split方法,你真的懂吗
- The 15th Zhejiang Provincial Collegiate Programming Contest(部分题解)
- flask 更新数据库
- 如果filename的value有值 说明支持存储
- MySQL之 Mysqldump导出数据库
- 【原】Win7 host 与 virtualbox ubuntu guest 相同ping通
- php之快速入门学习-3(print和echo)
热门文章
- Spring+SpringMVC+MyBatis的pom.xml依赖
- 《k8s-1.13版本源码分析》- Informer 机制
- 从源码解读线程(Thread)和线程池(ThreadPoolExecutor)的状态
- DSAPI多功能组件编程应用-HTTP监听服务端与客户端_指令版
- ajax提交数据
- 关于页面传参,decodeURI和decodeURIComponent
- python的学习笔记01_1 python2和python3的区别和环境
- 4.熟悉App Inventor 2编程界面
- QT读取xml配置文件
- 【Oracle RAC】Linux系统Oracle11gR2 RAC安装配置详细过程V3.1(图文并茂)