1、环境安装
(1) Node.js(包含npm,node包管理器)
(2) git
(3) Java 7或更高版本 - Closure Compiler所需 (用于Dojo构建,英文为Dojo build)
环境安装参考React+Cordova+Android环境配置中的1、nvm-windows安装;5、Android需求环境
2、克隆jsapi-resources
cd /d D:\mapp
git clone https://github.com/Esri/jsapi-resources.git
3、安装bower
npm install -g bower
4、安装依赖的包
进入jsapi-resources\3.x\bower\dojo
文件夹,执行安装依赖包,安装过程视网络情况需要一定的时间,下载文件失败请重试(可能需要科学上网)
cd /d D:\mapp\jsapi-resources\3.x\bower\dojo
npm install
执行成功后,会在dojo
文件夹下多出node_modules
文件夹,在dojo/src
下多出dojo
、dojox
、esri
等文件夹,如下图所示
5、修改相应文件
(1)dojo/build.profile.js
中的layers
layers的每一个属性表示一个独立的js文件,可将多个js文件合成一个文件输出,如下面的app/main
会输出为app/main.js
,该文件中包含app/main
、dojox/gfx/path
、dojox/gfx/svg
等多个文件的代码。
layers: {
// This is the main loader module. It is a little special because it is treated like an AMD module even though
// it is actually just plain JavaScript. There is some extra magic in the build system specifically for this
// module ID.
"dojo/dojo": {
// By default, the build system will try to include `dojo/main` in the built `dojo/dojo` layer, which adds
// a bunch of stuff we do not want or need. We want the initial script load to be as small and quick to
// load as possible, so we configure it as a custom, bootable base.
boot: true,
customBase: true
},
'app/main': {
include: [
"app/main",
"dojox/gfx/path",
"dojox/gfx/svg",
"dojox/gfx/filters",
"dojox/gfx/svgext",
"dojox/gfx/shape",
"esri/dijit/Attribution"
],
includeLocales: ["zh-cn"]
},
"esri/layers/VectorTileLayerImpl": {
include: [
"esri/layers/VectorTileLayerImpl"
],
includeLocales: ["zh-cn"]
},
"esri/layers/support/webglDeps": {
include: [
"esri/layers/support/webglDeps"
],
includeLocales: ["zh-cn"]
}
},
(2)dojo/src/built.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title></title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<link rel="stylesheet" href="esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src="dojo/dojo.js"></script>
<script>require(["app/main"]);</script>
</head>
<body class="claro">
<div id="map"></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
(3)dojo/src/app/main.js
define(["esri/map"], function (Map) {
var map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75],
zoom: 13
});
});
6、构建
在jsapi-resources\3.x\bower\dojo
文件夹下执行构建
npm run build
注意:构建完的文件在dojo/dist
下,包含完整的包。如果需要手动挑选出需要加载的资源文件比较困难,可通过发布网站并利用工具下载来达到挑选的目的。
7、将文件夹发布为虚拟目录并进行访问
将D:\mapp\jsapi-resources\3.x\bower
文件夹发布为虚拟目录
访问http://localhost/bower/dojo/dist/index.html
8、下载页面资源文件
(1)打开Chrome网上应用店
https://chrome.google.com/webstore/category/extensions,需要科学上网;
(2)查找Full download JS/CSS/HTML
,点击添加至Chrome
;
(3)按F12
打开开发者工具
,找到FullDownload
,点击Record
进行录制,按F5
刷新页面,按DownloadAll
下载资源。
参考资料
1、Using Bower for Custom Builds of the ArcGIS API for JavaScript
https://developers.arcgis.com/javascript/3/jshelp/inside_bower_custom_builds.html
2、Bower Sample application
https://github.com/Esri/jsapi-resources/tree/master/3.x/bower/dojo
转载请注明:作者gisxiaowei,首发简书 jianshu.com