Главная Обзор Помощь
Регистрация Вход
fuyuhang
/
Project_yhfu
зеркало из http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git
Следить 1
В избранное 0
Ответвить 0
Файлы Обсуждения 0 Вики
Ветка: visu_environment_tongyu1.1
Ветки Метки
Project_yhfu
/
public
/
supermap
/
libs
/
iclient8c
/
examples
/
mobileTopic.html

mobileTopic.html 30 KB
Постоянная ссылка История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    6. 

  6.     <meta name="apple-mobile-web-app-capable" content="yes"/>
    7. 

  7.     <title>离线缓存与 APP 专题</title>
    8. 

  8.     <link href='./css/bootstrap.min.css' rel='stylesheet'/>
    9. 

  9.     <link href='./css/bootstrap-responsive.min.css' rel='stylesheet'/>
    10. 

  10.     <link href='./css/sm-extend.css' rel='stylesheet'/>
    11. 

  11.     <link href='./css/sm-doc.css' rel='stylesheet'/>
    12. 

  12. </head>
    13. 

  13. <body data-spy="scroll" data-target=".subnav" data-offset="50">
    14. 

  14. <!--导航条-->
    15. 

  15. <div class="navbar navbar-fixed-top" id="navbar">
    16. 

  16. 

  17. </div>
    18. 

  18. <div id='container' class='container'>
    19. 

  19. <div class='page-header'>
    20. 

  20. <h1>离线缓存与APP专题</h1>
    21. 

  21. <hr/>
    22. 

  22. <h2>一、SuperMap iClient for JavaScript 移动应用简介</h2>
    23. 

  23. 

  24. <div class="pageImage"><img src="./images/android.PNG"/></div>
    25. 

  25. <p>
    26. 

  26.     SuperMap iClient 8C(2017) for JavaScript 是一款在服务式 GIS 架构体系中，面向 HTML5 的应用开发，支持多终端，跨浏览器的客户端开发平台。
    27. 

  27.     通过 SuperMap iClient 8C(2017) for JavaScript，无需任何插件，便可以在浏览器上实现美观的地图展现，内容丰富的地图应用。
    28. 

  28. </p>
    29. 

  29. 

  30. <p>
    31. 

  31.     近些年来随着智能终端的迅速发展，LBS 应用的大众化普及，手机地图已经在日常生活中扮演着不可或缺的作用。
    32. 

  32.     相比传统的 PC 端地图应用，手机地图的应用具有便于携带、
    33. 

  33.     便于操作、不受空间约束等优势，移动终端这些全新的用户体验是也是传统 PC 所无法媲美。正是在这种背景下，
    34. 

  34.     SuperMap iClient 8C(2017) for JavaScript 提供了对手机平台的扩展支持。
    35. 

  35. </p>
    36. 

  36. 

  37. <p>
    38. 

  38.     SuperMap iClient 8C(2017) for JavaScript 提供的 APP 应用插件，
    39. 

  39.     在技术上采用 PhoneGap 开源开发框架，针对 PhoneGap 进行了代码兼容和优化，
    40. 

  40.     并实现了地图离线缓存的插件化支持。通过 SuperMap iClient 8C(2017) for JavaScript 开发平台，
    41. 

  41.     你可以通过 HTML，CSS 和 JavaScript 技术构建出基于浏览器的地图应用；通过 PhoneGap 开发框架，你可以将已有的地图应用直接打包生成支持 Android 的应用程序，
    42. 

  42.     并且可以调用系统级别的功能来丰富应用；通过 SuperMap iClient 8C(2017) for JavaScript 提供的 APP 应用插件，地图应用具备离线缓存的功能，满足用户在离线状态下的地图应用。 这样，
    43. 

  43.     Web 开发人员利用已有的技术储备，不需要太多的额外学习成本就可以快速的开发出自己的地图 APP 应用。
    44. 

  44.     该开发模式具有如下一些特点：
    45. 

  45. </p>
    46. 

  46. 

  47. <p>
    48. 

  48. <ul style="list-style-type:disc;">
    49. 

  49.     <li>APP应用摆脱浏览器的束缚，提供定制化的地图应用，具有较好的用户体验</li>
    50. 

  50.     <li>利用已有的Web技术，不需要考虑繁杂的底层技术</li>
    51. 

  51.     <li>支持多种手机平台</li>
    52. 

  52.     <li>支持通过 js 调用系统级接口，比如摄像头，GPS 等</li>
    53. 

  53.     <li>支持地图离线缓存</li>
    54. 

  54. </ul>
    55. 

  55. </p>
    56. 

  56. <h2>二、SuperMap JavaScript for Android APP 入门简介</h2>
    57. 

  57. 

  58. <p>
    59. 

  59.     该文档介绍了基于SuperMap iClient 8C(2017) for JavaScript 开发平台生成的的地图应用，如何生成 Android 的应用程序的完整教程，
    60. 

  60.     该地图应用具备地图浏览，缩放，离线缓存等基本功能，用户可以在此基础上增加自己的业务需求，
    61. 

  61.     丰富地图应用。该示例在开发包范例中可以获取。
    62. 

  62. </p>
    63. 

  63. <ol>
    64. 

  64. <li>安装 SDK，安装开发环境
    65. 

  65.     <ul style="list-style-type:disc;">
    66. 

  66.         <li>下载并解压 <a target="new" href="http://www.supermap.com.cn/sup/download_view.asp?id=578&bid=1">SuperMap
    67. 

  67.             iClient 8C(2017) for JavaScript</a></li>
    68. 

  68.         <li>下载并安装 <a target="new" href="http://www.eclipse.org/downloads/">Eclipse Classic</a></li>
    69. 

  69.         <li>下载并安装 <a target="new" href="http://developer.android.com/sdk/index.html">Android SDK</a></li>
    70. 

  70.         <li>下载并安装 <a target="new" href="http://developer.android.com/sdk/eclipse-adt.html#installing">ADT Plugin</a>
    71. 

  71.         </li>
    72. 

  72.     </ul>
    73. 

  73. </li>
    74. 

  74. 

  75. <li>Android工程创建
    76. 

  76.     <ul style="list-style-type:disc;">
    77. 

  77.         <li>打开Eclipse，新建Android工程，如下图（Application Name: SuperPhone、Package Name: com.supermap.javascript、Create
    78. 

  78.             Activity: SuperPhoneActivity），点击Finish完成（备注：因为Eclipse版本不同，新建工程的布局可能会略有不同）<br/>
    79. 

  79. 

  80.             <div class="pageImage"><img src="./images/new project.png"/></div>
    81. 

  81.         </li>
    82. 

  82.         <li>Android 工程下新建文件夹: /assets/www 及 /libs</li>
    83. 

  83.         <li>将 SuperMap iClient 8C(2017) for JavaScript 开发包中的 resource/PhoneGap/clouddemo文件夹中的内容拷贝至 Android 工程下的
    84. 

  84.             /assets/www 位置
    85. 

  85.         </li>
    86. 

  86.         <li>将 SuperMap iClient 8C(2017) for JavaScript 开发包中 resource/PhoneGap/libs 文件夹中的armeabi文件夹以及
    87. 

  87.             cordova-2.5.0.jar、locSDK_3.1.jar、SMCore.jar 和 SMPlugins.jar 拷贝至 Android 工程下的 /libs 位置
    88. 

  88.         </li>
    89. 

  89.         <li>添加 jar 包（cordova-2.5.0.jar、locSDK_3.1.jar、SMCore 和 SMPlugins）到 Android 工程中<br/>
    90. 

  90. 

  91.             <div class="pageImage"><img src="./images/buildPath.png"/></div>
    92. 

  92.         </li>
    93. 

  93.         <li>将 SuperMap iClient 8C(2017) for JavaScript 开发包中 resource/PhoneGap/res 文件夹中的 xml 文件夹拷贝至 Android 工程下的 /res 位置
    94. 

  94.         </li>
    95. 

  95.         <li>将 SuperMap iClient 8C(2017) for JavaScript 开发包中的 resource/PhoneGap/res 文件夹中的 splash.png 拷贝至 Android 工程下的
    96. 

  96.             /res/drawable-hdpi 位置
    97. 

  97.         </li>
    98. 

  98.         <li>修改 AndroidManifest.xml在Activity中加入<strong> android:windowSoftInputMode="adjustPan"
    99. 

  99.             android:configChanges="orientation|keyboardHidden"</strong>属性
    100. 

  100.         </li>
    101. 

  101.         <li>修改 AndroidManifest.xml在application中加入<strong> android:name="com.supermap.plugins.Location"</strong></li>
    102. 

  102.         <li>在application节点下增加代码
    103. 

  103.             <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">
    104. 

  104.                 <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">
    105. 

  105.                         <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
    106. 

  106.                                 style="color: #606060">   </span>&lt;service android:name="com.baidu.location.f" android:enabled="true" android:process=":remote" &gt;</pre>
    107. 

  107.                        <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
    108. 

  108.                                style="color: #606060">   </span>&lt;/service&gt;</pre>
    109. 

  109.                 </div>
    110. 

  110.             </div>
    111. 

  111.         </li>
    112. 

  112.         <li>修改 AndroidManifest.xml 权限，添加如下内容，修改代码访问权限
    113. 

  113.             <br/>
    114. 

  114. 

  115.             <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"
    116. 

  116.                  id="codeSnippetWrapper">
    117. 

  117.                 <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"
    118. 

  118.                      id="codeSnippet">
    119. 

  119.                         <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
    120. 

  120.                                 style="color: #606060" id="lnum1">   </span> &lt;supports-screens</pre>
    121. 

  121.                     <!--CRLF-->
    122. 

  122. 

  123.                         <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
    124. 

  124.                                 style="color: #606060" id="lnum2">   </span> android:largeScreens=<span
    125. 

  125.                                 style="color: #006080">&quot;true&quot;</span></pre>
    126. 

  126.                     <!--CRLF-->
    127. 

  127. 

  128.                         <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
    129. 

  129.                                 style="color: #606060" id="lnum3">   </span> android:normalScreens=<span
    130. 

  130.                                 style="color: #006080">&quot;true&quot;</span></pre>
    131. 

  131.                     <!--CRLF-->
    132. 

  132. 

  133.                         <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
    134. 

  134.                                 style="color: #606060" id="lnum4">   </span> android:smallScreens=<span
    135. 

  135.                                 style="color: #006080">&quot;true&quot;</span></pre>
    136. 

  136.                     <!--CRLF-->
    137. 

  137. 

  138.                         <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
    139. 

  139.                                 style="color: #606060" id="lnum5">   </span> android:resizeable=<span
    140. 

  140.                                 style="color: #006080">&quot;true&quot;</span></pre>
    141. 

  141.                     <!--CRLF-->
    142. 

  142. 

  143.                         <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
    144. 

  144.                                 style="color: #606060" id="lnum6">   </span> android:anyDensity=<span
    145. 

  145.                                 style="color: #006080">&quot;true&quot;</span></pre>
    146. 

  146.                     <!--CRLF-->
    147. 

  147. 

  148.                         <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
    149. 

  149.                                 style="color: #606060" id="lnum7">   </span> /&gt;</pre>
    150. 

  150.                     <!--CRLF-->
    151. 

  151. 

  152.                         <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
    153. 

  153.                                 style="color: #606060" id="lnum8">   </span> &lt;uses-permission android:name=<span
    154. 

  154.                                 style="color: #006080">&quot;android.permission.CAMERA&quot;</span> /&gt;</pre>
    155. 

  155.                     <!--CRLF-->
    156. 

  156. 

  157.                         <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
    158. 

  158.                                 style="color: #606060" id="lnum9">   </span> &lt;uses-permission android:name=<span
    159. 

  159.                                 style="color: #006080">&quot;android.permission.VIBRATE&quot;</span> /&gt;</pre>
    160. 

  160.                     <!--CRLF-->
    161. 

  161. 

  162.                         <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
    163. 

  163.                                 style="color: #606060" id="lnum10">   </span> &lt;uses-permission android:name=<span
    164. 

  164.                                 style="color: #006080">&quot;android.permission.ACCESS_COARSE_LOCATION&quot;</span> /&gt;</pre>
    165. 

  165.                     <!--CRLF-->
    166. 

  166. 

  167.                         <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
    168. 

  168.                                 style="color: #606060" id="lnum11">   </span> &lt;uses-permission android:name=<span
    169. 

  169.                                 style="color: #006080">&quot;android.permission.ACCESS_FINE_LOCATION&quot;</span> /&gt;</pre>
    170. 

  170.                     <!--CRLF-->
    171. 

  171. 

  172.                         <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
    173. 

  173.                                 style="color: #606060" id="lnum12">   </span> &lt;uses-permission android:name=<span
    174. 

  174.                                 style="color: #006080">&quot;android.permission.ACCESS_LOCATION_EXTRA_COMMANDS&quot;</span> /&gt;</pre>
    175. 

  175.                     <!--CRLF-->
    176. 

  176. 

  177.                         <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
    178. 

  178.                                 style="color: #606060" id="lnum13">   </span> &lt;uses-permission android:name=<span
    179. 

  179.                                 style="color: #006080">&quot;android.permission.READ_PHONE_STATE&quot;</span> /&gt;</pre>
    180. 

  180.                     <!--CRLF-->
    181. 

  181. 

  182.                         <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
    183. 

  183.                                 style="color: #606060" id="lnum14">   </span> &lt;uses-permission android:name=<span
    184. 

  184.                                 style="color: #006080">&quot;android.permission.INTERNET&quot;</span> /&gt;</pre>
    185. 

  185.                     <!--CRLF-->
    186. 

  186. 

  187.                         <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
    188. 

  188.                                 style="color: #606060" id="lnum15">   </span> &lt;uses-permission android:name=<span
    189. 

  189.                                 style="color: #006080">&quot;android.permission.RECEIVE_SMS&quot;</span> /&gt;</pre>
    190. 

  190.                     <!--CRLF-->
    191. 

  191. 

  192.                         <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
    193. 

  193.                                 style="color: #606060" id="lnum16">   </span> &lt;uses-permission android:name=<span
    194. 

  194.                                 style="color: #006080">&quot;android.permission.RECORD_AUDIO&quot;</span> /&gt;</pre>
    195. 

  195.                     <!--CRLF-->
    196. 

  196. 

  197.                         <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
    198. 

  198.                                 style="color: #606060" id="lnum17">   </span> &lt;uses-permission android:name=<span
    199. 

  199.                                 style="color: #006080">&quot;android.permission.MODIFY_AUDIO_SETTINGS&quot;</span> /&gt;</pre>
    200. 

  200.                     <!--CRLF-->
    201. 

  201. 

  202.                         <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
    203. 

  203.                                 style="color: #606060" id="lnum18">   </span> &lt;uses-permission android:name=<span
    204. 

  204.                                 style="color: #006080">&quot;android.permission.READ_CONTACTS&quot;</span> /&gt;</pre>
    205. 

  205.                     <!--CRLF-->
    206. 

  206. 

  207.                         <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
    208. 

  208.                                 style="color: #606060" id="lnum19">   </span> &lt;uses-permission android:name=<span
    209. 

  209.                                 style="color: #006080">&quot;android.permission.WRITE_CONTACTS&quot;</span> /&gt;</pre>
    210. 

  210.                     <!--CRLF-->
    211. 

  211. 

  212.                         <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
    213. 

  213.                                 style="color: #606060" id="lnum20">   </span> &lt;uses-permission android:name=<span
    214. 

  214.                                 style="color: #006080">&quot;android.permission.WRITE_EXTERNAL_STORAGE&quot;</span> /&gt;</pre>
    215. 

  215.                     <!--CRLF-->
    216. 

  216. 

  217.                         <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
    218. 

  218.                                 style="color: #606060" id="lnum21">   </span> &lt;uses-permission android:name=<span
    219. 

  219.                                 style="color: #006080">&quot;android.permission.ACCESS_NETWORK_STATE&quot;</span> /&gt;</pre>
    220. 

  220.                     <!--CRLF-->
    221. 

  221. 

  222.                         <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
    223. 

  223.                                 style="color: #606060" id="lnum22">   </span> &lt;uses-permission android:name=<span
    224. 

  224.                                 style="color: #006080">&quot;android.permission.KILL_BACKGROUND_PROCESSES&quot;</span>/&gt;</pre>
    225. 

  225.                     <!--CRLF--></div>
    226. 

  226. 

  227.                     <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
    228. 

  228.                             style="color: #606060" id="lnum23">   </span> &lt;uses-permission android:name=<span
    229. 

  229.                             style="color: #006080">&quot;android.permission.ACCESS_WIFI_STATE&quot;</span> /&gt;</pre>
    230. 

  230.                 <!--CRLF-->
    231. 

  231. 

  232.             </div>
    233. 

  233.             <p>AndroidManifest.xml 文件内容最后效果如下图，注意红色框选区域的内容为我们所添加</p>
    234. 

  234. 

  235.             <div class="pageImage"><img src="./images/androidmanifest.png"/></div>
    236. 

  236.         </li>
    237. 

  237.     </ul>
    238. 

  238. </li>
    239. 

  239. <li>代码说明
    240. 

  240.     <ul style="list-style-type:disc;">
    241. 

  241.         <li>拷贝如下代码替换 SuperPhoneActivity.java 代码，可参考代码注释
    242. 

  242. <pre>
    243. 

  243. package com.supermap.javascript;
    244. 

  244. 

  245. import org.apache.cordova.DroidGap;
    246. 

  246. import org.json.JSONException;
    247. 

  247. 

  248. import android.app.ActivityManager;
    249. 

  249. import android.os.Bundle;
    250. 

  250. 

  251. import com.supermap.RequestControl;
    252. 

  252. 

  253. // 继承自PhoneGap的DroidGap类，实现WebView和WebKit的相互通信
    254. 

  254. public class SuperPhoneActivity extends DroidGap {
    255. 

  255. 	/** Called when the activity is first created. */
    256. 

  256. 	@Override
    257. 

  257. 	public void onCreate(Bundle savedInstanceState) {
    258. 

  258. 		super.onCreate(savedInstanceState);
    259. 

  259. 		super.setIntegerProperty("splashscreen", R.drawable.splash);
    260. 

  260. 

  261. 		// 加载clouddemo文件夹下的index页面
    262. 

  262. 		super.loadUrl("file:///android_asset/www/index.html", 5000);
    263. 

  263. 		try {
    264. 

  264. 			RequestControl.init(this);
    265. 

  265. 		} catch (JSONException e) {
    266. 

  266. 			e.printStackTrace();
    267. 

  267. 		}
    268. 

  268. 	}
    269. 

  269. 

  270. 	// PhoneGap缺陷，需要再次强制退出，释放内存
    271. 

  271. 	public void onDestroy() {
    272. 

  272. 		finish();
    273. 

  273. 		super.onDestroy();
    274. 

  274. 

  275. 		ActivityManager activityManger = (ActivityManager) this
    276. 

  276. 				.getSystemService(ACTIVITY_SERVICE);
    277. 

  277. 		try {
    278. 

  278. 			activityManger.restartPackage("com.supermap.javascript");
    279. 

  279. 			activityManger.restartPackage("com.supermap");
    280. 

  280. 			activityManger.restartPackage("com.supermap.plugins");
    281. 

  281. 		} catch (Exception e) {
    282. 

  282. 			System.out.println(e.getMessage());
    283. 

  283. 		}
    284. 

  284. 

  285. 		System.exit(0);
    286. 

  286. 	}
    287. 

  287. }
    288. 

  288. </pre>
    289. 

  289.         </li>
    290. 

  290.         <li>index.html 代码说明，可参考代码注释
    291. 

  291.                             <pre>
    292. 

  292. // 等待加载PhoneGap，增加监听事件onDeviceReady
    293. 

  293. document.addEventListener("deviceready", onDeviceReady, false);
    294. 

  294. 

  295. // PhoneGap加载完毕后会调用此事件，用户在此进行初始化设置
    296. 

  296. function onDeviceReady() {    
    297. 

  297.     init();
    298. 

  298. }
    299. 

  299. 

  300. function init() {
    301. 

  301.     SuperMap.Util.setApp(true);
    302. 

  302.     map = new SuperMap.Map("map", { controls: [
    303. 

  303.             new SuperMap.Control.ScaleLine(),
    304. 

  304.             new SuperMap.Control.PanZoomBar(),
    305. 

  305.             new SuperMap.Control.Navigation({
    306. 

  306.                 dragPanOptions: {
    307. 

  307.                     enableKinetic: true
    308. 

  308.                 }
    309. 

  309.             })], units: "m"
    310. 

  310.     });
    311. 

  311.     layer = new SuperMap.Layer.CloudLayer();
    312. 

  312.     markerLayer = new SuperMap.Layer.Markers("Markers");
    313. 

  313.     map.addLayers([layer,markerLayer]);
    314. 

  314.     map.setCenter(new SuperMap.LonLat(12957031.21685,4861858.2410885), 10);  
    315. 

  315. }
    316. 

  316.                             </pre>
    317. 

  317.         </li>
    318. 

  318.     </ul>
    319. 

  319. </li>
    320. 

  320. <li>右键单击项目节点选择 Run As，然后点击 Android Application，bin 目录下生成 APK 文件并在指定模拟器上运行</li>
    321. 

  321. </ol>
    322. 

  322. <h2>三、离线缓存简介</h2>
    323. 

  323. 

  324. <p>
    325. 

  325.     SuperMap iClient 8C(2017) for JavaScript 支持 APP 应用离线缓存功能，提供离线图片缓存和离线MBTile缓存两种方式，默认状态下为离线图片缓存方式。
    326. 

  326. </p>
    327. 

  327. 

  328. <p>
    329. 

  329.     离线图片缓存主要由两部分组成，config 文件用来记录地图服务的配置属性，缓存数据则保存在移动设备中SDCard\SuperMap下以地图名命名的文件夹中。
    330. 

  330. </p>
    331. 

  331. 

  332. <div class="pageImage"><img src="./images/localstorage.PNG"/></div>
    333. 

  333. <p>
    334. 

  334.     如上图，逻辑部分仍然由 JavaScript 层面处理，Java 层面只负责下载图片的功能部分。当需要创建新的瓦块图片时，JS 已异步的方式向 Java 通信，
    335. 

  335.     Java 将网络 Url 的图片以多线程的方式保存到本地，然后再以异步方式返回本地的 Image 路径，然后如下的逻辑不变，仍然由 JavaScript 来实现。
    336. 

  336.     整个离线缓存采用边浏览边下载的策略，通过异步的方式在Java层下载缓存数据，不会影响用户体验。
    337. 

  337. </p>
    338. 

  338. 

  339. <p>
    340. 

  340.     离线MBTile缓存也由两部分组成，index文件用来记录地图服务的配置属性，MBTile缓存数据则直接放在移动设备中SDCard\SuperMap下即可。其中MBTile文件可通过iserver的预缓存功能获取，index文件下的服务配置如下图所示：
    341. 

  341. </p>
    342. 

  342. 				<pre>
    343. 

  343. /*
    344. 

  344.  * 服务的名称"world"必须和MBTile文件的名称相同;
    345. 

  345.  * 实例化服务的时候必须增加"storageType"属性，并将该属性的值设为"db"（若将该值设为"File"则表示使用离线图片缓存方式）。
    346. 

  346.  */
    347. 

  347. layer = new SuperMap.Layer.TiledDynamicRESTLayer(<span style="color:red">"world"</span>,
    348. 

  348.                                                  url,	
    349. 

  349. 						 {transparent:true,cacheEnabled:true},	
    350. 

  350. 						 {maxResolution:"auto",<span style="color:red">"storageType":"db"</span>});	
    351. 

  351. 				</pre>
    352. 

  352. <h2>四、示例效果图的展示</h2>
    353. 

  353. 

  354. <p>
    355. 

  355.     通过上面的示例，我们就可以快捷的基于已有的 Web 技术，快速生成带有离线缓存功能的地图应用，
    356. 

  356.     在这基础上，你可以通过 SuperMap iClient 8C(2017) for JavaScript 提供的脚本，实现查询，绘制等地图展现，
    357. 

  357.     通过 SuperMap iServer 的 REST 服务进行地图网络分析，叠加分析等地图分析，也可以通过调用系统接口来实现 GPS 定位，天气查询等地图服务，
    358. 

  358.     这样，你就可以定制化的实现你期望的丰富的移动地图应用。
    359. 

  359. 

  360. <div class="pageImage"><img src="./images/demo.png"/></div>
    361. 

  361. </p>
    362. 

  362. </div>
    363. 

  363. <div class='footer'>
    364. 

  364.     <p>版权所有&nbsp;&copy; 2000-2016 &nbsp;北京超图软件股份有限公司</p>
    365. 

  365. </div>
    366. 

  366. </div>
    367. 

  367. <script src='./js/jquery.js'></script>
    368. 

  368. <script src='./js/bootstrap.js'></script>
    369. 

  369. <script src="./js/navbar.js"></script>
    370. 

  370. <script src="./js/GoTop.js" id="js_gotop"></script>
    371. 

  371. </body>
    372. 

  372. </html>
    373.