373 lines
30 KiB
HTML
373 lines
30 KiB
HTML
<!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: 'Courier New', 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: 'Courier New', 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: 'Courier New', 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><service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote" ></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: 'Courier New', 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></service></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: 'Courier New', 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: 'Courier New', 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: 'Courier New', 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> <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: 'Courier New', 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">"true"</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: 'Courier New', 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">"true"</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: 'Courier New', 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">"true"</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: 'Courier New', 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">"true"</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: 'Courier New', 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">"true"</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: 'Courier New', 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> /></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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.CAMERA"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.VIBRATE"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.ACCESS_COARSE_LOCATION"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.ACCESS_FINE_LOCATION"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.READ_PHONE_STATE"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.INTERNET"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.RECEIVE_SMS"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.RECORD_AUDIO"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.MODIFY_AUDIO_SETTINGS"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.READ_CONTACTS"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.WRITE_CONTACTS"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.WRITE_EXTERNAL_STORAGE"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.ACCESS_NETWORK_STATE"</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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.KILL_BACKGROUND_PROCESSES"</span>/></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: 'Courier New', 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> <uses-permission android:name=<span
|
||
style="color: #006080">"android.permission.ACCESS_WIFI_STATE"</span> /></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>版权所有 © 2000-2016 北京超图软件股份有限公司</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>
|