# 矢量瓦片服务
随着大数据技术的发展，人们对电子地图的快速共享需求也越来越强烈。传统电子地图共享时，通常会通过瓦片裁剪工具获取栅格瓦片。相对于其他技术，栅格瓦片底图有其优越性，例如有效减少了传输数据体积，多级缩放等。然而，栅格瓦片底图也有一些短处，缺乏灵活性、实时性，数据完整性受损是比较突出的问题，这正是栅格数据的问题：
缺乏灵活性。栅格瓦片完成后，已经保存为图片格式，样式不可修改。若要多种栅格底图，需裁剪多分栅格瓦片底图；
缺乏实时性。由于栅格瓦片已保存为图片格式，当现实世界地物有变化时，不能实时更新，只能重新裁剪栅格瓦片；
丢失属性信息。栅格瓦片没有属性信息，若要查询图片的多边形的属性，需要到服务器重新请求。
基于栅格瓦片底图的劣势，MapGIS可支持矢量瓦片底图。矢量瓦片针对矢量电子地图，按照一定的标准和技术将其保存为多种比例尺的矢量分块数据，在前端显示电子地图时，可直接调用矢量分块进行绘制。
可保留属性信息，在客户端进行查询时，无需再次请求服务器；
采用分块编码模式，客户端获取时只返回请求区域和相应级别的矢量瓦片底图，且采用实时绘制矢量模式，绘制效率更高；
采用分块编码模式，客户端获取时只返回请求区域和相应级别的矢量瓦片底图，且采用实时绘制矢量模式，绘制效率更高；
矢量瓦片分辨率高达4096*4096，是栅格瓦片的16倍，可保证缩放过程中的细节高度还原，且满足高分屏绘制需求；
样式可以改变和定制，矢量切片可以在客户端渲染，可以按照用户赋予的样式渲染。如导航地图有白天和黑夜两种模式，只需共用一份矢量瓦片底图，利用两套样式进行渲染即可；
客户端显示矢量瓦片底图时，可以通过属性过滤条件可以任意过滤筛选图元，实现个性化定制；
客户端显示矢量瓦片底图时，可以编辑底图中每一个矢量图层的可见状态，调整矢量层的叠加压盖顺序，修改矢量图层的颜色、大小等显示样式。
# 
相关主题
# 发布/浏览矢量瓦片
# 
功能说明
MapGIS 裁剪生成矢量瓦片后，可在MapGIS IGServer中发布矢量瓦片服务，并浏览地图效果。
若矢量瓦片裁剪时包含了地图配图信息，在web端显示，可继承原地图显示效果。
# 
操作说明
- 登录到MapGIS ServerManager，启动“地图与数据服务”->“发布服务”->“矢量瓦片服务”功能，进入如下页面：
- 设置矢量瓦片信息：
【矢量瓦片类型】支持VTDF文件、MUVT文件、mongo矢量瓦片和目录格式四种格式。不同格式矢量瓦片对应的数据路径有所不同：
- VTDF文件：选择后缀为.vtdf文件；
- MUVT文件：选择后缀为.muvt文件；
- Mongo矢量瓦片：选择对应的数据源信息；
- 目录格式：选择目录指向矢量瓦片裁剪时地图名称的目录。
【服务名称】：可以任意填写需要的服务名称。
- 单击“发布矢量瓦片”按钮，完成发布瓦片服务的操作。界面会提示发布是否成功，若发布成功，地图与数据服务列表会显示此服务，也可直接单击预览查看服务发布的结果。
# 修改矢量瓦片样式
MapGIS在web端显示矢量瓦片效果时，采用MapboxGL地图显示渲染框架，将数据层划分为background（背景）、circle（点）、line（线）、fill（区）和symbol（标记符号）五种类型，用户可在界面层实时修改地图渲染效果。
# background（背景）
| 参数名称 | 参数含义 | 前提条件 | 单位 | 默认值 | CSS示例 |
|---|---|---|---|---|---|
| 填充色 | 背景填充颜色 | - | - | - | "background-color": "rgba(221, 92, 92, 1)" |
| 背景模式 | 背景填充符号的类型。 | - | - | - | "background--pattern": "respt_首都" |
| 透明度 | 填充符号的透明效果，透明度取值为0 到1之间的任意整数，1表示不透明，0表示完全透明。 | - | - | 1 | "background-opacity": 1 |
# circle（点）
| 参数名称 | 参数含义 | 前提条件 | 单位 | 默认值 | CSS示例 |
|---|---|---|---|---|---|
| 子图颜色 | 圆符号RGB颜色值 | - | - | "circle-color": "rgba(245, 8, 46, 0.5)" | |
| 半径 | 圆符号半径 | - | 像素 | 5 | "circle-radius": 10 |
| 透明度 | 点符号填充透明度，1为不透明，0为全透明 | - | - | 1 | "circle-opacity": 0.5 |
| 模糊化 | - | - | 0 | "circle-blur": 0 | |
| 笔颜色 | 圆形符号边界RGB颜色 | - | - | "circle-stroke-color":"rgba(230, 13, 13, 1)" | |
| 笔宽 | 圆形符号边界宽度 | - | 像素 | 0 | "circle-stroke-width": 4 |
| 笔颜色透明度 | 变宽透明度，1为不透明，0为全透明 | - | - | 1 | "circle-stroke-opacity": 0.7 |
| 节距模式 | - | - | "circle-pitch-scale": "viewport" | ||
| 平移模式 | - | - | "circle-translate-anchor": "map" | ||
| 平移 | X/Y方向平移量 | - | 像素 | 0 | "circle-translate": [ 10, 0 ] |
# line（线）
| 参数名称 | 参数含义 | 前提条件 | 单位 | 默认值 | CSS示例 |
|---|---|---|---|---|---|
| 线颜色 | 线颜色 | "line-color": "rgba(211, 12, 43, 1)" | |||
| 线宽 | 线宽 | 像素 | 1 | "line-width": 1, | |
| 透明度 | 线的透明度 | 1 | |||
| 模糊化 | 线边界模糊 | 像素 | 0 | "line-blur": 0 | |
| 线头 | 线头类型，可选择圆头、平头和方头 | Butt | "line-cap": "butt" | ||
| 拐角 | 线的拐角类型，可选Bevel、Round和Miter | Miter | "line-join": "Miter" | ||
| 斜接限制 | 自动将拐角类型由miter改成bevel | 拐角选择为Miter | 2 | "line-miter-limit": 2 | |
| 圆角限制 | 自动将拐角类型由round改成miter | 拐角选择为Round | 1.05 | "line-round-limit": 1.05 | |
| 虚线和间隔样式 | 描述线图层轮廓的虚线和间隔样式，是虚线和间隙值的集合（奇数项为虚线长度；偶数项为间隙长度） | 线宽单位 | "line-dasharray": [ 6, 3, 3, 3 ] | ||
| 线偏移 | 相对原始线偏移量，根据设置的正负数向左右偏移 | 像素 | 0 | "line-offset": 0 | |
| 线填充图案 | 线的填充图案 | "line-pattern": "othnt_point" | |||
| 平移 | 相对原始线的偏移量 | 像素 | 0,0 | "line-translate": [ 0, 0 ] | |
| 平移模式 | 选择平移模式为map或viewport | 线设置平移 | Map | "fill-translate-anchor": "map" | |
| 间隔宽度 | 双线的间隔宽度 | 像素 | 0 | "line-gap-width": 0 |
# fill（区）
| 参数名称 | 参数含义 | 前提条件 | 单位 | 默认值 | CSS示例 |
|---|---|---|---|---|---|
| 区填充图案 | 填充符号的类型。 | - | - | "fill-pattern": "respt_首都" | |
| 填充色 | 填充矢量瓦片区图层的颜色。 | - | RGB | "fill-outline-color": "rgba(221, 92, 92, 1)" | |
| 轮廓颜色 | 填充矢量瓦片区边界的颜色。 | - | RGB | "fill-color": "rgba(190,220,175,1.0)" | |
| 透明度 | 填充符号的透明效果，透明度取值为0 到1之间的任意整数，1表示不透明，0表示完全透明。 | - | 1 | "fill-opacity": 1 | |
| 抗锯齿 | 消除区边缘出现凹凸锯齿，使之平滑显示 | - | true | "fill-antialias": true | |
| 平移模式 | 选择平移模式为map或viewport | - | map | "fill-translate-anchor": "viewport" | |
| 平移 | 基于原始位置上,再按照屏幕坐标偏移 | - | 像素 | 0,0 | "fill-translate": [ 0, 0 ] |
# symbol（标记）
| 参数名称 | 参数含义 | 前提条件 | 单位 | 默认值 | CSS示例 |
|---|---|---|---|---|---|
| 位置 | 注记模式，有点和线两种 | - | - | point | "symbol-placement": "line" |
| 间距 | 线上重复标记注记的间距？可是为10、0时候不对？ | 线模式下才可用 | 像素 | 250 | "symbol-spacing": 100 |
| 是否描边 | 瓦片边缘？？ | - | - | false | "symbol-avoid-edges": true |
| 文本 | 注记所在属性字段 | - | - | "text-field": "{Name_chn}" | |
| 字体 | 注记的字体 | 已设置注记文本 | - | - | "text-font": [ "微软雅黑", "微软雅黑" ] |
| 字号 | 注记大小 | 已设置注记文本 | 像素 | 16 | "text-size": 30 |
| 文本颜色 | 注记颜色 | 已设置注记文本 | - | - | "text-color": "rgba(255, 0, 0, 1)" |
| 文本透明度 | 注记透明度 | 已设置注记文本 | - | 1 | "text-opacity": 1 |
| 最大宽度 | 用于文本换行的最大宽度 | 已设置注记文本 | Ems（浏览器字体大小） | 10 | "text-max-width": 3 |
| 文本行高 | 换行时的行上下间距 | 已设置注记文本 | Ems（浏览器字体大小） | 1.2 | "text-line-height": 2 |
| 字符间距 | 字符间的行间距 | 已设置注记文本 | Ems（浏览器字体大小） | 0 | "text-letter-spacing": 1 |
| 文本间距 | 多个文本间距，若小于此间距，会自动进行避让不显示 | 已设置注记文本 | 像素 | 2 | "text-padding": 4 |
| 文本光环颜色 | 字体外轮廓颜色 | 已设置注记文本 | - | - | "text-halo-color": "rgba(0, 0, 0, 1)" |
| 文本光环宽度 | 字体外轮廓宽度 | 已设置注记文本 | 像素 | 0 | "text-halo-width": 2 |
| 文本光环模糊化 | 字体外轮廓模糊化的宽度 | 已设置注记文本 | 像素 | 0 | "text-halo-blur": 0 |
| 文本允许重叠 | 勾选时，即使多个文本间存在冲突，也会全部显示 | 已设置注记文本 | - | false | "text-allow-overlap": false |
| 忽略位置 | 勾选时，即使子图符号间存在冲突，也会全部显示 | 已设置注记文本 | - | false | "text-ignore-placement": false |
| 文本节距排列 | 自动匹配“旋转对齐”的值 | 已设置注记文本 | - | auto | "text-pitch-alignment": "auto" |
| 旋转对齐 | ？？？ | 已设置注记文本 | - | auto | "text-rotation-alignment": "auto" |
| 文本对齐 | 换行对齐方式 | 已设置注记文本 | - | center | "text-justify": "left" |
| 文本排列 | 注记围绕定位点的方位 | 已设置注记文本 | - | center | "text-anchor": "left" |
| 最大角度 | 字符间最大变化角度？ | 采用线模式注记 | 度 | 45 | "text-max-angle": 45 |
| 旋转角度 | 注记旋转角度 | 已设置注记文本 | 度 | 0 | "text-rotate": 0 |
| 是否保持垂直 | “位置”为“line” “旋转对齐”为“map” | - | true | "text-keep-upright": false | |
| 大小写转换 | None：不执行； Uppercase：所有字母用大写； Lowercase：所有字母用小写； | - | - | none | "text-transform": "none" |
| 文本偏移 | 注记在X/Y方向偏移值 | - | ems | 0,0 | "text-offset": [ |
| 4, | |||||
| 5 | |||||
| ] | |||||
| 文本可选 | 值为true，当注记与其他子图符号存在冲突时，只显示子图符号，不显示注记文本 | - | - | false | "text-optional": true |
| 文本平移排列 | - | map | "text-translate-anchor": "viewport" | ||
| 文本平移 | - | 像素 | 0,0 | "text-translate": [ | |
| 3, | |||||
| 4 | |||||
| ] | |||||
| 图符大小 | 注记填充图案的大小 | 已设置“注记填充图案” | 图标大小倍数 | 1 | "icon-size": 3 |
| 图符颜色 | 注记填充图案的颜色 | 已设置“注记填充图案” | - | "icon-color": "rgba(252, 0, 40, 1)" | |
| 图符透明度 | 注记填充图案的透明度 | 已设置“注记填充图案” | - | 1 | "icon-opacity": 0.5 |
| 注记填充图案 | 注记填充图案的样式 | - | - | - | "icon-image": "respt_首都" |
| 图符文本自适应 | ？？ | - | - | none | "icon-text-fit": "none" |
| 图符文本自适应间距 | 添加到'图标文本拟合'尺寸的附加区域的大小，按顺时针顺序：顶部，右侧，底部，左侧？？ | - | 像素 | 0,0,0,0 | "icon-text-fit-padding": [ |
| 1, | |||||
| 2, | |||||
| 3, | |||||
| 4 | |||||
| ] | |||||
| 图符间距 | ？？ | - | 像素 | 2 | "icon-padding": 1 |
| 图符光环颜色 | 子图 | - | - | - | "icon-halo-color": "rgba(245, 166, 35, 1)" |
| 图符光环宽度 | - | 像素 | 0 | "icon-halo-width": 1 | |
| 图符光环模糊化 | - | 像素 | 0 | "icon-halo-blur": 2 | |
| 是否重叠 | ？？ | - | - | false | "icon-allow-overlap": true |
| 忽略位置 | ？？ | - | - | false | "icon-ignore-placement": true |
| 图符可选 | ？？ | - | - | false | "icon-optional": false |
| 旋转排列 | - | - | auto | "icon-rotation-alignment": "map" | |
| 图符旋转 | - | 度 | 0 | "icon-rotate": 0 | |
| 是否保持垂直 | - | - | false | "icon-keep-upright": true | |
| 图符偏移 | - | ？ | 0,0 | "icon-offset": [ | |
| 1, | |||||
| 1 | |||||
| ] | |||||
| 图符平移 | - | - | 0，0 | "icon-translate": [ | |
| 2, | |||||
| 2 | |||||
| ] | |||||
| 图符平移排列 | - | - | - | "icon-translate-anchor": "viewport" |