wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
qd-changjing/public/leaflet/libs/iclient8c/examples/mobileTopic.html

373 lines
30 KiB
HTML
Raw Normal View History

first commit
2022-07-05 16:56:29 +08:00
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>离线缓存与 APP 专题</title>
<link href='./css/bootstrap.min.css' rel='stylesheet'/>
<link href='./css/bootstrap-responsive.min.css' rel='stylesheet'/>
<link href='./css/sm-extend.css' rel='stylesheet'/>
<link href='./css/sm-doc.css' rel='stylesheet'/>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!--导航条-->
<div class="navbar navbar-fixed-top" id="navbar">
</div>
<div id='container' class='container'>
<div class='page-header'>
<h1>离线缓存与APP专题</h1>
<hr/>
<h2>一、SuperMap iClient for JavaScript 移动应用简介</h2>
<div class="pageImage"><img src="./images/android.PNG"/></div>
<p>
SuperMap iClient 8C(2017) for JavaScript 是一款在服务式 GIS 架构体系中，面向 HTML5 的应用开发，支持多终端，跨浏览器的客户端开发平台。
通过 SuperMap iClient 8C(2017) for JavaScript，无需任何插件，便可以在浏览器上实现美观的地图展现，内容丰富的地图应用。
</p>
<p>
近些年来随着智能终端的迅速发展，LBS 应用的大众化普及，手机地图已经在日常生活中扮演着不可或缺的作用。
相比传统的 PC 端地图应用，手机地图的应用具有便于携带、
便于操作、不受空间约束等优势，移动终端这些全新的用户体验是也是传统 PC 所无法媲美。正是在这种背景下，
SuperMap iClient 8C(2017) for JavaScript 提供了对手机平台的扩展支持。
</p>
<p>
SuperMap iClient 8C(2017) for JavaScript 提供的 APP 应用插件，
在技术上采用 PhoneGap 开源开发框架，针对 PhoneGap 进行了代码兼容和优化，
并实现了地图离线缓存的插件化支持。通过 SuperMap iClient 8C(2017) for JavaScript 开发平台，
你可以通过 HTML，CSS 和 JavaScript 技术构建出基于浏览器的地图应用；通过 PhoneGap 开发框架，你可以将已有的地图应用直接打包生成支持 Android 的应用程序，
并且可以调用系统级别的功能来丰富应用；通过 SuperMap iClient 8C(2017) for JavaScript 提供的 APP 应用插件，地图应用具备离线缓存的功能，满足用户在离线状态下的地图应用。 这样，
Web 开发人员利用已有的技术储备，不需要太多的额外学习成本就可以快速的开发出自己的地图 APP 应用。
该开发模式具有如下一些特点：
</p>
<p>
<ul style="list-style-type:disc;">
<li>APP应用摆脱浏览器的束缚，提供定制化的地图应用，具有较好的用户体验</li>
<li>利用已有的Web技术，不需要考虑繁杂的底层技术</li>
<li>支持多种手机平台</li>
<li>支持通过 js 调用系统级接口，比如摄像头，GPS 等</li>
<li>支持地图离线缓存</li>
</ul>
</p>
<h2>二、SuperMap JavaScript for Android APP 入门简介</h2>
<p>
该文档介绍了基于SuperMap iClient 8C(2017) for JavaScript 开发平台生成的的地图应用，如何生成 Android 的应用程序的完整教程，
该地图应用具备地图浏览，缩放，离线缓存等基本功能，用户可以在此基础上增加自己的业务需求，
丰富地图应用。该示例在开发包范例中可以获取。
</p>
<ol>
<li>安装 SDK，安装开发环境
<ul style="list-style-type:disc;">
<li>下载并解压 <a target="new" href="http://www.supermap.com.cn/sup/download_view.asp?id=578&bid=1">SuperMap
iClient 8C(2017) for JavaScript</a></li>
<li>下载并安装 <a target="new" href="http://www.eclipse.org/downloads/">Eclipse Classic</a></li>
<li>下载并安装 <a target="new" href="http://developer.android.com/sdk/index.html">Android SDK</a></li>
<li>下载并安装 <a target="new" href="http://developer.android.com/sdk/eclipse-adt.html#installing">ADT Plugin</a>
</li>
</ul>
</li>
<li>Android工程创建
<ul style="list-style-type:disc;">
<li>打开Eclipse，新建Android工程，如下图（Application Name: SuperPhone、Package Name: com.supermap.javascript、Create
Activity: SuperPhoneActivity），点击Finish完成（备注：因为Eclipse版本不同，新建工程的布局可能会略有不同）<br/>
<div class="pageImage"><img src="./images/new project.png"/></div>
</li>
<li>Android 工程下新建文件夹: /assets/www 及 /libs</li>
<li>将 SuperMap iClient 8C(2017) for JavaScript 开发包中的 resource/PhoneGap/clouddemo文件夹中的内容拷贝至 Android 工程下的
/assets/www 位置
</li>
<li>将 SuperMap iClient 8C(2017) for JavaScript 开发包中 resource/PhoneGap/libs 文件夹中的armeabi文件夹以及
cordova-2.5.0.jar、locSDK_3.1.jar、SMCore.jar 和 SMPlugins.jar 拷贝至 Android 工程下的 /libs 位置
</li>
<li>添加 jar 包（cordova-2.5.0.jar、locSDK_3.1.jar、SMCore 和 SMPlugins）到 Android 工程中<br/>
<div class="pageImage"><img src="./images/buildPath.png"/></div>
</li>
<li>将 SuperMap iClient 8C(2017) for JavaScript 开发包中 resource/PhoneGap/res 文件夹中的 xml 文件夹拷贝至 Android 工程下的 /res 位置
</li>
<li>将 SuperMap iClient 8C(2017) for JavaScript 开发包中的 resource/PhoneGap/res 文件夹中的 splash.png 拷贝至 Android 工程下的
/res/drawable-hdpi 位置
</li>
<li>修改 AndroidManifest.xml在Activity中加入<strong> android:windowSoftInputMode="adjustPan"
android:configChanges="orientation|keyboardHidden"</strong>属性
</li>
<li>修改 AndroidManifest.xml在application中加入<strong> android:name="com.supermap.plugins.Location"</strong></li>
<li>在application节点下增加代码
<div style="border-bottom: silver 1px solid; text-align: left; border-left: silver 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; max-height: 400px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px">
<div style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060"> </span>&lt;service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote" &gt;</pre>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060"> </span>&lt;/service&gt;</pre>
</div>
</div>
</li>
<li>修改 AndroidManifest.xml 权限，添加如下内容，修改代码访问权限
<br/>
<div style="border-bottom: silver 1px solid; text-align: left; border-left: silver 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; max-height: 400px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px"
id="codeSnippetWrapper">
<div style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"
id="codeSnippet">
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum1"> </span> &lt;supports-screens</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum2"> </span> android:largeScreens=<span
style="color: #006080">&quot;true&quot;</span></pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum3"> </span> android:normalScreens=<span
style="color: #006080">&quot;true&quot;</span></pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum4"> </span> android:smallScreens=<span
style="color: #006080">&quot;true&quot;</span></pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum5"> </span> android:resizeable=<span
style="color: #006080">&quot;true&quot;</span></pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum6"> </span> android:anyDensity=<span
style="color: #006080">&quot;true&quot;</span></pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum7"> </span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum8"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.CAMERA&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum9"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.VIBRATE&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum10"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.ACCESS_COARSE_LOCATION&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum11"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.ACCESS_FINE_LOCATION&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum12"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.ACCESS_LOCATION_EXTRA_COMMANDS&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum13"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.READ_PHONE_STATE&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum14"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.INTERNET&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum15"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.RECEIVE_SMS&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum16"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.RECORD_AUDIO&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum17"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.MODIFY_AUDIO_SETTINGS&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum18"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.READ_CONTACTS&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum19"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.WRITE_CONTACTS&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum20"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.WRITE_EXTERNAL_STORAGE&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum21"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.ACCESS_NETWORK_STATE&quot;</span> /&gt;</pre>
<!--CRLF-->
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum22"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.KILL_BACKGROUND_PROCESSES&quot;</span>/&gt;</pre>
<!--CRLF--></div>
<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: &#39;Courier New&#39;, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span
style="color: #606060" id="lnum23"> </span> &lt;uses-permission android:name=<span
style="color: #006080">&quot;android.permission.ACCESS_WIFI_STATE&quot;</span> /&gt;</pre>
<!--CRLF-->
</div>
<p>AndroidManifest.xml 文件内容最后效果如下图，注意红色框选区域的内容为我们所添加</p>
<div class="pageImage"><img src="./images/androidmanifest.png"/></div>
</li>
</ul>
</li>
<li>代码说明
<ul style="list-style-type:disc;">
<li>拷贝如下代码替换 SuperPhoneActivity.java 代码，可参考代码注释
<pre>
package com.supermap.javascript;
import org.apache.cordova.DroidGap;
import org.json.JSONException;
import android.app.ActivityManager;
import android.os.Bundle;
import com.supermap.RequestControl;
// 继承自PhoneGap的DroidGap类，实现WebView和WebKit的相互通信
public class SuperPhoneActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
// 加载clouddemo文件夹下的index页面
super.loadUrl("file:///android_asset/www/index.html", 5000);
try {
RequestControl.init(this);
} catch (JSONException e) {
e.printStackTrace();
}
}
// PhoneGap缺陷，需要再次强制退出，释放内存
public void onDestroy() {
finish();
super.onDestroy();
ActivityManager activityManger = (ActivityManager) this
.getSystemService(ACTIVITY_SERVICE);
try {
activityManger.restartPackage("com.supermap.javascript");
activityManger.restartPackage("com.supermap");
activityManger.restartPackage("com.supermap.plugins");
} catch (Exception e) {
System.out.println(e.getMessage());
}
System.exit(0);
}
}
</pre>
</li>
<li>index.html 代码说明，可参考代码注释
<pre>
// 等待加载PhoneGap，增加监听事件onDeviceReady
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap加载完毕后会调用此事件，用户在此进行初始化设置
function onDeviceReady() {
init();
}
function init() {
SuperMap.Util.setApp(true);
map = new SuperMap.Map("map", { controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.PanZoomBar(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})], units: "m"
});
layer = new SuperMap.Layer.CloudLayer();
markerLayer = new SuperMap.Layer.Markers("Markers");
map.addLayers([layer,markerLayer]);
map.setCenter(new SuperMap.LonLat(12957031.21685,4861858.2410885), 10);
}
</pre>
</li>
</ul>
</li>
<li>右键单击项目节点选择 Run As，然后点击 Android Application，bin 目录下生成 APK 文件并在指定模拟器上运行</li>
</ol>
<h2>三、离线缓存简介</h2>
<p>
SuperMap iClient 8C(2017) for JavaScript 支持 APP 应用离线缓存功能，提供离线图片缓存和离线MBTile缓存两种方式，默认状态下为离线图片缓存方式。
</p>
<p>
离线图片缓存主要由两部分组成，config 文件用来记录地图服务的配置属性，缓存数据则保存在移动设备中SDCard\SuperMap下以地图名命名的文件夹中。
</p>
<div class="pageImage"><img src="./images/localstorage.PNG"/></div>
<p>
如上图，逻辑部分仍然由 JavaScript 层面处理，Java 层面只负责下载图片的功能部分。当需要创建新的瓦块图片时，JS 已异步的方式向 Java 通信，
Java 将网络 Url 的图片以多线程的方式保存到本地，然后再以异步方式返回本地的 Image 路径，然后如下的逻辑不变，仍然由 JavaScript 来实现。
整个离线缓存采用边浏览边下载的策略，通过异步的方式在Java层下载缓存数据，不会影响用户体验。
</p>
<p>
离线MBTile缓存也由两部分组成，index文件用来记录地图服务的配置属性，MBTile缓存数据则直接放在移动设备中SDCard\SuperMap下即可。其中MBTile文件可通过iserver的预缓存功能获取，index文件下的服务配置如下图所示：
</p>
<pre>
/*
* 服务的名称"world"必须和MBTile文件的名称相同;
* 实例化服务的时候必须增加"storageType"属性，并将该属性的值设为"db"（若将该值设为"File"则表示使用离线图片缓存方式）。
*/
layer = new SuperMap.Layer.TiledDynamicRESTLayer(<span style="color:red">"world"</span>,
url,
{transparent:true,cacheEnabled:true},
{maxResolution:"auto",<span style="color:red">"storageType":"db"</span>});
</pre>
<h2>四、示例效果图的展示</h2>
<p>
通过上面的示例，我们就可以快捷的基于已有的 Web 技术，快速生成带有离线缓存功能的地图应用，
在这基础上，你可以通过 SuperMap iClient 8C(2017) for JavaScript 提供的脚本，实现查询，绘制等地图展现，
通过 SuperMap iServer 的 REST 服务进行地图网络分析，叠加分析等地图分析，也可以通过调用系统接口来实现 GPS 定位，天气查询等地图服务，
这样，你就可以定制化的实现你期望的丰富的移动地图应用。
<div class="pageImage"><img src="./images/demo.png"/></div>
</p>
</div>
<div class='footer'>
<p>版权所有&nbsp;&copy; 2000-2016 &nbsp;北京超图软件股份有限公司</p>
</div>
</div>
<script src='./js/jquery.js'></script>
<script src='./js/bootstrap.js'></script>
<script src="./js/navbar.js"></script>
<script src="./js/GoTop.js" id="js_gotop"></script>
</body>
</html>