课程2：图层操作

哈喽，小伙伴们大家好，欢迎大家来到图观统一开发API及 API调试器入门课程的第5课。上节课程，我们为大家介绍了镜头操作中“获取镜头的视界 、设置镜头的视界、限制镜头视界的操作、接口操作镜头”几部分内容。

本节课程，我们主要讲解“图层操作“，主要包含“地标点、路径图层、区域图层、地标图层、气泡图、热力图”几种图层的操作，以及控制图层显隐、添加/删除图层、获取自定义模型和图标几部分内容，并会在统一API调试器中进行相关的演示操作。

本节课程安排

第一部分：【地标点操作】

第二部分：【路径图层操作】

第三部分：【区域图层操作】

第四部分：【地标图层操作】

第五部分：【气泡图操作】

第六部分：【添加热力图】

第七部分：【控制图层显隐】

第八部分：【删除图层】

第九部分：【添加图层tip】

第十部分：【获取自定义模型和图标】

数字冰雹大数据可视化

（点击视频，观看本节完整版教程）

本节课程详解

一、地标点操作

图观统一开发API涵盖丰富的图层类型，本小节我们为大家介绍地标点图层的操作。

图观统一开发API每一种图层都涵盖5种通用方法，即添加图层、更新图层样式、更新图层数据、控制图层显隐和删除图层这5种方法。

· 添加地标点

添加地标点，使用的是addLandmark方法。

在上方的参数中

• id：地标点的唯一标识。

• iconName：地标点图标名称。

• label：地标点显示的文字

• tag：用户自定义标签

• Coord：经纬度坐标

• coordZ：地标点高度

• visible：图层默认显隐状态

• clearOverlayType方法：删除图层

下图表示了图观统一开发API内置的全部系统图标类型，可以任意选用。

具体内容小伙伴们也可以参看在线文档：

https://www.tuguan.net/doc/tg-api/?manual.manual.landmark.operation

点击执行，可以看到场景中添加了一个地标点，这个地标点显示的是电线杆，可在label指令中去修改地标点显示的文字。

· 更新地标点数据

通过updateLandmarkCoord方法，可以更新地标点的参数信息，比如我们修改地标点经纬度坐标，将高度改为10。

点击执行，可以看到，地标点的位置发生了变化。

· 更新地标点样式

通过updateLandmarkStyle方法，可以更新地标点的id、iconname以及label，如果不想显示文字，也可以将label指令后的文字描述删除。

点击执行，可以看到场景中的图标发生了变化，并且没有显示文字信息。

二、路径图层操作

· 添加路径图层

路径图层就是按照一些点连成的路径线段。添加路径图层使用的是addPath接口方法

在上面的参数中

• ID：路径图层的唯一标识

• type：路径展示出来的样式

• color：路径的颜色

• colorPass：模型对象移动经过后的路径颜色

• width：路径宽度

• tag：用户自定义内容

• visible：图层默认显隐状态

下面的参数是组成路径的点位信息，每个点位都包含经纬度和高度。

clearOverlayType方法是删除图层，可以防止图层数据的二次添加，然后调用addPath来执行添加路径图层。

点击执行，可以看到，场景中添加了一个绿色的路径图层。我们也可以自定义的修改路径的颜色、宽度等参数，来修改路径的样式。以上就是添加路径图层的方法。

· 更新路径图层数据

我们可以通过调用updatePathCoord方法，来修改路径图层的参数信息。

• points ：要更新的路径途径点位信息

• isAppend：是否追加数据

• true：在原有数据后方追加新的数据

• false：清除原有数据，更新全新的数据

这里我们isAppend指令设置的是false并添加了2个点位信息，调用updatePathCoord方法，点击执行，可以看到场景中原有路径已经清除了，更新成只有2个途径点的路径了。

接下来我们将isAppend指令设置为true看一下效果。

首先重新添加路径并执行，可以看到我们初始设置的路径又恢复回来了，接下来点击更新路径图层数据，将isAppend指令设置为true，点击执行，可以看到，在原有的路径基础上，又延伸了一段路径，这就是isAppend指令的作用。以上就是更新路径图层数据的操作。

· 更新路径图层样式

通过updateLandmarkStyle方法。

可以更新路径图层的id、样式类别、颜色、宽度等，点击执行，可以看到场景中的路径图层颜色变为橙色、路径样式变成了双线、宽度也发生了变化。我们也可以将type类型改为Arrow02，宽度改为10米，点击执行，可以看到图层变成了箭头形式的动态路径。

路径图还内置了很多路径样式，具体可以参看TGAPI文档功能手册：

https://www.tuguan.net/doc/tg-api/?manual.manual.path.operation，大家可以任意选择使用。

三、区域图层操作

，时长03:41

· 添加区域图层

区域图层是场景中由若干点位组成的区域围栏，添加区域图层，使用的是addArea方法。

上方的参数分别是

• 区域图层的id/名称/经纬高坐标类别/高度

• type：区域边界样式类型

• color：轮廓颜色

• areaHeight是围栏高度

• fillArea：区域填充类型（可以在场景中的区域图层中看到是有一个平面地动态效果）

• fillPosition：区域填充的位置（如区域轮廓地顶部或底部，当前场景中是填充顶部位置）

• tag：用户自定标签

• visible：图层默认显隐状态

• points：定义区域的点位信息，当前场景中是4个点位信息

我们可对代码进行简单的修改，来变换一下区域图层的样式。

- 将fillArea指令修改为none并执行

- 将areaHeight改为0

- 将fillArea指令修改为Gradient01

- 将coordZ指令改为50并执行

点击执行，就可以看到区域平台的高度发生了变化。

经过以上参数的修改，我们就可以根据实际的需要，灵活的去调整区域图层的样式效果。

· 更新区域图层数据

更新区域图层数据调用的是updateAreaCoord方法，可以修改上面图层的参数信息，如图层对象、图层名曾、经纬高坐标类型、高度、自定义数据和点位信息。

在points指令下，我们可以新增点位或者更新现有点位的信息。

· 更新区域图样式

更新区域图层样式主要是通过updateAreaStyle方法，更新区域内围栏和填充效果的样式。

修改fillArea指令为Grid01，点击执行，场景中就出现了对应的填充效果，位于区域顶部。

这时，我们再将fillPosition中的top改为bottom，点击执行，就可以看到填充效果就变化到了区域的底部。

关于区域图，还有很多效果可以选用，具体可以参看TGAPI文档功能手册：https://www.tuguan.net/doc/tg-api/?manual.manual.area.operation

以上就是用updateAreaStyle方法，更新区域图的操作。

四、地标图层操作

地标图层，是一个多对象图层，与地标点、路径、区域几个图层有一些区别。

· 添加地标图层

在API调试器中我们已经预置了添加地标图层所需要的接口代码，这里要用到的是addLandmarkLayer方法。

我们来看一下上面的参数信息，分别是：图层 ID 、图层名称、经纬高坐标类型，autoScale是跟据摄像机远近自动缩放大小，默认是false，开启true则图层随摄像机距离进行缩放。visible是图层默认显隐状态。

接下来我们详细介绍一下legends和data,data是每个地标图层中各个点位的信息，包含单个点位的id、图例类型、图标文字、经纬度和高度信息。其中，type可以在legends中进行定义，通过legends可以定义图标的图例名称、颜色、图标名称，图标名称可以选择图观™API内置的，也可以选择自定义上传图标。也就是说，data是用于定义图标数据、legends是用于定义图标显示效果的对应关系。

下面我们通过addLandmarkLayer方法来添加地标图层，点击执行，可以看到，场景中增加了多个地标点，因为在当前的代码中，我们把每一个对象都定义为摄像头，所以场景中的地标点都是一样的，我们也可以为各个点定义不同的type类型，实现不同图标的效果。

· 更新地标图层数据

更新地标图层数据，要用到updateLandmarkLayerCoord方法

上面的参数我们要重点强调的是IsAppend这个属性，如果选择false，那么就是更新在现有点位数据，如果IsAppend是true，就是保持现有数据不变的基础上来新增一些点位数据。

我们这里使用的是false，点位数据跟原始添加的点位数据是一样的，在此基础上，我们调整了点位的经纬度信息，点击执行，可以看到，场景中的地标图层点位发生了变化。如果使用true，我们就可以继续添加更多的地标点。

以上就是更新地标图层数据的操作。

· 更新地标图层样式

更新地标图层样式需要使用updateLandmarkLayerStyle方法，通过legends来定义的样式，前面我们也提到了，如果有多个不同类型的图标，我们就可以在legends中修改图标的样式。

在当前的代码面板中，地标图层我们仍然使用的是摄像头，但是iconName图标类型我们选择了people,通过updateLandmarkLayerStyle方法，点击执行，可以看到，场景中原有的摄像头图标都已更新为人员图标。如果像要修改多个图标样式，我们就可以在legends中定义多个图标类型就可以实现了。iconName可以使用的其他系统图标类型，和landmark地标点是一样的。

五、气泡图操作

本节我们为大家介绍气泡图的操作，首先，我们先来看下气泡图层的效果。可以在场景中看到不同颜色气泡的动态效果。

，时长02:43

· 添加气泡图

添加气泡图使用的是addBubbleLayer方法

• speed：气泡的扩散速度，

• radiusMax和radiusMin：气泡最大、最小半径，

• valueMax和valueMin：气泡数据的最大、最小值，

• visible：图层默认显隐状态，

• data：每一个气泡的中心点位，包含id、中心点坐标、value高度、type图例类别等，

• legends已经定义了气泡图的颜色为红色和黄色，因此在data中，我们就要对不同点位定义type类型。

· 更新气泡图数据

更新气泡图数据使用的是updateBubbleLayerCoord方法，可以通过修改接口参数，对气泡图进行更新。

在上面的参数中，大家着重注意isAppend属性，如果isAppend的是true的情况下,相当于是在原有的数据基础上追加新的数据；如果是写成false的情况下，相当于是将原有数据调整为新的数据。

在当前的代码中，包含了4个点位信息，isAppend为true，这里我们添加一个点位信息，点击执行，可以看到场景中增加了一个气泡图。

接下来我们把isAppend改成false，点击执行，可以看到，新增的这一个气泡图就替换了原有的全部气泡图。

· 更新气泡图样式

更新气泡图样式使用的是updateBubbleLayerStyle方法，我们可以对气泡图的扩散速度、最大/最小半径、数据最大/最小值等属性进行更改，并且在之前添加气泡图时所定义的legends属性，也可以在这里进行二次修改。

当前的代码中，已经将原来气泡图颜色进行了修改，并将id中原来的bubbleLayer改为bubble点击执行，可以看到，场景中的气泡图颜色发生了变化。

同样我们也可以对气泡的半径和数据最大最小值进行调整，这里我们将radiusMin改为2，radiusMax改为20，点击执行，可以看到气泡图很明显的变小了。我们也可以通过radius和value的配合，实现我们想要的效果。

六、添加热力图

，时长01:23

热力图使用的是addHeatMapLayer方法，我们首先来看一下参数属性

• clearOverlayType：清除图层，防止多次添加

• alpha：透明度，

• colorMax：热力图最大值上限颜色，

• colorMin：最小值下限颜色，

• radius：每一个点的半径，

• valueMax和valueMin：热力图的最大最小值，

也就是说，我们每一个点的value越接近valueMax数值，则该点所显示的颜色越接近colorMax的颜色。每个点的value越小，越贴近colorMin的颜色。

下面我们点击执行，可以看到，场景中增加了热力图，热力图的中心点就是我们刚刚代码里写入的各个点位参数。

当然，我们也可以对热力图参数进行修改，比如我们将valueMax改为100，点击执行，可以看到热力图中心颜色区域扩大了。

如果将radius数字由30调整为50，点击执行，可以看到，热力图的区域面积变大了以上就是添加热力图的方法。

七、控制图层显隐

控制图层显隐是一个通用功能，每一个图层都可以用到。这里我们使用的是setOverlayVisibility方法，通过传入图层的ID和图层的类型，以visible控制显示或隐藏，就能够实现控制显隐的能力。

以添加好的热力图为例，来设置它的隐藏。首先，我们在API调试器的添加热力图中找到它的id名称，复制heatLayer，在控制图层显隐中将名字复制进id中，overlayType可以在上面查找到对应的图层类别，并将热力图的图层类别复制到下方overlayType代码中，visible选择fasle,点击执行，可以看到场景中的热力图被隐藏了。

如果再将visible改为true,点击执行，那么热力图就会再显示出来。这里要注意 控制图层显隐的id是对应图层的id，overlayType是对应图层的类型。以上就是控制图层显隐的内容。

八、删除图层

· 删除单个图层

删除单个图层使用的是removeOverLay方法，通过写入图层的ID和图层的类别，就可以删除指定图层。

对应多种图层的删除，我们还可以采用按类别删除的方式操作。

首先还是添加气泡图，点击执行，可以看到场景中已经添加好了气泡图。我们再回到删除图层接口中，在“按类别删除图层”方法中，overlayType方法输入bubbleLayer,点击执行，场景中的气泡图就被删除了。

· 按图层类别删除图层

首先添加一个气泡图，再添加一个热力图，这里可以看到热力图的代码中，含有clearOverlayType清除图层，所以前面添加的气泡图就被删除了，当再添加一个地标图，这时场景中就包含了2种图层，回到删除图层，只需要在overlayType方法输入all,点击执行，可以看到，场景种全部图层就都被删除了。

九、添加图层tip

图层tip和图层label的区别在于，label只能显示文字，tip支持我们自定义成任何样式或者结构，来展示在图层的旁边。代码范例如下：

首先我们来添加一个地标点，我们在代码种写入了id和经纬度坐标，并清除其他图层以免二次添加，通过addLandmark添加地标点，点击执行，可以看到场景种添加了一个地标点，并且地标点图标旁显示的是文字“电线杆”，这就是lable，只有文字，无法展示其他的信息。

接下来，我们清楚lable种的文字并执行，可以看到场景中就只剩下地标点图标了，点击执行看一下效果，可以看到场景种的地标点旁边增加了一个信息面板，并在5秒后清除。

接下来我们添加图层tip，添加tip有2种方式，一种是通过URL的方式添加一个指定的网址，来将tip文件显示在场景种，我们先点击执行看一下，可以看到网址引用的tip文件就显示出来了，并且OverlayTip会在场景任意变化的时候始终保持正向显示。isShowClose是指是否显示关闭按钮，如果选择false，则tip旁边的关闭按钮就会消失了。

还有一种方式是通过divid的方式添加tip，通过url的方式，我们是无法编辑tip显示的内容。

通过divid的方式，我们是可以对tip进行操控的，我们先删除刚刚添加的tip。

在当前的代码中，我们首先来介绍divid的添加方式，先传入一个图层，然后divid添加dom元素的id,所以，在代码面板的最上方，我们先创建了一个div,div下的代码结构我们可以任意的编辑，包括tipID、样式、点击事件等，在这里的点击事件，我们写入的是，当点击tip标牌，标牌内容消失的事件逻辑。当然我们也可以通过isShowClose添加关闭按钮来控制tip显隐，但是当前我们通过removeOverlayTip进行控制。点击执行，可以看到场景图标旁出现了我们自定义的标牌，并且没有关闭按钮，我们只需要再次点击标牌，就可以关闭显示。

十、获取自定义模型和图标

本小节我们来介绍获取自定义模型和图标的操作。

，时长02:13

使用自定义图标，我们首先要向场景中添加自定义图标。

在图观官网-我的业务中，找到场景编辑器，进入。在场景编辑器中找到对应的场景。

在场景中，点击上方“图片”tab页签，点击界面中的添加图片，就可以将我们需要的自定义图片上传到场景编辑器中。

接下来回到“场景”工作界面，点击下方“本场景”标签，可以看到我们上传的图标文件，当然，场景编辑器已经预置了大量的图标模型资产可以选用。

在“本场景”中，已经提前上传了“周界摄像头”图标，我们可以通过拖拉拽的方式，将图标加载到场景中，这里要注意的是，如果此时保存场景，那么后续我们每次打开场景都会显示这个图标，所以我们先在右侧模型列表中将图标隐藏。点击保存，发布就可以了。

我们回到API调试器中，第一步就是要上传自定义图标，第二步就是获取场景中都有哪些自定义图标，我们先将后边的代码删除，执行第二步的指令，可以在右下方的事件日志面板中看到，通过result回调出了很多的信息：scenes是场景都有哪些状态；customIcons代表自定义图标，这里要注意在图标名称前多了“custom-”，我们使用的时候要引用全称；customModels是场景中的自定义模型。接下来第三步，就是添加自定义图标名称。

在添加自定义图标的代码中，我们定义了图标的id为landmark，图标的iconName 是custom-周界摄像头，并且设定添加图标并将视野聚焦到图标，点击执行，可以看到场景中显示出我们刚刚上传的自定义图标，并且场景视角进行了聚焦动作。

本节总结

好了，本节课和大家介绍了几种典型图层的操作方法，相信大家已经熟练掌握了，小伙伴可以自己在API调试器中进行联系使用哦~

下节预告

下节课，我们将为大家介绍“模型操作”的内容，会在API调试器中为大家详细演示，助您更加便捷高效地调试复杂代码、构建数字孪生应用。记得一定持续关注我们哦~

图观在线试用地址

图观™引擎现可申请免费试用！现在试用还可获得1对1技术支持和专属大礼包~还等什么，快快联系我们体验图观™引擎的强大功能吧~

访问图观™官方网站，在浏览器中输入网址：https://www.tuguan.net