原文地址:http://zhihu.esrichina.com.cn/article/567html
一、矢量切片简介
GIS的底图一直使用金字塔技术进行切图,使用户可以快速访问指定级别的地图或者影像。可是切图自己是一张图片,没法进行交互。因而又引入了矢量图层用来显示矢量点线面,这一般须要先获取矢量地理数据(例如GeoJson),而后经过前端将其绘制成不一样元素便能经过鼠标进行响应交互了。
这种GIS组织方式在数据量比较小的时候并无什么大问题,可是在数据量比较大时(例如全国的详细街区数据)存在如下几个问题。首先,同一套数据的展现在不一样的需求下可能须要不一样的样式(例如,白天和夜间模式)而对于传统栅格切片对此需求必须从新进行切片;第二,因为切片的分辨率固定,分辨率太高切片体积过大,分辨率太低高清屏没法清晰显示。第三,矢量数据的请求若是是按需请求每次都向服务器请求数据加剧服务器压力,若是一次请求按需展现,当矢量数据过大时(例如全国的水系数据)对于前端的压力过大。
如今,矢量切片利用一些新技术来控制动态的可交互的地图展现方式,这种新技术可让我的在移动端或者浏览器端自定义地图样式。矢量切片底图能够将基础底图和工做数据进行融合,扩展了底图的交互性。人们能够动态的赋予基础底图样式以及经过配合可交互的工做数据来设计底图样式,根据内容进行智能制图和实时分析并展现在基础地图上。那么,究竟什么是矢量切片技术?
矢量切片是一种利用协议缓冲(Protocol Buffers)技术的紧凑的二进制格式用来传递信息。当渲染地图时矢量切片使用一系列储存的内部数据进行制图。被组织到矢量切片的图层(好比道路、水、区域),每一层都有包含几何图形和可变属性的独立要素(例如姓名、类型等等)。通俗的说,就是将矢量数据以创建金字塔的方式,像栅格切片那样分割成一个一个描述性文件,以GeoJson格式或者以pbf等自定义格式组织,而后在前端根据显示须要按需请求不一样的矢量瓦片数据进行Web绘图。
矢量切片有切片的优点——成熟的缓存、缩放比例技术,另外还有矢量数据可以快速的提供地图映射的优点。一个矢量切片会以紧凑的解析的格式包含全部相对应的几何图形和元数据,像道路名称、用地类型、建筑物的高。所以矢量切片是一种高性能的格式,这种格式在样式、输出格式以及交互性方面提供了高度的灵活性。以下图所示传统金字塔方式进行切图时在并无要素或者要素相同的区域依然须要进行多级切片,而矢量切片只须要设定不一样要素显示的级别便可。
(1)矢量切片
(2)传统金字塔
目前如OpenStreetMap和Mapnik等开放社区平台倡导的矢量切片标准在过去几年已经被一些主流的客户端设备和制图平台所采纳。最近Mapbox的团队为矢量切片开发了一套开放的说明,这个说明已经成为社区支持的标准。如今已经有十多个公司以及开源项目使用这种标准格式的矢量切片。相对于构建一个矢量切片的新接口说明,ArcGIS更倾向于经过采用并改进已有矢量切片说明来支持这种兴起于社区的标准。这意味着ArcGIS中的350000个组织用户能够经过矢量切片或者经过其余资源发布的可视化切片的形式来发布他们本身的数据。这将会使交互地图和数据生态系统更加兴旺。
矢量切片正逐步在ArcGIS的WebGIS平台上获得支持,目前JS API 3.15/4.0beta已经支持矢量切片的调用,ArcGIS Pro1.2增长了建立并能够发布到ArcGIS for Server 10.4或者ArcGIS Online的功能,同时在ArcGIS Online上也提供了一套在线的基础矢量底图,能够经过修改样式文件对基础矢量底图样式进行自定义修改。下一步矢量切片将会更加完善,而且在ArcGIS Runtimes以致于整个WebGIS平台上进行支持。Esri但愿将来可以在使用栅格切片的地方均可以使用矢量切片。
二、ArcGIS Online的基础矢量底图
2.1 基础矢量底图简介
2015年早些时候,Esri宣布了ArcGIS平台引入矢量切片的计划如今咱们已经初步支持矢量切片做为图层加载到web map中了。做为其中的一部分,Esri提供了一系列可更新的矢量基础底图(目前是beta版)可用于ArcGIS Online构建地图和应用。
目前Esri基础矢量底图包含八种不一样的地图风格而且使用同一个地图服务器。这一系列矢量基础底图能够在Esri矢量基础底图组 中经过搜索“esri_vector” 找到。这个组中包含多种样式的矢量基础底图,一些很接近原有的Esri基础底图(好比Streets, Topographic, Light Gray Canvas等),另外还有一些是新的样式(好比Streets at Night, Navigation, and Imagery Hybrid)。这些矢量基础底图均可以做为web map使用,经过样式修改能够保存成自定义的基础矢量底图,自定义的底图能够做为基础底图添加其余图层或者做为切片图层添加到已有的地图中。具体操做会在下面的章节中介绍。
Esri矢量底图中有多种底图样式可用,点击图片进入Esri矢量基础底图
2.2 自定义基础矢量底图样式
本节主要讲述怎样自定义基础矢量底图的样式。下图的例子 是一个根据ArcGIS Online 上的Light Gray Canvas tile layer 底图从新自定义样式的基础矢量底图。那么怎样自定义基础矢量底图的样式呢?步骤其实很简单:
第一步:建立一个属于你本身的新的切片图层项目
1 使用你的帐号登陆ArcGIS Online,并点击“地图”
2 添加一个矢量切片图层,点击“添加”按钮选择“搜索图层”,查找输入“esri_vector”,范围选择“生动地图集图层”,点击“转到”
3 选择一个矢量切片图层,点击“添加”,再点击“添加完毕”
4 点击矢量图层更多选项(标志为‘…’)选择复制
5 重命名复制的图层并点击“保存图层”(注意这里是点击下图中菜单里面的“保存图层”而不是保存web map),点击“建立项目”
第二步:为你的新的切片图层更新样式
1 查看项目详情,选择“显示项目详细信息”
2 下载样式,点击“打开”选择“下载样式”,获得一个root.json的文件。
3 修改样式,经过工具或者记事本打开root.json根据下节对样式结构的介绍修改样式,并保存(为防止混淆和自行重命名为“myroot.json”)。
4 更新样式,点击“更新”选择自定义的json文件,点击更新项目便可更新基础矢量底图的样式
第三步:使用新的切片图层建立地图
1 你能够选择将自定义的矢量切片底图做为一个web map的一个图层,点击“添加”“搜索图层”,在“范围”中选择“个人内容”,选择刚才自定义的矢量底图,点击“添加”。
2 你能够选择将自定义的矢量切片底图做为一个web map的底图,点击“添加”“搜索图层”,在“范围”中选择“个人内容”,点击刚才自定义的矢量底图,选择“做为底图”。
以上就是自定义并使用一个基础矢量底图的步骤,将来还会有更多的基础矢量底图发布,而且会有更多相应的工具和功能。
2.3 矢量底图样式文件结构
矢量切片一个最大的特色就是你能够根据本身的须要自定义底图。底图调整的程度彻底取决于你的想法,你能够改变几个重要的配色来建立一个全新的底图。上一节介绍了在ArcGIS Online上修改的步骤,本节重点介绍,样式文件的结构,很好的理解这个JSON文件的结构能够更有利于你进行修改。
打开上节中下载的root.json文件,下图表示的是JSON文件的主要结构,其中高亮显示的是编码结构。右侧从上往下是地图中包含的要素列表(如,背景、海洋深度、土地利用类型等)。左侧部分表示要素类型的细节部分(如,填充、划线等)。其中橙色的项目包含填充和边线样式,而绿色的项目包含标签和道路的展现样式。就像feature根据JSON代码在地图中展现同样,矢量地图绘制这些背景要素也要按照必定的顺序,先填充水域,而后水系、道路,最后展现道路名称、道路标识以及城市标签。记住这些通用的代码组织形式将有助于从新设计你的地图。
2.3.1包含内容
ArcGIS Pro项目决定着一个要素是否包含在一个特定比例尺或者地图级别中。所以,若是一个要素并无包含在项目中,他是不能被添加进这个数据集中的,另外,没法经过前端对已经发布的矢量切片要素进行修改。可是,你能够将已经存在的要素图层经过比例尺的控制而隐藏。
“minzoom”:“<value>” 这个是你但愿要素显示的最小地图级别
“maxzoom”:“<value>” 这个是你但愿要素显示的最大地图级别
矢量切片参考文档 包含一个完整的地图要素列表以及相关的最大/最小地图级别。
一个要素能够经过添加“layout”的命令控制可见性,从而将其从地图中(在全部比例尺中)被彻底移除。
“layout” : {“visibility” : “none”},
若是你已经将该要素移除,别忘了找到并移除这个要素对应的标签。
2.3.2设计
这种变化能够仅仅经过操纵演示和线的宽度就能够改变底图的展现。这样咱们如今只须要关注地图搭配自己就行了。
颜色
样式包括颜色的指令经过“paint”命令来控制。下面是一个例子。
颜色是用“HEX”(16进制)的值来表示的,在这个例子中是淡绿色。
这个颜色的RGB值为:R218 G224 B178。若是你不习惯使用“HEX”,网上有不少在线的转换器能够将任何RGB的值转换成“HEX”值。
为一个多边形添加一个轮廓能够经过在“paint”中添加一个项目“fill-outline-color” : “#<hexcolor>”
调整多边形的透明度,能够添加“fill-opacity” : “<value>” 到“paint”命令中。这是一个简单的线性比例,0表示彻底透明,1表示彻底不透明。
一些符号使用‘子元素’来生成图案效果。使用 “fill-pattern” : “<子元素名称>”添加到“paint”中。
线
这里有一个线符号的例子:
线的宽度包含在“paint”命令中,而且以节点的方式书写。在这个例子中“base”值设为1.2pts。
“stops” 用来添加不一样的线宽到不一样的比例尺或者地图级别中。在这个例子中级别1的线宽度为基础宽度的一半即0.6pts,地图级别5的线宽度为基础宽度的1.33倍即1.6pts。线的宽度将会在两个节点之间进行调整,若是你愿意还能够添加更多节点。
若是你想在你的线中使用虚线,那能够添加“line-dasharray”: [ 3.0 , 2.0 ] 到你的“paint”命令行中。在这个例子中,‘3.0’是链接线的长度,‘2.0’是之间的间隔长度。如今只能生成这种简单的虚线。
若是想控制线的透明度,能够添加“line-opacity” : ”<value>” 到你的“paint”命令行中。与填充命令类似,也是使用一个简单的线性比例,0表示彻底透明,1表示彻底不透明。
2.4 经过修改样式自定义边界和标注语言
利用矢量切片的可交互的特性,使用Esri基础矢量底图还能够更简单的方式实现一些功能,用于更好的支持本地和国际用户,例如,你能够在同一个地图服务下拥有两套独立的样式(例如一个希腊,一个英语),而后基于用户的位置和区域来显示适合的标签;或者对于有争议的边界可使用独立的样式来分别显示有争议的边界,同时符合国际和当地的标准,更加方便全球的用户使用Esri的底图。矢量底图这种方式对于以前使用栅格底图须要从新生成新的图层的方式更加方便,灵活,同时也大大的减小了服务器的存储需求。
2.4.1自定义地图语言
下方显示的是由Esri矢量基础底图建立的自定义地图示例。
在这个示例中,能够经过切换地图文本字段的值来更新全球街道地图切片图层,在大比例尺显示当地语言(例如希腊),而不是显示国际化语言(例如英语)。
1)全部实例的‘_name_global’ text-field修改成‘_name_local’(例如:“text-field”: “{_name_local}”,)
2)城市、公园、土地利用和道路标注也是须要显示为当地语言的要素类。
因为这些图层在不一样缩放级别下屡次显示,因此是由一批查找和替换来实现更新全部适合的图层。因为参照相同的矢量切片,因此这些变化可用于全部可用的地图样式。
Esri社区地图数据用于构建包含当地语言的矢量切片,包括世界各地的多种要素类。在整个测试期间,咱们计划扩大可用语言的区域。目前有一个已知的局限,有些语言从右至左显示,例如阿拉伯语,不能正确的显示。点击这个web map,查看书签,能够在1:288000或更大比例尺下显示当地语言。
2.4.2自定义地图边界
下方显示的是由Esri矢量切片基础底图建立的自定义地图示例。
在这个例子中,更改用于行政边界图层的 “filter”能够更新全球地图,这个例子用于显示苏里南当地认可的边界(有争议):
1)“Disputed admin0″图层:将filter改成“filter” : ["!in", "DisputeID", 80, 23, 24, 25, 26, 0],
经过filter将有争议的边界2三、2四、2五、26从“Disputed admin0″ 图层中排除出来。
2)“Boundary line/Admin0″图层:将filter改成“filter” : ["any", ["==", "_symbol", 0], ["in", "DisputeID", 24, 25]],
而后经过filter将苏里南宣称的2四、25边界加入到"Boundary line/Admin0″图层中
有时候咱们会发现“Disputed admin0”要素层在root.json中出现了两次。一样“Admin0”也有相同的现象。这是因为边界线的样式是由两个线样式叠加造成的
灰色的实线是Boundary line/Admin0/0样式控制的,黑色的虚线是Boundary line/Admin0/1样式控制的,虽然他们的样式不一样可是调用的是同一个要素。
那么如何获取这些争议边界的代码呢?浏览这个webmap ,该地图中包括不一样的书签,显示了一些目前Esri矢量底图中包含的有争议的边界。当你点击一些特定的边界要素,你能够看到弹出窗口“DisputeID”中的重要信息(须要按着上面提到的方法更新filter),提示不一样的国家显示不一样的边界。
在Esri矢量底图中,国际公认国际边界(例如美国、加拿大边界)一般显示为实线。在某些状况下,一些国家将根据本身的承认对边界进行渲染显示。
三、矢量切片的生产发布和使用
在ArcGIS平台目前的版本(ArcGIS Pro 1.2 beta,ArcGIS 10.4 prerelease)下,制做和使用矢量地图切片的流程以下:
1. 经过ArcGIS Pro来制做矢量切片;
2. 经过Portal for ArcGIS来发布切片;
3. 经过Portal for ArcGIS的Map viewer使用矢量切片;
4. 经过ArcGIS JavaScript API使用矢量切片。
3.1 数据准备
目前要制做矢量切片的数据须要遵循两个标准:
1. 坐标信息必须与ArcGIS Online底图保持一致,即采用WGS 1984 Web Mercator(auxiliary sphere)。
2. 只支持ArcGIS Online的schema进行切片的制做。
3.2 使用ArcGIS Pro制做矢量切片
ArcGIS Pro 1.2 beta提供了三个与矢量切片制做相关的工具,位于Toolbox->Data Management Tools->Package下.
· Create Vector Tile Index:建立矢量切片的索引文件;
· Create Vector Tile Package:建立矢量切片包;
· Share Package:共享切片包到ArcGIS Online或Portal for ArcGIS中。
3.2.1 Create Vector Tile Package
该工具是制做矢量切片包的主要工具,用来从地图中建立切片,并将建立好的切片打包成一个后缀为.vtpk的文件。
工具的主要参数以下:
· Input Map:选择用来制做矢量切片的地图,注意去掉map中自带的底图,不然会提示“Error 001852:Layer type is not supported for vector tile packages.”
· Output File:选择.vtpk的存储位置;
· Tiling Format:意译的话,是切片模式,有indexed和flat两种:
· Indexed模式:在制做切片前,须要经过Create Vector Tile Index工具来对数据建立索引,工具会根据数据的疏密程度,建立不一样LOD层级的索引网格,数据密集的地方切片层级较高,稀疏的地方层级较低。
· Flat模式:不建立索引,全部范围内的数据按照一样的规则进行切图;
· Indexed方式建立的切片包,相比flat模式,时间短,数据量小;
· Minimum Cached Scale:最小切图比例尺,目前只支持ArcGIS Online的schema;
· Maximum Cached Scale:最大切图比例尺,目前只支持ArcGIS Online的schema;
· Index Polygons:输入经过Create Vector Tile Index工具建立的索引多边形;若是选择了indexed模式,须要制定索引多边形,若是没有事先作好的多边形,此参数能够不填,切图工具会默认生成索引并按照索引进行切图,但生成的索引并不输出为要素图层;
· Summary:摘要,用来在ArcGIS Online或Portal for ArcGIS的内容中显示;
· Tags:标签,用来在ArcGIS Online或Portal for ArcGIS中搜索项目用。
配置好这些参数以后,点击右下角的“run”按钮,工具就开始建立矢量切片了。
3.2.2 Create Vector Tile Index
如上一步中提到,本工具用来对切图数据建立索引,主要参数以下:
· Input Map:在ArcGIS Pro中,以map为单位制做矢量切片,因此也是以map为单位建立索引;
· Output Tile Feature Class:指生成的索引文件的存储位置,选择合适的位置便可,根据你选择的位置,最终生成的是shp或者Geodatabase;
· Maximum Vertex Count:每个索引网格里,最多能容纳的多边形顶点数,初步推测这个值影响的是索引网格的大小,默认为10000,建议保持默认值便可。
填写好这些参数以后,点击右下角的“run”,执行制做索引。
3.2.3 Share Package
该工具用来将生成好的矢量切片包上传到ArcGIS Online或者Portal for ArcGIS中:
· Input Package:输入已经制做好的矢量切片包;
· Summary:摘要信息;
· Tags:标签信息;
· Credits:能够填写些制做者相关的信息;
· Everybody:勾线后,上传的切片包就对全部人分享了;
· Groups:能够在组织的群组间进行分享,根据须要选择。
配置好这些信息以后,点击右下角的“run”,便可上传切片包。
注1:一般咱们也能够经过ArcGIS Online或者Portal for ArcGIS的“个人内容”界面中,选择“Add Item”->“from my computer”的方式上传.vtpk,可是若是.vtpk大小超过2G,就只能经过本工具上传。
注2:本工具只上传.vtpk,并不进行切片服务的发布。
3.3 经过Portal for ArcGIS发布矢量切片
目前,ArcGIS Online暂不支持自定义的矢量切片底图的发布。
在上一步中,咱们经过share package工具上传了.vtpk文件,在Portal for ArcGIS中“个人内容”页面能够看到该item,选中该item进入详细信息页面,选择“Publish”,可将该切片包发布成矢量切片服务;
还能够经过“个人内容”页面,选择“add item”-> “from my computer”,弹出如下对话框,选择.vtpk文件,并勾选“publish the file as a tile layer”,点击“Add item”便可完成发布。
在Portal for ArcGIS中成功发布好矢量切片服务以后,会在server的工做目录(安装时指定,如个人是“D:\arcgisserver”)下的\directories\arcgiscache\VectorCache\Hosted下找到一个与已发布的服务名称一致的文件夹,其中记录了该矢量切片的全部信息。
· resources:存放的是与矢量切片服务有关的资源,包括服务的字体文件,样式文件,以及sprites文件等,其中最重要的是styles文件夹下的root.json文件,里面记录了该矢量切片服务的样式,修改服务的样式就是经过修改该文件来实现的;
· tile:该目录中存放的是制做好的矢量切片,以2.0版本的boundle格式存储;
· tilemap:该文件夹中只有一个名为root.json的文件,这其中记录的是矢量切片服务第一次加载有关的信息;
· root.json文件:记录的是整个矢量切片的服务信息,包括服务名称、服务的范围、坐标参考、切图等级及比例尺等多种信息。
3.4 经过Portal for ArcGIS使用矢量切片服务
发布成功后咱们能够在item详细页面看到它的服务类型和服务url,点击“open”,能够将其加载到Portal for ArcGIS的Map viewer中进行浏览。
在Portal for ArcGIS中还能够修改矢量切片底图的样式,在3.3文件中介绍过,在ArcGIS for Server的工做目录下能够找到root.json文件,该文件控制的是底图的样式,经过修改该文件能够修改图层的样式。具体步骤以下:
一、 将发布好的矢量切片加载到map viewer中;
二、 复制并重命名复制的图层;
三、 保存该图层;
四、 进入到该图层的item详细信息页面(或者直接在ArcGIS for Server工做目录中找到该图层的样式文件);
五、 在下拉列表中选择“下载样式”;
六、 对下载的样式进行修改;
七、 在item详细信息页面中,选择“update”,将修改的样式上传,并肯定;
八、 修改样式成功,可在map viewer中进行查看。
3.5 经过ArcGIS JavaScript API使用切片
3.5.1 相关类和方法
ArcGIS JavaScript API 3.15即提供了对矢量地图切片的支持,它提供了一个特定的VectorTileLayer类,用来使用矢量切片服务。该类有1个构造函数,构造函数的2个参数有3种用法:
· 用法1:直接传入矢量切片服务的url;
· 用法2:直接传入矢量切片服务的样式文件(限于ArcGIS Online上供全部人访问的服务,服务url公开,经过传入样式文件能够指定的样式渲染服务);
· 用法3:传入矢量切片服务的url以及初始化显示的信息,如显示层级、最大最小比例尺、是否可见、透明度等等。
另外,还提供了许多属性和方法,用来获取矢量切片服务的信息,这里最重要的属性是style,由于矢量切片最大的特色就是可使用客户端修改样式:
对应的修改样式的方法为setStyle(styleURL):
该类还有一些事件,以下:
当修改样式方法被调用时,会触发style-change()事件。
3.5.2 示例
如下是在js端修改样式的简单示例:
这是该矢量切片服务最开始的样式,其代码以下:
经过修改其root.json文件,能够快速的修改其样式,好比这里咱们修改如下第一个图层的样式,保存下样式文件:
这样再看到的矢量切片服务就变成了一下风格:
制定及修订记录前端