山海鲸可视化

标记点概述

1. 标记点简介

在电子地图和卫星地图中,标记点是很常用的一个功能,也是最常用的和数据进行交互的功能。
标记点通过手动添加,可以移动位置的称为自由标记点;通过数据添加,例如经纬度、XYZ 坐标的,称为数据标记点。

2. 标记点的样式设置

2.1 添加标记点

2.1.1 添加自由标记点

在项目中,双击鲸地图可以进入编辑状态,这个状态下鲸地图之外的其他组件都会自动隐藏掉,左侧的面板会切换成鲸地图相关功能。

在鲸地图组件编辑界面左侧菜单栏中点击标绘,展开后在“标记”中可以看到软件为我们添加了许多预设自由标记点样式。

我们选择其中一个标记点样式添加在地图上:

可以看到添加到模型中的标记点在左侧组件图层中自动形成了一个标记组,当我们在鲸地图场景中添加标记点时,实际上是添加一个标记组。标记组即一组标记点的结合,可以通用地设置这组标记的交互,比如弹窗、高亮等。

当选中标记组时在场景编辑界面左上角可以看到“+添加”按钮,点击按钮可以在场景中继续添加该标记组中的标记点样式。

2.1.2 数据标记点

很多时候,我们需要数据联动,数据筛选时。光用自由标记点是不够的,我们需要将自由标记点转换为数据标记点。这个时候,我们可以先选中所有的自由标记点,右击选择复制数据:

然后新建一个 Excel,并按下“Ctrl+V”,将“名称”更改为数据标记 1和**数据标记 2****。**

【温馨提示】Excel 文件也可以替换成 API 或者数据库,这样标记点的名称、位置和数量都会自动根据数据来动态生成。

保存这个 Excel 为示例数据,然后在山海鲸中点击左上角数据中的添加数据,将该数据添加到项目中。

然后将数据中名字与位置字段依标签填入,并删除之前添加的自由标记点,这样数据标记点就添加完毕了,同时自由标记点也被转换成了数据标记点。

我们可以在这个基础上进一步设置数据联动和数据筛选。

2.2 标记样式设置

设置标记样式的时候,是在标记组上统一设置的,交互也是在标记组上统一设置的。标记组下所有的标记共享标记组的样式和交互。

下面对这些配置项进行说明:

2.2.1 基本设置

配置项 说明
是否显示 设置是否显示标记点。
是否可点击 设置标记点是否可以被点击。
点击时切换视角 打开该设置,点击标记点后会自动切换到该标记点的视角,默认关闭。
同时选中 设置是否可以同时选中标记点。
隐藏区域外标记 当标记点位于当前行政区划外时自动隐藏。

标记点 基本设置,如下图所示:

标记点** 开启点击时切换视角**设置项,效果如下图所示:

当开启点击时切换视角设置项时,可以设置“视角切换时长”“地图层级”

配置项 说明
视角切换时长 设置视角切换时长,默认为“500 毫秒”,时长越小,切换视角的速度越快。
地图层级 对应地图显示等级,取值范围 1~19,默认为“10”,值越大,点击标记点切换的视角越细致。

2.2.2 聚合设置

(1)基本设置

配置项 说明
是否开启 设置是否开启聚合。
聚合距离 当标记间距小于该值时自动聚合。
切换时长 设置点击聚合图形后,视角切换时间的长短。
视窗内边距 视角切换后图形相对于地图的内边距。

标记点 基本设置,如下图所示:

(2)样式设置

配置项 说明
标记图片 可添加本地图片作为聚合标记图片。
标记尺寸 设置聚合标记的大小,默认值为“50,50”
聚合数字字体 设置聚合数字的字体,包括字体、颜色、大小等。
聚合数字偏移 设置聚合数字的偏移大小,默认值为“0,-35”
聚合数字背景 设置聚合数字的背景,可选择“无”“颜色”“图片”三种样式。
背景颜色 当聚合数字背景选择“颜色”时,可在此处设置背景颜色。
背景图片 当聚合数字背景选择“图片”时,可在此处设置背景图片。
背景尺寸 当聚合数字背景选择“颜色”“图片”时,可在此处设置背景尺寸,默认值为“50,30”
背景偏移 当聚合数字背景选择“颜色”“图片”时,可在此处设置背景尺寸,默认值为“0,0”

标记点 样式设置,如下图所示:

2.2.3 标记样式

标记样式分为“默认”“悬停时”“选中后”三种状态,标记样式在这三种状态下的设置项是一样的。

(1)基本样式

配置项 说明
标记图片 可添加本地图片作为标记点图片。
标记尺寸 设置标记点的大小,默认值为“50,50”
标记偏移 设置标记点在 X 和 Y 方向上的偏移值。

标记点 基本样式设置,如下图所示:

(2)文本样式

配置项 说明
是否显示 设置是否显示标记点。
字体 设置标记点字体的样式,包括字体、颜色、大小等。
偏移 设置标记点字体的偏移大小,默认值为“0,-35”
文本背景 设置标记点文本的背景,可选择“无”“颜色”“图片”三种样式。
背景颜色 当标记点文本背景选择“颜色”时,可在此处设置背景颜色。
背景图片 当标记点文本背景选择“图片”时,可在此处设置背景图片。
背景大小 当标记点文本背景选择“颜色”“图片”时,可在此处设置背景尺寸,默认值为“50,30”
背景偏移 当标记点文本背景选择“颜色”“图片”时,可在此处设置背景尺寸,默认值为“0,0”

标记点 文本样式设置,如下图所示:

2.2.4 面板设置

标记面板主要用于标记点设置交互弹窗,当我们需要点击标记点显示某一弹窗时可在此处进行设置。

配置项 说明
弹窗 当需要标记点与弹窗设置交互时可在此处选择添加在项目中的弹窗。
显示方式 即弹窗展示方式,可选择“二维跟随”“二维固定”显示状态。
偏移 设置弹窗的偏移大小,默认值为“0,0px”

标记点 面板设置,如下图所示: