ArcGIS 矢量切片全接触(多图)

1
分享 2017-10-27

随着 ArcGIS 10.4 新特性的发布,矢量切片开始广受瞩目。小编整理了同事们最近关于矢量切片的研究成果,来给大家分享一下。

ArcGIS 矢量切片知多少
> > > >
什么是矢量切片

矢量切片是一种新的利用一些新技术来控制动态的可交互的地图展示方式,这种新技术可以让个人在移动端或者浏览器端自定义个性化的地图样式。人们可以动态的赋予基础底图样式以及通过配合可交互的工作数据来设计底图样式,根据内容进行智能制图和实时分析并展示在基础地图上。

通俗的讲,矢量切片就是将矢量数据以建立金字塔的方式,像栅格切片那样分割成一个一个描述性文件,以 GeoJson 格式或者以 pbf 等自定义格式组织,然后在前端根据显示需要按需请求不同的矢量瓦片数据进行 Web 绘图。

而 ArcGIS 的矢量切片是利用协议缓冲(Protocol Buffers)技术的紧凑的二进制格式用来传递信息的。前端通过解析样式动态渲染矢量切片数据.


> > > >
为什么要使用矢量切片

WebGIS中一直使用栅格切片作为底图,这种底图加载速度快,制图表达稳定,但是无法修改样式,而且占用储存空间较大,在地图数据快速更新的今天有些力不从心。矢量切片的优势在于既能够有栅格切片成熟的缓存、缩放比技术另外还可以像矢量地图那样能够灵活修改样式。


这里需要解释一下,矢量切片是为了代替栅格切片作为底图的,而不是为替代矢量要素图层的。因此那些点击相应的事情还是交给要素图层来办吧!

> > > >
ArcGIS矢量切片技术路线

目前 Esri 在 ArcGIS 平台上已经初步形成一个从生产到发布再到使用的完整矢量切片路线。
目前,制作矢量切片的工具 ArcGIS Pro1.2 正式版已经发布;发布平台为 Portal for ArcGIS 10.4 + ArcGIS 10.4 for Server;使用平台 Web 端为 ArcGIS API for JavaScript 3.15 和 4.0(目前是 Beta 3),移动端使用 ArcGIS Runtime Quartz (目前是 Beta 版)。

> > > >
ArcGIS矢量切片的制作

矢量切片的制作大概分为数据加载、索引的构建、切片三个步骤。

> > > >
矢量切片服务的使用

1. 矢量切片服务的发布:

Portal 中矢量切片服务的调用:

1)作为普通图层加载


2)作为底图加载

2. 矢量切片样式的修改:
样式下载

ArcGIS Online矢量切片底图



ArcGIS 矢量切片包结构解析

通过 ArcGIS Pro 生成了一个神秘的 *.vtpk 的矢量切片包,通过 Portal 发布就成了矢量切片服务,那这个 *.vtpk 里面藏着什么秘密呢?小编忍不住暴力解压了这个文件,下图就是解压之后每个文件的内容。

上面的这个目录中占比例最大的自然是 tile 文件夹,里面是经过压缩的 .bpf 文件,为了方便存储 pbf 文件被整合到 bundle 中。

另外一个重要的文件是 style 文件夹下的 root.json,在上一个帖子中下载的样式其实就是这个 root.json。

整个工程里有好几个 root.json,tilemap 文件夹下也有,那这个 root.json 又是做甚的?我以 ArcGIS Online 的矢量切片底图为例,加载底图时,监听请求发现在请求矢量切片前一定要请求一个 tilemap 的文件。



小编禁不住好奇心打开了这个 tilemap 文件,居然全是由 1 组合的数组。


这个文件是为了反序列化 pbf,因此其大小与地图的复杂程度有关,地图越复杂这个文件就会越大。

sprites 储存图片标记,我们看到的矢量切片底图上的各种图片标记其实是通过sprite.json获取图片标记在sprite.png上的相对位置而显示出来的。


至此,ArcGIS矢量切片包的神秘面纱已经解开了


ArcGIS 矢量切片格式详解

矢量切片最大的一个特点就是样式可以前端自定义,那么怎样修改控制样式的 json 文件才能达到我们想要的效果呢?接下来小编就来跟你详细剖析一下 ArcGIS 的矢量切片样式格式。

我们先以公开课视频中的数据为例,经过复制、保存、下载成功的把样式下载下来。

要理解样式必须要与原始数据的配图进行对比


下表是样式中的主要属性



这里有一个点符号渲染的例子:

symbol-avoid-edges表示是否描边
text-font:标记的字体
text-size:标记的字体大小
text-max-width:字体最大宽度
text-filed:标签所在的属性序列
text-option:是否显示文字标记
text-padding:文字填充




这里有一个线符号的例子:

line-color表示线的颜色
line-width表示线的宽度
“base”表示线宽的基准值
“stops” 用来添加不同的线宽到不同的比例尺或者地图级别中。




在这个例子中级别 1 的线宽度为基础宽度的一半即 0.6pts,地图级别 5 的线宽度为基础宽度的 1.33 倍即 1.6pts,如果你愿意还可以添加更多节点。

除此之外还可以设置虚线
line-dasharray: [ 3.0 , 2.0 ]表示线段长 3px 中间间隔 2px
line-opacity : 控制线的透明度,0 表示完全透明,1 表示完全不透明。

ArcGIS Online 上的矢量切片底图的样式也可以使用相同的方式进行编辑,不同级别下图层的名称与包含的属性请参考矢量切片参考文档。
http://esri.maps.arcgis.com/ho ... d38a8


ArcGIS 矢量切片在线编辑工具
在对矢量切片样式结构进行详解之后,我相信没有几人不晕的。难道我制作一个矢量切片样式需要记住这么对参数还要理解 json 文件的结构,这是要把人逼疯的节奏啊。所见即所得一直是 Esri 倡导的开发方式,在矢量切片的使用上 Esri 也开发出了两款所见即所得的样式编辑工具。
工具一:arcgis-vectortile-style-editor
在 github 上的地址:https://github.com/Esri/arcgis ... ditor
工具二:VectorBasemapStyleEditor
在 github 上的地址:https://github.com/jgraysonapl ... ditor

那代码下载下来了是不是就立即可以运行了呢?too yong,too simple!当然需要连接 Portal 或者 ArcGIS Online 了,下面我以 VectorBasemapStyleEditor 为例解释一下怎样在ArcGIS Online上注册在线编辑器并使用。

首先,将编辑器代码利用 Web 服务器发布,获取首页的访问 url。
第二,打开ArcGIS Online,注册应用,获取应用的 ID。

最后一步,修改代码,找到 main.js,将其中 appId 修改为自己注册应用的 ID。

再次运行应用,即可通过登录获取用户列表中的矢量切片底图,可视化的修改样式并可以保存到 Portal 或者 ArcGIS Online 中!





文章来源:https://mp.weixin.qq.com/s/o2Ar-HShu852qIWm5Ulv5A

2 个评论

写的真好,感谢分享,非常有帮助!
针对矢量切片的空间和属性查询,目前已经有相关的程序案例。有兴趣的可以查看一下超图对于这方面的处理。http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#MVT

要回复文章请先登录注册