GL 地图瓦片使用指南

1、概述：

      矢量地图切片是近几年新兴的一种切片技术。其原理是使用矢量数据建立一个多分辨率层次的金字塔模型。根据地图所需的缩放级别，确定最大、最小切图比例尺，从金字塔的底层到顶层依序进行切图，虽然分辨率由下到上越来越低，但表示的地理位置不变。由于其方便缓存，读取速度快等特点，现已被越来越多的地图服务所应用。

      GL 地图瓦片（包）是超图移动 GIS 开发平台 SuperMap iMobile（以下简称 iMobile）在9D 版本新推出的功能，为了借助 OpenGL 的硬件加速功能，把矢量数据准备为 OpenGL 能批处理的数据，整批快速显示，将地图浏览性能提升百倍以上，让地图在移动端的操作无卡顿、更流畅。此外，基于矢量数据在客户端进行渲染，解决了栅格瓦片因为分辨率固定造成的显示不清晰问题，尤其在高性能的显示设备上，矢量切片能够比栅格切片表现出更好的效果。

      目前，iMobile 提供在线和离线两种方式应用 GL 地图瓦片,在实际的应用中，用户可根据具体情况，选择最适合的方式。本文档将从 GL 地图瓦片优点特性、数据制作和功能实现三个方面，介绍如何在移动端加载使用 GL 地图瓦片，体验移动端畅快的地图浏览。

2、优点介绍

2.1 相对于栅格瓦片的优点

      GL 地图瓦片（包）是 iMobile 9D 中新推出的功能，并在 v901 版本中做了优化。该技术用于批量处理矢量数据，生成矢量瓦片。虽然传统的栅格瓦片技术相对于矢量瓦片发展较成熟，但是由于其占用空间过大，无法完成交互显示、不方便在移动设备上应用等问题，近年来，该技术已逐渐被矢量瓦片所取代。iMobile 9D 版本中的 GL 地图瓦片功能应运而生。新增的 GL 地图瓦片功能，将瓦片服务的高效和矢量地图的灵活结合在一起，与传统的栅格瓦片相比，体积更小、切图速度更快，显示效果更好，大幅提升了移动端地图的浏览性能，提高了工作的可能性和有效性。

2.2 SuperMap GL 地图瓦片包的特点

      作为近年来新兴的切片技术，目前，市场上的矢量切片工具为数不多。相比之下，GL地图瓦片包由于使用了 OpenGL 显示引擎，具有渲染速度快，体积占用小等特点，在地图显示的效果和速度上都具有绝对的优势。在 iMobile 9D v901 版中，GL 地图瓦片包新增紧凑型切图方式，这解决了离散型数据复制到移动端时耗时过多、占用空间过大的问题，为数据在移动端离线应用的加载和传输大大节省了时间和空间。在加载使用过程中，SuperMap 提供多种操作简单的加载调用方式，用户可以根据实际情况及使用特点选择适合的应用方式，以实现移动端的地图显示。

      接下来就为您详细介绍 GL 地图瓦片的使用流程。

3、数据制作：

      数据制作是使用 GL 地图瓦片的第一步，用到的工具是超图桌面软件 SuperMap iDesktop（以下简称 iDesktop） 9D v901 版本（目前，仅 9D 及更高版本支持）。（注意：GL 地图瓦片不支持平面坐标系的地图数据。）
3.1 数据结构

用户数据集：用户用来制作地图的各种源数据集，包括点、线、面等类型。

范围数据集：用来定义瓦片范围的面数据集。数据制作时，范围数据集应根据实际需要而定，它的大小决定了切图范围的大小。范围数据集过小，容易造成信息显示不全，范围过大，会使切图时间过长。数据集中必须包含且仅包含一个面数据，此项是正确制作 GL 地图瓦片数据的基础，需要特别注意。

地图数据：包含各种风格的地图数据，作为切图数据，是切图的基础，应至少包含一张地图。

3.2 数据制作

3.2.1切图过程展示

      在iDesktop 中按照上述格式加载源数据集，配置并生成地图，保存该工作空间。在进行切图之前，应先关闭该工作空间，否则在打开数据源时会出现占用冲突。关闭工作空间后，在菜单栏选择【数据】——【地图制图】——【地图缓存】——【矢量切片】选项，弹出如下所示对话框。在该对话框内选择想要进行切图的工作空间、地图和范围数据集，并设置合适的切图比例尺、数据类型和切图线程等，如下图所示：

      通常情况下，切图比例尺每增大一级，生成文件会多 4 倍，切图时间也会相应增长，因此要谨慎选择最大比例尺，即：ending scale。除此之外，切图线程数也会影响切图速度，线程数越大，切图越快，但是具体数字需要根据电脑性能而定。在 iDesktop v901 版本中，还新增了数据类型选项，用户可以根据需要选择离散型或紧凑型。离散型数据是将切得的每一个瓦片单独生成一个.dat 文件，该数据类型便于单张地图瓦片的加载和使用，适应于在线数据使用场景；而紧凑型数据则是将生成的所有地图瓦片合并生成一个.dat 文件和一个*.idx 文件，这种数据类型便于移动端的离线加载使用，具体切图结果对比将在下一小节展示。

      根据上述提示选择相应的内容后，点击“Start”按钮，耐心等待切图完成即可。

      此外，iMobile 不仅可以支持独立的 GL 地图瓦片数据加载和显示，还支持多个 GL 地图瓦片数据组合使用，根据地图位置和比例尺显示，显示不同数据包相应比例尺的显示内容。

      如在北京地图的基础上，添加海淀、朝阳的数据内容，iMobile 会随着比例尺的放大，显示内容从北京的基本地图过渡到海淀、朝阳等区的详细内容，实现多 GL 地图瓦片组合效果。在数据制作时，需要注意以下几点：

1、GL 地图瓦片存储路径必须相同，且与基本地图相同。

2、区域名称用来区分不同的数据内容，应设置不同名称。

3、瓦片数据名称必须相同，且与基本地图相同。

3.2.2 切图成果展示

      如上图所示，切图后的文件会保存在 VectorCache 文件夹内，里面包含四个符号库文件，一个 VectorCache.index，一个 VectorCache.xml 和一个文件夹，其中，文件夹内存储的是该范围数据集内所切得的瓦片。

      与单组切图结果不同的是，由于不同级别的 GL 地图瓦片存储路径必须相同，多组 GL 地图瓦片的数据文件夹中会同时包含不同区域的切图结果，如 beijing、Chaoyang、Haidian的文件夹，具体结构示例对比如下：

      另外值得注意的是，选择不同的切图数据类型，会生成不同的 VectorCache 文件夹，对于同样是 5-16 级的同一范围数据集的数据，紧凑型和离散型的切图结果对比如下图所示：

4、功能实现：

      所生成瓦片在移动端的加载和使用是该技术的主要目的。通过 iDesktop 所制作生成的GL 地图瓦片数据，可以通过离线和在线两种方法在移动端进行调用，调用后的数据可以实现移动端的浏览和缩放。

4.1 离线应用

      在离线应用前，应先将电脑与移动设备连接，将 GL 地图瓦片数据（生成的 VectorCache
文件夹）复制到移动设备中。由于离散型切图方式生成的文件过多，会存在复制时间长和占用空间大的问题，因此在离线应用中，建议使用紧凑型切图方式，这种数据类型会大大减少数据传输所需要的时间和数据在移动端所占用的内存，而且对数据在移动端的显示效果没有影响。

      为实现 GL 地图瓦片离线功能，需要用到的 jar 包为：iMobile vv901 版产品包中的 com.supermap.data_v901.jar 和 com.supermap.mapping_v901.jar ， 其 中 com.supermap.data_v901.jar 为核心数据模块，com.supermap.mapping_v901.jar 为地图显示模块。同时，获取 iMobile 产品包中的 libs 文件夹下的 armeabi，并将其加入工程。参照以下代码，实现移动端 GL 地图瓦片的打开和浏览操作。

				
						public
						 class MainActivity extends Activity {
						@Override
						protected
						void
						onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

Environment.initialization(this); //组件功能在 Environment 初始化后才能调用 setContentView(R.layout.activity_main);

String sdcard = android.os.Environment.getExternalStorageDirectory().getAbsolutePath();

Environment.setLicensePath(sdcard + "/SuperMap/license/"); //设置许可文件路径 Environment.setOpenGLMode(false);//将地图显示控件和工作空间关联

Workspace mWorkspace = new Workspace();

MapControl mMapControl = ((MapView) findViewById(R.id.mapView)).getMapControl();

Map mMap = mMapControl.getMap(); //获取在地图控件中显示的地图对象 mMap.setWorkspace(mWorkspace); //设置当前地图所关联的工作空间
DatasourceConnectionInfo dsInfo = new DatasourceConnectionInfo();

dsInfo.setServer(sdcard + "/SampleData/VectorCache/VectorCache.xml");

dsInfo.setEngineType(EngineType.OpenGLCache); dsInfo.setAlias("VectorCache");

Datasource ds = mWorkspace.getDatasources().open(dsInfo);

if (ds == null) { // GL 地图瓦片打开失败return;

}

System.out.println("left: " + ds.getDatasets().get(0).getBounds().getLeft() + ", right: " + ds.getDatasets().get(0).getBounds().getRight());

//把 GL 地图瓦片数据集添加到地图中，地图显示范围可在 iDesktop 中，通过地

图属性查看

mMap.getLayers().add(ds.getDatasets().get(0), true); Rectangle2D rect2D = new Rectangle2D(); rect2D.setLeft(116.025801951286); rect2D.setBottom(39.5586126386228); rect2D.setRight(116.745528664492); rect2D.setTop(40.3226302264876); mMap.setViewBounds(rect2D);

mMap.refresh();

}

}
		

显示结果如下图所示：

4.2 在线应用

      在在线应用时，SuperMap 提供两种在线应用方式，对接 SuperMap iServer 和对接SuperMap Online。

4.2.1 对接 SuperMap iServer

      利用 SuperMap iServer，将 GL 地图瓦片数据发布成服务，以实现移动端在线加载。具体操作步骤包括配置 iServer 环境、发布 iServer 服务、验证服务和移动端加载数据四步。

4.2.1.1 配置 iServer 环境（如果已下载，请忽略此步骤）

      配置 iServer 环境是通过对接 SuperMap iServer 实现在线应用的第一步。首先应下载并解压 SuperMap iServer 9D。解压后的文件夹目录结构如下图所示：（下载地址：http://support.supermap.com.cn/DownloadCenter/ProductPlatform.aspx）

之后，需要将所需文件复制到相应文件夹内：
      复制 OpenGLTileExtent.jar 文件：将文件“OpenGLTileExtent.jar”复制到 iServer 的安装路径“.. \webapps\iserver\WEB-INF\lib”目录下。

      复制数据：在路径“.. \webapps\iserver\output”目录下，新建一个名为“GLMapTile”的文件夹，将生成的 GL 地图瓦片数据复制到该文件夹下，也就是复制到“..\webapps\iserver\output\GLMapTile\”目录下，值得注意的是，GL 地图瓦片数据所在文件夹“VectorCache”名称不可改变，如下图所示：

至此，iServer 环境配置完毕。

4.2.1.2发布 iServer 服务

      配置环境完成后，需要将地图瓦片数据以服务的形式发布。在这一步中，运行“..\supermap-iserver-v901-win64-zip\bin”路径下的“startup.bat”文件，启动 iServer 服务。启动成功后不要关闭该窗口，直到数据能够成功在移动端进行显示。

4.2.1.3 验证服务

      iServer 服务启动完成后，需要通过如下地址访问数据，以验证数据服务是否发布成功（推荐 ie 浏览器）。访问地址的格式如下所示：

请求单张底图瓦片：http://本机 IP 地址:端口号/iserver/services/地图服务名称/OpenGLTile/MapTile.GLData?z=级别&x=行号&y=列号&poi=false

请求单张 POI 瓦片：http://本机 IP 地址:端口号/iserver/services/地图服务名称/OpenGLTile/MapTile.GLData?z=级别&x=行号&y=列号&poi=true

请求配置文件：请求配置文件：http://本机 IP 地址:端口号/iserver/services/地图服务名称/OpenGLTile/ Confige.GLData?type=1

      其中，“地图服务名称”需要通过输入 http://本机 IP 地址:端口号/iserver/services，在iServer 中查看。若没有 iServer 管理员账户，需先注册账户，注册步骤包括创建管理员账户、检查系统环境、检查许可信息和配置示范服务四步，注册成功后登录方可查看。

      登录成功后的界面如下所示，并任意选取一个 rest 地图服务作为地图服务名称（注意：请完全按照地图服务列表中的名称填写，区分大小写）：

      访问地址中的“级别”、“行号”、“列号”均来自请求的瓦片文件名。例如下载名称为“16-1145-6734.dat”的单张瓦片，16 为级别，1145 为行号，6734 为列号。
      按照上述格式，在浏览器中输入访问地址http://192.168.12.7:8090/iserver/services/map-Population/rest/OpenGLTile/MapTile.GLData?z=16&x=1145&y=6734&poi=false，若出现下图所示界面之一，则代表服务已发布成功。

4.2.1.4 移动端加载数据

      GL 地图瓦片在线应用时，可以通过监听，实现数据下载。数据下载到本地后，直接使用已下载的数据将不会再请求服务器，提升了使用效率。
      在 移 动 端 实 现 功 能 需 要 添 加 的 库 包 括 ： com.supermap.data_v901.jar 、com.supermap.mapping_v901.jar、com.supermap.tileserver.jar、 httpmime-4.1.1.jar ，其中， com.supermap.data.jar 、 com.supermap.mapping.jar 库在产品包中的 libs 文件夹下，com.supermap.tileserver.jar、httpmime-4.1.1.jar 在产品包中。并参照以下代码，实现数据在移动端的在线加载：

				
						public
						class VectorCache extends Activity {

privatefinal String sdcard = android.os.Environment.getExternalStorageDirectory().getAbsolutePath();

@Overrideprotectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

//设置一些系统需要用到的路径

Environment.setLicensePath(sdcard+"/SuperMap/license/");

//在 onCreate 中调用初始化方法，否则组件功能不能正常

Environment.initialization(this); setContentView(R.layout.activity_main);

String m_strDataPath = sdcard+"/SuperMap/data/VectorCache/";//缓存数据路径//将地图显示控件与工作空间关联

Workspace mWorkspace = new Workspace();

MapView mMapView = (MapView)findViewById(R.id.mapView); MapControl mMapControl = mMapView.getMapControl();

Map mMap = mMapControl.getMap(); mMap.setWorkspace(mWorkspace);

//传入数据服务地址，在线加载数据

OnlineTileServer    mOnlineTileServer   =   new

OnlineTileServer(mMapControl,"http://192.168.12.7:8090/iserver/services/map-Population/re st/OpenGLTile", m_strDataPath);

//以数据源的方式打开 GL 地图瓦片数据
DatasourceConnectionInfo dsInfo = new DatasourceConnectionInfo(); dsInfo.setEngineType(EngineType.OpenGLCache); dsInfo.setAlias("VectorCache");

Datasource ds = mWorkspace.getDatasources().open(dsInfo); if (ds == null) {

return; // GL 地图瓦片打开失败

}

// 把 GL 地图瓦片数据集添加到地图中 mMap.getLayers().add(ds.getDatasets().get(0), true); mMap.setScale(1/4622333.67897759); // 设置显示比例尺（第 7 级）

mMap.setCenter(new Point2D(12957168, 4854184)); //设置地图中心点（北京地区）

}

//用于实现在线数据加载和缓存publicclass OnlineTileServer implements DownloadConfigeListener, DownloadTileListener { MapControl mMapControl = null;

DownloadTile mDownloadTile = null; GLCacheFile mGLCacheFile = new GLCacheFile(); Boolean bOpen = false;

DownloadConfige mDownloadConfige = null; OnlineTileServer(MapControl mapControl, String URI, String cachePath){

mMapControl = mapControl;

mDownloadTile = new DownloadTile(URI+"/MapTile.GLData", cachePath); mDownloadTile.setDownloadTileListener(this);

mDownloadConfige = new DownloadConfige(URI+"/Confige.GLData", cachePath); mDownloadConfige.setDownloadConfigeListener(this);

mMapControl.setBeforMapDrawListener(new BeforMapDrawListener(){ @Overridepublicvoid beforMapDrawCallback(int nLevel, int nStartRow,

int nEndRow,    int nStartCol,  int

nEndCol) {

if (!bOpen) {

return;

}

System.out.println("Scale: " + nLevel + "-" + nStartRow + "-" + nEndRow + "-" + nStartCol + "-" + nEndCol);

for (int i = nStartRow; i <= nEndRow; i++) { for (int j = nStartCol; j <= nEndCol; j++) {

File f = new File(mGLCacheFile.getTilePath(nLevel, i, j)); if (!f.exists()) {

System.out.println(f); mDownloadTile.downloadTile(i, j, nLevel);

}

}

}
}

}); mMapControl.getMap().getWorkspace().setAfterDatasourceOpenListener(new

AfterDatasourceOpenListener(){

@Overridepublicvoid AfterDatasourceOpen(DatasourceConnectionInfo info) { String str = mGLCacheFile.GetCacheFile(info);

File file = new File(str); if (file.exists()) {

mGLCacheFile.fromCacheFile(str); System.out.println("ConnectionInfo(file.exists): " + str); bOpen = true;

}

else { mDownloadConfige.downloadConfige(info.getAlias());

}

}

});

}

@Overridepublicvoid downloadTileFinished(int x, int y, int z, Boolean poi) { mMapControl.getMap().refresh();

}

@Overridepublicvoid downloadConfigeFinished(String filePath, String datasourceAlias) { mGLCacheFile.fromCacheFile(filePath); System.out.println("ConnectionInfo(file.download): " + filePath);

mMapControl.getMap().getWorkspace().getDatasources().get(datasourceAlias).getDatasets().get( 0).open();

bOpen = true;

}

}

}
		

4.2.2 对接 SuperMap Online

      除此之外，我们还在 SuperMap Online 上，部署了全国及十大城市（北京、上海、广州、成都、西安、杭州、沈阳、呼和浩特、长沙、郑州）的 GL 地图瓦片示范数据，可以在移动端加载使用。地址为：https://www.supermapol.com/iserver/services/map-china_glvectortile/rest/OpenGLTile
      应用实现方法与 iServer 基本一致，区别在于，传入参数为 Online 中的数据地址：

				
						//传入数据服务地址，在线加载数据

OnlineTileServer mOnlineTileServer = new OnlineTileServer(mMapControl,

"https://www.supermapol.com/iserver/services/map-china_glvectortile/rest/OpenGLTile",

m_strDataPath);
		

上一篇：SuperMap GIS 9D SP1学习视频播单

下一篇：超图信息通过CMMI L5评估

相关资源

1. 宋关福：GIS软件技术四大升维带来全新应用价值
2. GIS技术升维，赋能军事应用再上新台阶
3. 郭仁忠院士：GIS是智慧城市的操作系统
4. 深圳大学与超图集团签订智慧城市操作系统研发合作协议
5. 2018 GIS 软件技术大会倒计时6天
6. 国际政府考察团赴超图调研