【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: 高级用法
待更新。
【esri-loader】帮助文档翻译 part2 用法的更多相关文章
- PLSQL_SQL Loader的概念和用法(概念)
2014-06-08 Created By BaoXinjian
- 【cocos2d-js官方文档】九、cc.loader
概述 原来的cc.Loader被改造为一个单例cc.loader,采用了插件机制设计,让loader做更纯粹的事. 各种资源类型的loader可以在外部注册进来,而不是直接将所有的代码杂揉在cc.Lo ...
- webpack前端构建工具学习总结(二)之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- webpack的loader的原理和实现
想要实现一个loader,需要首先了解loader的基本原理和用法. 1. 使用 loader是处理模块的解析器. module: { rules: [ { test: /\.css$/, use: ...
- 转:Webpack 指南(整理 草稿)
基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...
- 解决SpringBoot jar包太大的问题
转载 2017年09月18日 09:21:53 577 SpringBoot的web应用一般都添加了spring-boot-maven-plugin插件. Maven xml代码 <buil ...
- LoaderTest加载测试用例的方法总结
加载用例,可以用suite.addTest(测试类名("测试函数名"))实现,也可用过suit.addTest(loader.Loader....)实现,一下针对Loader的三个 ...
- 关于 Oracle 的数据导入导出及 Sql Loader (sqlldr) 的用法
在 Oracle 数据库中,我们通常在不同数据库的表间记录进行复制或迁移时会用以下几种方法: 1. A 表的记录导出为一条条分号隔开的 insert 语句,然后执行插入到 B 表中2. 建立数据库间的 ...
- SQL LOADER 的用法 TXT文件导入非常之快
前提,需要本地安装ORACLE 客户端 控制文件 cms.ctl load dataCHARACTERSET UTF8infile 'oracle.txt'APPEND INTO TABLE JR f ...
随机推荐
- C#串口通讯概念以及简单实现
最近在研究串口通讯,其中有几个比较重要的概念,RS-232这种适配于上位机和PC端进行连接,RS-232只限于PC串口和设备间点对点的通信.它很简单的就可以进行连接,由于串口通讯是异步的,也就是说你可 ...
- Github:修改Github仓库中项目语言类型
前述 有的时候我们把项目上传到github仓库上时语言会显示错误语言 比如一个java项目可能因为有js文件的存在而被识别为js项目 这种时候我们就要手动去修改Github的项目语言类型 解决办法 在 ...
- CSS关联选择器的大致类型总结
1.包含选择符(A F) 选择所有被A元素包含的F元素,中间用空格隔开 2.子选择符(A>F) 选择所有作为A元素的直接子元素F,对更深一层的元素不起作用,用大括号表示. 3.相邻选择符(A+F ...
- Windows Server 安装后无法使用无线与音频
1.无线 运行powershell,输入命令: install-windowsfeature Wireless-Networking 之后重启. 运行cmd输入: sc config WlanSvc ...
- Redux进阶(一)
State的不可变化带来的麻烦 在用Redux处理深度复杂的数据时会有一些麻烦.由于js的特性,我们知道当对一个对象进行复制时实际上是复制它的引用,除非你对这个对象进行深度复制.Redux要求你每次你 ...
- iOS客户端图片智能裁剪
 概述 所谓智能裁剪其实就是按照指定尺寸裁剪或显示出包含图片核心特征的区域,目前很多智能裁剪都是在服务器端做的,在客户端需要访问时直接裁剪放到Redis或者提前裁剪好以备访问.但是找了一圈直接在iO ...
- 【专题教程第8期】基于emWin模拟器的USB BULK上位机开发,仅需C即可,简单易实现
说明:1.如果你会emWin话的,就可以轻松制作上位机.做些通信和控制类上位机,比使用C#之类的方便程度一点不差,而且你仅会C语言就可以.2.并且成功将emWin人性化,可以做些Windows系统上的 ...
- ZZCMS v8.2 前台Insert注入+任意文件删除
前几天看了水泡泡老哥的zzcms的审计,在论坛上一搜发现这个cms有不少洞.听说很适合小白练手,所以来瞅一瞅.不知道我发现的这个洞是不是已经被爆过了,如果雷同,纯属巧合. 一.Insert注入,直接返 ...
- python验证码简单识别
因为需求,所以接触了验证码这一块,原本感觉到会很难,学了之后挺简单的,但后来又发现自己还是too young... PIL(python Image Library) 目前PIL的官方最新版本为1.1 ...
- 禁用 Chrome 的黑色模式/Dark Mode
macOS Mojave 中引入了系统层面的黑色模式,Chrome 73 在应用中支行了这一模式,即系统设置为黑色模式时,Chrome 会自动适应切换到 Dark Mode. Chrome 跟随系统设 ...