# 矢量瓦片服务发布/预览/详情
# 发布服务
# 
功能说明
通过此功能，可将MapGIS矢量瓦片以及MBTiles发布为MapGIS标准的矢量瓦片服务。
提示：
发布服务时，只能选择注册的文件夹中对应文件。具体步骤见“文件夹管理”。
# 
操作说明
1. 在服务管理页面，点击【服务发布】-【二维地图服务】-【矢量瓦片服务】，启动瓦片服务发布页面；
2. 设置基本信息，可设置如下信息：
- 【数据源类型】：可支持矢量瓦片、矢量瓦片文件夹和DataStore MongoDB矢量瓦片三种来源。
- 【矢量瓦片】：包括MapGIS矢量瓦片（MUVT、VTDF）、MapGIS矢量瓦片（MongoDB）、MapGIS矢量瓦片（目录格式）、MBTiles四种类型。MapGIS矢量瓦片（MUVT、VTDF）是MapGIS裁剪好的MUVT或VTDF瓦片（格式为*.MUVT/*.VTDF）；MapGIS矢量瓦片（MongoDB）是直接存储在MongoDB数据库中的矢量瓦片数据；MapGIS矢量瓦片（目录格式）是以目录格式存储的MapGIS矢量瓦片；MapGIS Tile（MBTILES）是以MBTILES瓦片（格式为*.MBTILES）格式存储的矢量瓦片。
- 【矢量瓦片文件夹】：当有多个矢量瓦片文件时，可通过文件夹方式进行批量发布；
- 【DataStore MongoDB矢量瓦片】：DataStore大数据的MongoDB数据源中存储的栅格瓦片。
- 【数据路径】：选择数据源在服务器中的存储路径（MongoDB则需要填写数据源地址、数据库名、用户名和密码）；
- 【服务名称】：设置当前服务的名称；
- 【所属文件夹】：设置当前服务的所属文件夹。
3. 在【安全设置】中可设置服务的访问权限，具体可参考二维地图服务的“权限设置”；
4. 点击【发布服务】按钮，发布当前矢量瓦片服务。
# 服务详情
发布矢量瓦片服务后，可通过服务详情查看服务信息，并编辑服务参数。
# 预览服务
1. 发布矢量瓦片服务成功后，页面重新回到服务列表，点击当前服务右侧的【预览】按钮，可进入矢量瓦片服务预览页面：
2. 显示预览页面之前会弹出调试对话框，用户可对【调试选项】进行勾选，如下图所示：
- 【是否显示瓦片边界】：勾选即可显示瓦片的边界；
- 【是否显示碰撞框】：勾选即以框的形式显示要素碰撞区域；
- 【是否显示过度拉伸检查】：勾选即可显示视图过度拉伸检查结果；
3. 勾选完调试选项后，预览页面如下图所示：
- 【打开】：用户可预览本地地图（*_style.json）和自定义地图模板；
- 【保存】：用户可下载json样式到本地（*.json和*.html）；
- 【数据源】：显示当前数据源的详细信息；
- 【样式设置】：对地图的各种样式信息进行设置；
- 【显示模式】：提供两种地图显示模式：
- 【地图模式】：显示全部图层数据；
- 【交互模式】：可点选【图层列表】中的图层进行选择性显示；
- 【图层列表】：在地图视图中点选某一处，弹出窗口显示该点处的所有图层，单击窗口中的某一图层，列表将定位至该图层处；
- 【添加图层】：用户可在此添加新图层；
- 【显示/隐藏】：默认显示所有图层，单击【隐藏】将所有图层设为不可见；
- 【图层信息】：选择某一图层后，将弹出该图层的属性框；
- 【图层属性】：显示图层ID、图层类型、数据源、数据源图层、最小级别和最大级别；
- 【过滤显示】：用户可输入过滤条件选择性显示要素；
- 【图层样式】：用户可对图层的颜色、边线颜色、透明度等样式进行设置；
- 【编辑器】：在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" |