山海鲸可视化

线段

鲸地图可以在“标绘”中添加图形,而“线段”就是图形的一种类型,通过选择两个点即可生成一条线段。

也可以选择多个点来生成线段,如下图所示:

数据线段的示例数据如下:

名称字段(名称) 点位字段(点位)
线段 1 [[123.50006404331965,62.325800310907],[124.47696957661248,62.33147124113512],[124.20832055495694,61.86000752639001]]
线段 2 [[122.30745066978088,62.895583032161596],[123.0844082220346,62.93061084373153],[122.75362431364935,62.503952909728866],[121.4920298723661,63.115560406377284]]
线段 3 [[123.36134358719434,62.84647371376104],[123.98444815880374,62.695123526561645],[124.29215412009233,62.503952909728866]]

选中左侧组件图层中的“基础线段组”,将示例数据绑定到对应的数据字段中,即可自动生成线段,其中点位字段数据类型为“数组”名称字段数据类型为“字符串”,如下图所示:

1. 基本设置

配置项 说明
是否显示 自定义设置是否显示线段,默认开启。
是否可点击 对线段是否可点击进行设置,默认开启,关闭后无法点击线段。
点击时切换视角 对点击线段是否切换视角进行设置,默认开启,点击线段可以切换到预设视角,关闭后点击线段无法切换视角。
视角切换时长 自定义设置视角切换时长,默认值为“500 毫秒”,值越大,视角切换速度越慢。
地图层级 对应地图显示等级,取值范围为“1~19”,默认值为“10”,值越小,切换的视角越高,所能看到的范围越大。
同时选中 默认关闭,开启后可以选中多条线段。

开启/关闭 是否显示设置,效果如下图所示:

开启 同时选中设置,就可以同时选中多条线段,如下图所示:

2. 展示动画

2.1 线段条动画

配置项 说明
是否开启 开启或者关闭线段条动画,默认关闭。
速度 自定义设置线段条动画的速度,默认值为“1”,值越大速度越快。

开启 线段条动画设置,效果如下图所示:

2.2 图案动画

配置项 说明
是否开启 开启或者关闭图案动画,默认关闭。
速度 自定义设置图案动画的速度,默认值为“1”,值越大速度越快。

必须要先设置好“图案样式”后,再开启“图案动画”才会有效果。这里将图案样式设置为“流光”并开启图案动画,效果如下图所示:

3. 线段样式

线段样式共有“默认”“悬停时”“选中后”三种状态,可以分别进行全局样式的设置,由于“悬停时”“选中后”中的设置与“默认”相同,因此这里只介绍“默认”全局样式的设置。

3.1 基本样式

配置项 说明
线条类型 选择线条的类型,有“实线段”“虚线段”,默认为“实线段”。切换为“虚线段”后可以设置每个小线段的长度和间距,长度默认值为“10px”,间距默认值为“15px”
线条宽度 自定义设置线条宽度,默认宽度为“4px”,值越大线段条越粗。
线条颜色 对线条进行颜色配置。(颜色设置方式可以参看教程:设置颜色

线段 样式基本样式设置,如下图所示:

线段 切换不同的线条类型,如下图所示:

3.2 文本样式

配置项 说明
是否显示 显示或者不显示线段文本,默认不显示。
字体 对线段文本的字体、字体大小、颜色等样式进行配置。
偏移 设置文本在 X 和 Y 方向上的偏移,默认为“0,0px”
文本背景 设置线段文本的背景,可选择“无”“颜色”“图片”三种样式。
背景颜色 当文本背景选择“颜色”时,可在此处设置背景颜色。
背景图片 当文本背景选择“图片”时,可在此处设置背景图片。
背景大小 当文本背景选择“颜色”“图片”时,可在此处设置背景尺寸,默认值为“100,30px”
背景偏移 当文本背景选择“颜色”“图片”时,可在此处设置背景尺寸,默认值为“0,0px”

线段 文本样式如下图所示:

3.3 图案样式

配置项 说明
图案 可以选择不同的图案并设置颜色和尺寸,有“无”、“流光”、“箭头 1”、“箭头 2”、“箭头 3”、“自定义”六种图案样式,选择“自定义”,可以上传本地图片作为图案。

线段 切换不同的图案样式,如下图所示:

4. 面板设置

配置项 说明
弹窗 为线段绑定已经添加的弹窗。
显示方式 选择弹窗的显示方式,有“二维跟随”“二维固定”
偏移 自定义设置弹窗的偏移值,X 和 Y 方向上的默认偏移值都为“0px”

线段** 面板设置**,如下图所示:

当线段被选中后,弹窗自动弹出,如下图所示: