GISBox

如何用WFS服务地址解决矢量数据加载卡顿?

本篇教程主要教大家将WFS服务生成的协议地址应到山海鲸,保证矢量文件在山海鲸中的流畅导入与加载,并在线实时查看其属性值。如果是大规模数据,建议使用MVT协议服务,这个我们会在下期教程中给大家介绍。

1. 新建场景

我们打开GISBox软件,点击场景编辑中的“新建场景”按钮,在“新建场景”的弹框中,点击左侧的“三维场景”模块,并选中右侧的“空白三维场景”,输入“场景名称”,接着点击“确定”按钮。

Snipaste_2026-05-09_19-38-30.jpg

2. 导入矢量文件

场景创建成功后,我们将场景切换至2D,点击场景上方Tab栏中的“矢量”,并选择“GEOJSON”,将本地的.geojson文件导入,一般的GeoJSON文件都是带有坐标的,当我们导入时,这里的坐标系会自动识别其坐标。

Snipaste_2026-05-09_19-40-23.jpg


识别后,点击确定,场景中就会出现我们导入的矢量数据。左侧会显示大量的矢量图层。

Snipaste_2026-05-09_19-41-28.jpg

3. 发布为服务

我们点击上方的“发布为服务”,服务发布成功后,就会将新的服务添加至服务列表。

Snipaste_2026-05-09_19-43-22.jpg


点击“服务”的下拉框按钮,选择WFS协议,就会生成对应的服务地址,我们直接点击服务地址,即可完成复制。

Snipaste_2026-05-09_19-44-08.jpg

Snipaste_2026-05-09_19-45-03.jpg

4. 新建山海鲸可视化项目

WFS服务地址复制成功后,打开山海鲸可视化,点击“新建”,在“创建新的项目”弹窗左侧选中“GIS和底图”,并选中一个“空白的GIS3D场景”,接着在右下角输入项目名称,完成后点击创建项目。

Snipaste_2026-05-09_19-48-02.jpg

5. 导入WFS协议地址

创建成功后,我们双击屏幕,进入“鲸孪生”编辑界面,在左侧的组件栏中选中“GIS”,并在资源库下找到矢量,点击“导入矢量”

Snipaste_2026-05-09_19-54-21.jpg


在导入矢量图的弹框里,左侧的协议类型选择“WFS”,并将我们复制好的WFS地址粘贴进来,此时WFS名称和下方的图层中就会自动获取。全部设置完成后,点击“导入”。场景中道路路线原始数据,需要客户端自行渲染,当加载范围大,数据量多时,加载速度会明显变慢,但小范围、少量数据加载时,速度可满足日常使用。

Snipaste_2026-05-09_19-55-52.jpg


为了看得更加清晰,我先关闭天空中“云”的样式。

Snipaste_2026-05-09_19-57-21.jpg


细心的小伙伴会发现山海鲸场景显示的矢量数据是黄色的,而在GISBox场景中显示是橙色的。这是由于WFS是不带样式的,样式由客户端自己决定,因此我们可以直接在山海鲸中修改矢量样式,也可以设置路线选中后的颜色。

Snipaste_2026-05-09_19-59-42.jpg

6. 添加数据

导入场景后,右侧的GIS层列表下就会显示我们所添加的“余杭区正式道路_wfs”,接着在上方Tab栏中找到“数据”,点击其下拉框,选中“添加数据”

Snipaste_2026-05-09_20-02-42.jpg


在数据库中选择“内部数据库”进行字段名添加。

Snipaste_2026-05-09_20-03-32.jpg


此时,我们回到GISBox中,打开属性表,将属性表中的一行字段名称填入内部数据库中,如果不知道字段的数据类型,可以鼠标左键选中该字段,再右键选中“修改字段”,就可以查看字段类型了。

Snipaste_2026-05-09_20-05-22.jpg


我们回到山海鲸,把属性表中的字段名称都添加进来,并选中对应的字段类型。全部输入后,直接点击下一步,接着点确定。此时我们的数据已经加载完成了。

Snipaste_2026-05-09_20-07-34.jpg

7. 添加表格和弹窗

点击右上角的“退出编辑”,我们可以在看板中添加弹窗和表格,这里我直接用上期教程中的弹窗,我将之前的弹窗添加到了资产库中,打开资产库直接选择,大家也可以根据自己的喜欢样式进行制作,制作教程可以参考山海鲸官网的视频或图文教程。

Snipaste_2026-05-09_20-12-05.jpg


选中表格,在右侧的数据中,将内部数据库中的字段名称都添加到上方的数据字段中。

Snipaste_2026-05-09_20-29-55.jpg


8. 设置表格与内置数据库的交互

接着切换到鲸孪生界面,在左侧选中我们导入的余杭区正式道路_wfs,在右侧中添加“交互”,动作选择Payload写入内置数据源,数据表就选择我们添加的内部数据库。其他保持不变,点击确定,即可完成表格与内置数据源的交互。

Snipaste_2026-05-09_20-22-47.jpg


我们点击任意道路,表格中就会显示这条道路的各类字段的属性值。

Snipaste_2026-05-11_09-23-08.jpg


弹框中添加了道路名称、施工日期、施工单位以及施工执行编号这几个基础单行文本。为了实时显示道路的基本信息,这里我们给大家演示一下道路名称,我们选中道路名称旁的基础单行文本,在右侧的样式中,找到文本,点击“扩展设置”,选择“生成数据字段”

Snipaste_2026-05-11_09-46-37.jpg


切换至数据,将内部数据库中的“name”字段拖入到上方的数据字段中,即可完成数据道路名称的实时显示,其他几个数据字段大家可以参考道路名称自己尝试设置。

Snipaste_2026-05-11_09-48-10.jpg


双击进入鲸孪生编辑界面,选中左侧的“余杭区正式道路_wfs”,并在右侧的交互中添加一个与弹窗的交互,这里的动作选择“控制弹窗”,并选择大屏中的弹窗,操作选择“打开弹窗”,顺序就保持“与上一动作同时”,完成点击确定。

Snipaste_2026-05-11_09-49-54.jpg

9. 道路路线实时预览

全部设置完成后,我们点击界面右上方的预览按钮,打开至全屏预览模式,我们任意点击场景中的道路,弹窗中的表格就会显示其对应的道路属性。

Snipaste_2026-05-11_09-51-35.jpg

Snipaste_2026-05-11_09-52-21.jpg


我们关闭弹窗后,再随机点击道路,也是同样会跳出弹窗,方便我们实时查看道路属性值。

Snipaste_2026-05-11_09-53-37.jpg

10. 视频教程