<!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>