移动端加载MVT矢量瓦片

在SuperMap iMobile for Android 9D(2019)版本中,新增了加载MVT矢量瓦片的接口。矢量瓦片具有创建效率高、传输和渲染速度快、数据和风格样式独立,更改配图方案无需重新创建瓦片、高显示质量,能够很好地支持高分辨率显示屏等特点。这无疑是在移动端加载矢量数据的最佳切片方式。这篇文章将介绍在移动端加载离线和在线MVT数据。
一、数据制作:
  在SuperMap iDesktop 9D(2019)软件中制作好一幅地图并保存,然后右键地图节点–生成地图瓦片(单任务),设置生成瓦片类型为矢量瓦片,然后选择相应的比例尺、瓦片名称、路径,点击下一步。
在这里插入图片描述
  SuperMap的矢量瓦片使用全球剖分网格,像建金字塔的方式,对矢量地图数据进行分层分块,然后,使用 .mvt自定义文件格式存储分块内的数据描述信息,并生成瓦片风格文件,如图所示。
  在这里插入图片描述
二、离线加载MVT矢量瓦片
离线加载主要分为三步:
  1.生成MVT矢量瓦片:上面已经介绍了如何生成MVT矢量瓦片。
  2.将数据拷贝至移动设备中
  3.移动端加载数据:加载数据的关键代码如下:
在这里插入图片描述
  加载数据结果如下:
在这里插入图片描述
三、在线加载
在线加载也是分为三步完成:
  1.生成MVT矢量瓦片
  2.发布地图服务
  启动SuperMap iServer,选择快速发布然后选择UGCV5(MVT)瓦片,发布完后可以在前端预览。
在这里插入图片描述
  3在移动端加载的关键代码
在这里插入图片描述
  加载数据结果与上图一致。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Cesium是一款用于WebGIS的开源JavaScript库。它提供了强大的功能和高性能的地图渲染。而MVT矢量瓦片是一种数据格式,可以将原始矢量数据切割成小块,并使用矢量瓦片进行传输。 在Cesium中加载MVT矢量瓦片,需要完成以下几个步骤: 1.安装Cesium 2.将MVT矢量瓦片制作成瓦片数据,并将其存储在Web服务器上。 3.使用瓦片图层提供者创建MVT矢量矢量瓦片数据源。 4.使用瓦片图层提供者加载图层。 具体步骤如下: 第一步:安装Cesium 在开始导入MVT矢量瓦片之前,我们需要先安装Cesium库。可以通过以下方式来安装: 通过包管理器npm进行安装: npm install cesium 或者从官方网站下载Cesium的ZIP文件,然后解压缩到您的Web服务器上。 第二步:制作MVT矢量瓦片数据 可以使用GDAL或Tippecanoe等工具矢量数据转换为MVT瓦片。将所得到的MVT矢量瓦片数据存储在Web服务器上。 第三步:创建MVT矢量瓦片数据源 创建MVT矢量瓦片数据源的代码如下: var dataSource = new Cesium.MvtDataSource({ url: 'http://yourserver/data/{z}/{x}/{y}.pbf' }); url是存储MVT矢量瓦片数据的Web服务器地址,以{z}、{x}和{y}作为占位符,表示不同的缩放级别、纵向坐标和横向坐标。Cesium将通过这些信息自动从服务器请求对应的瓦片。 第四步:加载图层 最后,将数据源添加到cesium的viewer中,以加载并渲染图层。 viewer.dataSources.add(dataSource); 随着MVT矢量瓦片的不断发展和普及,我们可以使用Cesium捕获更多高效率的矢量数据,实现更加全面和丰富的地图应用。 ### 回答2: Cesium是一个基于WebGL的JavaScript库,可用于创建地理应用程序。随着矢量瓦片技术的发展,越来越多的地图数据变为基于矢量瓦片存储和传输,提供更好的体验和性能。本文将介绍如何在Cesium中加载mvt矢量瓦片。 1. 打开地图瓦片服务的mvt源代码。这可以通过访问瓦片服务的源代码(例如mapbox的地图服务)来实现。在这里,我们将使用mapbox的mvt源代码。 2. 在Cesium中创建HTTP请求。我们使用XMLHttpRequest对象来创建HTTP请求。然后将获取到的mvt文件解析为Cesium的Geometries,并将它们添加到场景中。 3. 将数据从mvt解析为Cesium Geometries。mvt是一种编码地图数据的二进制格式,该格式可以通过开源库解码。在这里,我们使用一个名为MVT库的开源库来实现。MVT库可以解析.mvt文件并将其转换为GeoJSON格式。接下来,我们将使用Cesium的GeoJSONLoader解析GeoJSON并将其转换为Cesium的Geometries。然后,将其添加到场景中。 4. 添加适当的样式和其他属性以与地图相匹配。MVT格式是地图地理数据的底层表示,但本身并不适合用于地图。因此,必须为几何对象添加适当的样式和其他属性,例如透明度,颜色以及大小等参数,以使其与地图相适应。 总之,在Cesium中加载MVT矢量瓦片需要以下步骤:打开地图瓦片服务的mvt源代码;在Cesium中创建HTTP请求;将数据从mvt解析为Cesium Geometries;添加适当的样式和其他属性以与地图相匹配。在实际应用中,以上步骤需根据具体情况灵活选择相应的工具和库。 ### 回答3: Cesium是一个开源的WebGL虚拟地球和地图引擎,它不仅提供了强大的3D可视化功能,也支持2D地图的展示。MVT(”Mapbox Vector Tile“)是一种矢量瓦片格式,它将地图数据以块的形式进行压缩,方便传输和渲染。在Cesium中加载MVT矢量瓦片需要以下步骤: 1. 安装依赖 在使用Cesium加载MVT之前,需要安装一些必需的依赖包。首先需要安装 Cesium 模块,并安装新的调用方式。另外还需要安装 MVT 模块,也就是 MapBox 的 vector-tile-js 库。 ``` npm install cesium --save npm install webpack webpack-cli --save-dev npm install vector-tile --save ``` 2. 获取数据 在Cesium中加载MVT矢量瓦片之前需要获取MVT数据,可以通过以下两种方式获取: a. 从在线地图服务获取数据 可以从MapTiler等在线地图服务商获取MVT矢量瓦片的数据,但是需要注意,这种方式可能需要付费。 b. 在本地生成矢量瓦片 如果自己有矢量数据集,也可以使用MapBox的 tippecanoe 工具将数据集转换为矢量瓦片。具体步骤如下: ``` npm install -g tippecanoe tippecanoe -z14 -Z10 -o out.mbtiles in.geojson ``` 这里将 in.geojson 转换为了 z14 到 z10 级别的瓦片,结果储存在了 out.mbtiles 文件中。 3. 加载矢量瓦片 下面就可以使用Cesium加载MVT矢量瓦片了。需要用到以下Cesium模块: ``` import Cesium from 'cesium/Cesium'; import VectorTileImageryProvider from 'cesium/VectorTileImageryProvider'; import StyleData from 'cesium/StyleData'; ``` 通过VectorTileImageryProvider模块加载MVT数据: ``` const viewer = new Cesium.Viewer('cesiumContainer'); const style = new StyleData({style: 'path/to/mapboxstyle.json'}); const imageryProvider = new VectorTileImageryProvider({ style: style, url: 'path/to/tiles/{z}/{x}/{y}.pbf', }); viewer.imageryLayers.addImageryProvider(imageryProvider); ``` 其中,style变量可以引入一个Mapbox样式的 JSON 文件,用于样式和数据的控制。url变量应该引用矢量瓦片数据的路径。 加载完成后,即可在Cesium上展示MVT矢量瓦片了。通过调整视角,可以看到不同级别的瓦片在不断切换。MVT矢量瓦片不仅可以实现数据的可视化,还更容易做到数据的部分更新,并且也更加流畅、滑动更自然。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值