Appearance
第五章 图层操作
目录
- 第一节 地标点操作
- 第二节 路径图层操作
- 第三节 区域图层操作
- 第四节 地标图层操作
- 第五节 气泡图操作
- 第六节 添加热力图
- 第七节 控制图层显隐
- 第八节 删除图层
- 第九节 添加图层 tip
- 第十节 获取自定义模型和图标
第一节 地标点操作
引入版本：3.0 起支持
图观统一开发 API 涵盖丰富的图层类型，本小节我们为大家介绍地标点图层的操作。 图观统一开发 API 每一种图层都涵盖 5 种通用方法，即添加图层、更新图层样式、更新图层数据、控制图层显隐和删除图层这 5 种方法。
1. 添加地标点
添加地标点，使用的是addLandmark 方法。
JavaScript
// 地标点数据
let jsonData = {
id: 'landmark', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
iconName: 'utilitypole', // 内置图标名称，见图观官网统一API开发手册
label: '电线杆', // 图标标签文本
tag: 'custominfo', // 用户自定标签，用户保存用户的扩展数据
coord: [116.34733686258835, 40.103701241055816], // XY 轴坐标，X：经度；Y：纬度
coordZ: 5, // Z 轴高度（单位：米）
visible: true, // 添加当前图层时默认是显示还是隐藏
};
// 添加地标点
appInstance.uniCall('addLandmark', jsonData, (result) => {
console.log(result);
});在上方的参数中
- id：地标点的唯一标识。
- iconName：地标点图标名称。
- label：地标点显示的文字。
- tag：用户自定义标签。
- Coord：经纬度坐标。
- coordZ：地标点高度。
- visible：图层默认显隐状态。
- clearOverlayType 方法：删除图层。
下图表示了图观统一开发 API 内置的全部系统图标类型，可以任意选用。
具体内容小伙伴们也可以参看在线文档
点击执行，可以看到场景中添加了一个地标点，这个地标点显示的是电线杆，可在 label 指令中去修改地标点显示的文字。
2. 更新地标点数据
通过 updateLandmarkCoord 方法，可以更新地标点的参数信息，比如我们修改地标点经纬度坐标，将高度改为 10。
JavaScript
let jsonData = {
id: 'landmark', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
tag: 'custominfo', // 用户自定标签，用户保存用户的扩展数据
coord: [116.35029146144056, 40.08218624813793], // XY 轴坐标，X：经度；Y：纬度
coordZ: 64, // Z 轴高度（单位：米）
};
appInstance.uniCall('updateLandmarkCoord', jsonData, (result) => {
console.log(result);
});点击执行，可以看到，地标点的位置发生了变化。
3. 更新地标点样式
通过 updateLandmarkStyle 方法，可以更新地标点的 id、iconname 以及 label，如果不想显示文字，也可以将 label 指令后的文字描述删除。
JavaScript
let jsonData = {
id: 'landmark', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
iconName: 'firehydrant', // 内置图标名称：见图观官网统一API开发手册
label: '消防栓', // 图标标签文本
};
appInstance.uniCall('updateLandmarkStyle', jsonData, (result) => {
console.log(result);
});点击执行，可以看到场景中的图标发生了变化，并且没有显示文字信息。
第二节 路径图层操作
引入版本：3.0 起支持
1. 添加路径图层
路径图层就是按照一些点连成的路径线段。添加路径图层使用的是 addPath 接口方法
JavaScript
let jsonData = {
id: 'path', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: '路径', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
type: 'Arrow02', // 路线样式类别 Arrow01 Arrow02 Arrow03 Arrow04 Arrow05 Arrow06 Segment01 Segment02 Segment03 Segment04 Segment05 Segment06
color: '#00ff00', // 路线颜色，颜色透明（HEX 颜色值）
colorPass: '#00ff00', // 模型对象 移动经过后的 路径颜色（HEX 颜色值）
width: 4, // 路径宽度（单位：米）
tag: 'custominfo', // 用户自定标签，用户保存用户的扩展数据
visible: true, // 添加当前图层时默认是显示还是隐藏
points: [
// 定义路径途径点
{
coord: [116.34603714470629, 40.104152247802745], // 经纬度
coordZ: 0.31740248865418297, // 高度
},
{
coord: [116.34901522493023, 40.104242682940665],
coordZ: 0.31740248865418297,
},
{ coord: [116.3490355248159, 40.102727956585376], coordZ: 0.01 },
{ coord: [116.35125951982042, 40.10283287992427], coordZ: 0.01 },
{
coord: [116.35129453934645, 40.1043028002235],
coordZ: 0.3431147596026204,
},
{
coord: [116.35115795058054, 40.10558184351076],
coordZ: 0.3431147596026204,
},
{
coord: [116.34899143445224, 40.105555974457126],
coordZ: 0.2661687596310658,
},
{
coord: [116.34593524011154, 40.10541167538699],
coordZ: 0.3431147596024748,
},
],
};
appInstance.uniCall('addPath', jsonData, (result) => {
console.log(result);
});在上面的参数中
- ID：路径图层的唯一标识
- type：路径展示出来的样式
- color：路径的颜色
- colorPass：模型对象移动经过后的路径颜色
- width：路径宽度
- tag：用户自定义内容
- visible：图层默认显隐状态
下面的参数是组成路径的点位信息，每个点位都包含经纬度和高度。 clearOverlayType 方法是删除图层，可以防止图层数据的二次添加，然后调用 addPath 来执行添加路径图层。
JavaScript
let jsonData = {
overlayType: 'landmark',
};
appInstance.uniCall('clearOverlayType', jsonData, (result) => {
console.log(result);
});点击执行，可以看到，场景中添加了一个绿色的路径图层。我们也可以自定义的修改路径的颜色、宽度等参数，来修改路径的样式。以上就是添加路径图层的方法。
2. 更新路径数据
我们可以通过调用 updatePathCoord 方法，来修改路径图层的参数信息。
JavaScript
let jsonData = {
id: 'path', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: '路径', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
isAppend: true, // 是否追加数据（按数据顺序），true：在原有数据后方追加数据；false：清除原有数据，更新数据
tag: 'custominfo', // 用户自定标签，用户保存用户的扩展数据
points: [
{
coord: [116.34691193481216, 40.08447805812725],
coordZ: 1,
},
{
coord: [116.34703594315899, 40.08351674380817],
coordZ: 1,
},
],
};
appInstance.uniCall('updatePathCoord', jsonData, (result) => {
console.log(result);
});- points ：要更新的路径途径点位信息
- isAppend：是否追加数据
- true：在原有数据后方追加新的数据
- false：清除原有数据，更新全新的数据
这里我们 isAppend 指令设置的是 false 并添加了 2 个点位信息，调用 updatePathCoord 方法，点击执行，可以看到场景中原有路径已经清除了，更新成只有 2 个途径点的路径了。
接下来我们将 isAppend 指令设置为 true 看一下效果。
首先重新添加路径并执行，可以看到我们初始设置的路径又恢复回来了，接下来点击更新路径图层数据，将 isAppend 指令设置为 true，点击执行，可以看到，在原有的路径基础上，又延伸了一段路径，这就是 isAppend 指令的作用。以上就是更新路径图层数据的操作。
3. 更新路径样式
通过updateLandmarkStyle方法。
JavaScript
let jsonData = {
id: 'path', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
type: 'Segment05', // 路线样式类别， Arrow01 Arrow02 Arrow03 Arrow04 Arrow05 Arrow06 Segment01 Segment02 Segment03 Segment04 Segment05 Segment06
color: '#0000dd', // 路线颜色，颜色透明（HEX 颜色值）
colorPass: '#FFFF00', // 模型对象 移动经过后的 路径颜色（HEX 颜色值）
width: 10, // 宽度（单位：米）
};
appInstance.uniCall('updatePathStyle', jsonData, (result) => {
console.log(result);
});可以更新路径图层的 id、样式类别、颜色、宽度等，点击执行，可以看到场景中的路径图层颜色变为橙色、路径样式变成了双线、宽度也发生了变化。我们也可以将 type 类型改为 Arrow02，宽度改为 10 米，点击执行，可以看到图层变成了箭头形式的动态路径。
路径图还内置了很多路径样式，具体可以参看 TGAPI 文档功能手册。
第三节 区域图层操作
引入版本：3.0 起支持
1. 添加区域图
区域图层是场景中由若干点位组成的区域围栏，添加区域图层，使用的是addArea 方法。
JavaScript
let jsonData = {
id: 'area', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: '区域轮廓', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
coordZ: 5, // 高度（单位：米）
type: 'Segment03', // 区域边界样式类别 Arrow01 Gradient01 Gradient02 Gradient03 Grid01 Grid02 Grid03 Grid04 Grid05 Segment01 Segment02 Segment03
color: '#00ff00', // 颜色（HEX 颜色值）
areaHeight: 30, // 围栏高度（单位：米）
fillArea: 'Gradient01', // 区域填充样式类别 Gradient01 Gradient02 Grid01 Grid02 Segment01 Segment02
fillPosition: 'top', // 区域填充的位置，top/bottom，默认top
tag: 'custominfo', // 用户自定标签，用户保存用户的扩展数据
visible: true, // 添加当前图层时默认是显示还是隐藏
points: [
// 定义区域边界
{ coord: [116.34603714470629, 40.104152247802745] },
{ coord: [116.34901522493023, 40.104242682940665] },
{ coord: [116.3490355248159, 40.102727956585376] },
{ coord: [116.35125951982042, 40.10283287992427] },
{ coord: [116.35129453934645, 40.1043028002235] },
{ coord: [116.35115795058054, 40.10558184351076] },
{ coord: [116.34899143445224, 40.105555974457126] },
{ coord: [116.34593524011154, 40.10541167538699] },
],
};
appInstance.uniCall('addArea', jsonData, (result) => {
console.log(result);
});上方的参数分别是
- 区域图层的 id/名称/经纬高坐标类别/高度
- type：区域边界样式类型
- color：轮廓颜色
- areaHeight 是围栏高度
- fillArea：区域填充类型（可以在场景中的区域图层中看到是有一个平面地动态效果）
- fillPosition：区域填充的位置（如区域轮廓地顶部或底部，当前场景中是填充顶部位置）
- tag：用户自定标签
- visible：图层默认显隐状态
- points：定义区域的点位信息，当前场景中是 4 个点位信息
我们可对代码进行简单的修改，来变换一下区域图层的样式。
- 将 fillArea 指令修改为 none 并执行
- 将 areaHeight 改为 0
- 将 fillArea 指令修改为 Gradient01
- 将 coordZ 指令改为 50 并执行 点击执行，就可以看到区域平台的高度发生了变化。
经过以上参数的修改，我们就可以根据实际的需要，灵活的去调整区域图层的样式效果。
2. 更新区域图层数据
更新区域图层数据调用的是updateAreaCoord方法，可以修改上面图层的参数信息，如图层对象、图层名曾、经纬高坐标类型、高度、自定义数据和点位信息。
JavaScript
let jsonData = {
id: 'area', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: '区域轮廓', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
coordZ: 1, // 高度（单位：米）
tag: 'custominfo', // 用户自定标签，用户保存用户的扩展数据
points: [
{ coord: [116.34603714470629, 40.104152247802745] },
{ coord: [116.34901522493023, 40.104242682940665] },
{ coord: [116.35129453934645, 40.1043028002235] },
{ coord: [116.35115795058054, 40.10558184351076] },
{ coord: [116.34899143445224, 40.105555974457126] },
{ coord: [116.34593524011154, 40.10541167538699] },
],
};
appInstance.uniCall('updateAreaCoord', jsonData, (result) => {
console.log(result);
});在 points 指令下，我们可以新增点位或者更新现有点位的信息。
3. 更新区域图样式
更新区域图层样式主要是通过 updateAreaStyle 方法，更新区域内围栏和填充效果的样式。
JavaScript
let jsonData = {
id: 'area', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
type: 'Gradient01', // 区域边界样式类别 Arrow01 Gradient01 Gradient02 Gradient03 Grid01 Grid02 Grid03 Grid04 Grid05 Segment01 Segment02 Segment03
color: '#FF0000', // 颜色（HEX 颜色值）
areaHeight: 60, // 围栏高度（单位：米）
fillArea: 'none', // 区域填充样式类别 Gradient01 Gradient02 Grid01 Grid02 Segment01 Segment02
fillPosition: 'top', // 区域填充的位置，top/bottom，默认top
};
appInstance.uniCall('updateAreaStyle', jsonData, (result) => {
console.log(result);
});修改 fillArea 指令为 Grid01，点击执行，场景中就出现了对应的填充效果，位于区域顶部。
这时，我们再将fillPosition 中的 top 改为 bottom，点击执行，就可以看到填充效果就变化到了区域的底部。
关于区域图，还有很多效果可以选用，具体可以参看 TGAPI 文档功能手册
第四节 地标图层操作
引入版本：3.0 起支持
1. 添加地标图层
在 API 调试器中我们已经预置了添加地标图层所需要的接口代码，这里要用到的是addLandmarkLayer方法。
JavaScript
appInstance.uniCall('addLandmarkLayer', jsonData, (result) => {
console.log(result);
});我们来看一下上面的参数信息，分别是：图层 ID 、图层名称、经纬高坐标类型，autoScale 是跟据摄像机远近自动缩放大小，默认是 false，开启 true 则图层随摄像机距离进行缩放。visible 是图层默认显隐状态。
接下来我们详细介绍一下 legends 和 data,data 是每个地标图层中各个点位的信息，包含单个点位的 id、图例类型、图标文字、经纬度和高度信息。其中，type 可以在 legends 中进行定义，通过 legends 可以定义图标的图例名称、颜色、图标名称，图标名称可以选择图观 ™API 内置的，也可以选择自定义上传图标。也就是说，data 是用于定义图标数据、legends 是用于定义图标显示效果的对应关系。
JavaScript
legends: [
// 定义图层包含图例，支持为不同图例定义各自样式
{
name: '摄像头', // 图层内图例名称，新建时调用者自己传入的唯一名称，用于各种操作的图例识别
color: '#73FFFF', // 颜色（HEX 颜色值）
iconName: 'camera' // 内置图标名称，见图观官网统一API开发手册
},
{
name: '电线杆', // 图层内图例名称，新建时调用者自己传入的唯一名称，用于各种操作的图例识别
color: '#73FFFF', // 颜色（HEX 颜色值）
iconName: 'utilitypole' // 内置图标名称，见图观官网统一API开发手册
},
],
data: [
// 定义图层可视化数据
{
id: '1', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
type: '摄像头', // 地标点的图例类别名称
label: '', // 图标标签文本
coord: [116.34603714470629, 40.104152247802745], // XY 轴坐标，X：经度；Y：纬度
coordZ: 2 // Z 轴高度（单位：米）
},
{
id: '2', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
type: '摄像头', // 地标点的图例类别名称
label: '', // 图标标签文本
coord: [116.34901522493023, 40.104242682940665], // XY 轴坐标，X：经度；Y：纬度
coordZ: 2 // Z 轴高度（单位：米）
},
{
id: '3', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
type: '摄像头', // 地标点的图例类别名称
label: '', // 图标标签文本
coord: [116.3490355248159, 40.102727956585376], // XY 轴坐标，X：经度；Y：纬度
coordZ: 2 // Z 轴高度（单位：米）
},
{
id: '4', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
type: '摄像头', // 地标点的图例类别名称
label: '', // 图标标签文本
coord: [116.35125951982042, 40.10283287992427], // XY 轴坐标，X：经度；Y：纬度
coordZ: 2 // Z 轴高度（单位：米）
},
{
id: '5', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
type: '摄像头', // 地标点的图例类别名称
label: '', // 图标标签文本
coord: [116.35129453934645, 40.1043028002235], // XY 轴坐标，X：经度；Y：纬度
coordZ: 2 // Z 轴高度（单位：米）
},
{
id: '6', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
type: '摄像头', // 地标点的图例类别名称
label: '', // 图标标签文本
coord: [116.35115795058054, 40.10558184351076], // XY 轴坐标，X：经度；Y：纬度
coordZ: 2 // Z 轴高度（单位：米）
},
],下面我们通过 addLandmarkLayer 方法来添加地标图层，点击执行，可以看到，场景中增加了多个地标点，因为在当前的代码中，我们把每一个对象都定义为摄像头，所以场景中的地标点都是一样的，我们也可以为各个点定义不同的 type 类型，实现不同图标的效果。
2. 更新地标图层数据
更新地标图层数据，要用到updateLandmarkLayerCoord方法
JavaScript
appInstance.uniCall('updateLandmarkLayerCoord', jsonData, (result) => {
console.log(result);
});上面的参数我们要重点强调的是 IsAppend 这个属性，如果选择 false，那么就是更新在现有点位数据，如果 IsAppend 是 true，就是保持现有数据不变的基础上来新增一些点位数据。
我们这里使用的是 false，点位数据跟原始添加的点位数据是一样的，在此基础上，我们调整了点位的经纬度信息，点击执行，可以看到，场景中的地标图层点位发生了变化。如果使用 true，我们就可以继续添加更多的地标点。
以上就是更新地标图层数据的操作。
3. 更新地标图层样式
更新地标图层样式需要使用updateLandmarkLayerStyle方法，通过 legends 来定义的样式，前面我们也提到了，如果有多个不同类型的图标，我们就可以在 legends 中修改图标的样式。
JavaScript
appInstance.uniCall('updateLandmarkLayerStyle', jsonData, (result) => {
console.log(result);
});在当前的代码面板中，地标图层我们仍然使用的是摄像头，但是 iconName 图标类型我们选择了 people,通过 updateLandmarkLayerStyle 方法，点击执行，可以看到，场景中原有的摄像头图标都已更新为人员图标。如果像要修改多个图标样式，我们就可以在 legends 中定义多个图标类型就可以实现了。iconName 可以使用的其他系统图标类型，和 landmark 地标点是一样的。
第五节 气泡图操作
引入版本：3.0 起支持
本节我们为大家介绍气泡图的操作，首先，我们先来看下气泡图层的效果。可以在场景中看到不同颜色气泡的动态效果。
1. 添加气泡图
添加气泡图使用的是addBubbleLayer方法
JavaScript
let jsonData = {
id: 'bubble', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
layerName: '气泡图层', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
fillArea: 'none', // 区域填充样式类别 none
speed: 10, // 气泡扩散速度（单位：米/秒）
radiusMax: 50, // 气泡最大半径（单位：米）
radiusMin: 20, // 气泡最小半径（单位：米）
valueMax: 100, // 数据最大值上限
valueMin: 5, // 数据最小值下限
visible: true, // 添加当前图层时默认是显示还是隐藏
legends: [
// 定义图层包含图例，支持为不同图例定义各自样式
{
name: 'legend01', // 图层内图例名称，新建时调用者自己传入的唯一名称，用于各种操作的图例识别
color: '#ff0000', // 颜色（HEX 颜色值）
},
{
name: 'legend02',
color: '#00ff00',
},
],
data: [
// 定义图层可视化数据
{
id: '1', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
coord: [116.34603714470629, 40.104152247802745], // XY 轴坐标，X：经度；Y：纬度
value: 77, // Z 轴高度（单位：米）
type: 'legend01', // 数据点权值
coordZ: 2, // 数据点图例类别
},
{
id: '2',
coord: [116.34901522493023, 40.104242682940665],
value: 44,
type: 'legend01',
coordZ: 2,
},
{
id: '3',
coord: [116.3490355248159, 40.102727956585376],
value: 55,
type: 'legend02',
coordZ: 2,
},
{
id: '4',
coord: [116.35129453934645, 40.1043028002235],
value: 93,
type: 'legend02',
coordZ: 2,
},
],
};
appInstance.uniCall('addBubbleLayer', jsonData, (result) => {
console.log(result);
});- speed：气泡的扩散速度。
- radiusMax 和 radiusMin：气泡最大、最小半径。
- valueMax 和 valueMin：气泡数据的最大、最小值。
- visible：图层默认显隐状态。
- data：每一个气泡的中心点位，包含 id、中心点坐标、value 高度、type 图例类别等。
- legends 已经定义了气泡图的颜色为红色和黄色，因此在 data 中，我们就要对不同点位定义 type 类型。
2. 更新气泡图层数据
更新气泡图数据使用的是updateBubbleLayerCoord方法，可以通过修改接口参数，对气泡图进行更新。
JavaScript
let jsonData = {
id: 'bubbleLayer', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
layerName: '气泡图层', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
isAppend: true, // 是否追加数据（按数据顺序），true：按新数据 更新原有重复数据 & 追加新数据；false：清除原有数据 & 重建新数据
data: [
// 定义图层可视化数据
{
id: '1', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
coord: [116.34603714470629, 40.104152247802745], // XY 轴坐标，X：经度；Y：纬度
value: 18, // Z 轴高度（单位：米）
type: 'legend01', // 数据点权值
coordZ: 2, // 数据点图例类别
},
{
id: '2',
coord: [116.34901522493023, 40.104242682940665],
value: 20,
type: 'legend02',
coordZ: 2,
},
{
id: '3',
coord: [116.3490355248159, 40.102727956585376],
value: 21,
type: 'legend02',
coordZ: 2,
},
{
id: '4',
coord: [116.35129453934645, 40.1043028002235],
value: 52,
type: 'legend02',
coordZ: 2,
},
],
};
appInstance.uniCall('updateBubbleLayerCoord', jsonData, (result) => {
console.log(result);
});在上面的参数中，大家着重注意 isAppend 属性，如果 isAppend 的是 true 的情况下,相当于是在原有的数据基础上追加新的数据；如果是写成 false 的情况下，相当于是将原有数据调整为新的数据。
在当前的代码中，包含了 4 个点位信息，isAppend 为 true，这里我们添加一个点位信息，点击执行，可以看到场景中增加了一个气泡图。
接下来我们把 isAppend 改成 false，点击执行，可以看到，新增的这一个气泡图就替换了原有的全部气泡图。
3. 更新气泡图样式
更新气泡图样式使用的是updateBubbleLayerStyle方法，我们可以对气泡图的扩散速度、最大/最小半径、数据最大/最小值等属性进行更改，并且在之前添加气泡图时所定义的 legends 属性，也可以在这里进行二次修改。
JavaScript
let jsonData = {
id: 'bubbleLayer', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
fillArea: 'none', // 区域填充样式类别 none
speed: 10, // 气泡扩散速度（单位：米/秒）
radiusMax: 50, // 气泡最大半径（单位：米）
radiusMin: 20, // 气泡最小半径（单位：米）
valueMax: 100, // 数据最大值上限
valueMin: 5, // 数据最小值下限
legends: [
// 定义图层包含图例，支持为不同图例定义各自样式
{
name: 'legend01', // 图层内图例名称，新建时调用者自己传入的唯一名称，用于各种操作的图例识别
color: '#ffff00', // 颜色（HEX 颜色值）
},
{
name: 'legend02',
color: '#00ffff',
},
],
};
appInstance.uniCall('updateBubbleLayerStyle', jsonData, (result) => {
console.log(result);
});当前的代码中，已经将原来气泡图颜色进行了修改，并将 id 中原来的 bubbleLayer 改为 bubble 点击执行，可以看到，场景中的气泡图颜色发生了变化。
同样我们也可以对气泡的半径和数据最大最小值进行调整，这里我们将 radiusMin 改为 2，radiusMax 改为 20，点击执行，可以看到气泡图很明显的变小了。我们也可以通过 radius 和 value 的配合，实现我们想要的效果。
第六节 添加热力图
引入版本：3.6.9 起支持
热力图使用的是addHeatMapLayer方法，我们首先来看一下参数属性
JavaScript
let jsonData = {
id: 'heat', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: '热力图', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
coordZ: 64, // Z 轴高度（单位：米）
type: 'default', // 外观类型，default：标准热图；dot：点状热图
alpha: 1, // 透明度，0：完全透明；1：完全不透明
colorMax: '#FF6000', // 最大值颜色（HEX 颜色值）
colorMin: '#009acf', // 最小值颜色（HEX 颜色值）
valueMax: 60, // 数据最大值上限
valueMin: 20, // 数据最小值下限
radius: 50, // 每一个点的半径单位（米）
visible: true, // 添加当前图层时默认是显示还是隐藏
data: [
// 定义图层可视化数据
{
coord: [116.34409243207057, 40.08389808456883], // XY轴坐标, X精度; Y纬度
value: 10, // 数据点权值
},
{
coord: [116.34409243207057, 40.08429808456883],
value: 35,
},
],
};
appInstance.uniCall('addHeatMapLayer', jsonData, (result) => {
console.log(result);
});- clearOverlayType：清除图层，防止多次添加。
- alpha：透明度。
- colorMax：热力图最大值上限颜色。
- colorMin：最小值下限颜色。
- radius：每一个点的半径。
- valueMax 和 valueMin：热力图的最大最小值。
也就是说，我们每一个点的 value 越接近 valueMax 数值，则该点所显示的颜色越接近 colorMax 的颜色。每个点的 value 越小，越贴近 colorMin 的颜色。
下面我们点击执行，可以看到，场景中增加了热力图，热力图的中心点就是我们刚刚代码里写入的各个点位参数。
当然，我们也可以对热力图参数进行修改，比如我们将 valueMax 改为 100，点击执行，可以看到热力图中心颜色区域扩大了。 如果将 radius 数字由 30 调整为 50，点击执行，可以看到，热力图的区域面积变大了以上就是添加热力图的方法。
第七节 控制图层显隐
引入版本：3.0 起支持
控制图层显隐是一个通用功能，每一个图层都可以用到。这里我们使用的是setOverlayVisibility方法，通过传入图层的 ID 和图层的类型，以 visible 控制显示或隐藏，就能够实现控制显隐的能力。
JavaScript
let jsonData = {s
ids: ['modelId1','modelId2','modelId3'],
visible: false
};
appInstance.uniCall('setOverlayVisibility', jsonData, (result) => {
console.log(result);
});以添加好的热力图为例，来设置它的隐藏。首先，我们在 API 调试器的添加热力图中找到它的 id 名称，复制 heatLayer，在控制图层显隐中将名字复制进 id 中，overlayType 可以在上面查找到对应的图层类别，并将热力图的图层类别复制到下方 overlayType 代码中，visible 选择 fasle,点击执行，可以看到场景中的热力图被隐藏了。
如果再将 visible 改为 true,点击执行，那么热力图就会再显示出来。这里要注意 控制图层显隐的 id 是对应图层的 id，overlayType 是对应图层的类型。以上就是控制图层显隐的内容。
第八节 删除图层
引入版本：3.0 起支持
1. 删除单个图层
删除单个图层使用的是removeOverLay方法，通过写入图层的 ID 和图层的类别，就可以删除指定图层。
JavaScript
let jsonData = {
id: 'landmark',
overlayType: 'landmark',
};
appInstance.uniCall('removeOverlay', jsonData, (result) => {
console.log(result);
});对应多种图层的删除，我们还可以采用按类别删除的方式操作。 首先还是添加气泡图，点击执行，可以看到场景中已经添加好了气泡图。我们再回到删除图层接口中，在“按类别删除图层”方法中，overlayType 方法输入 bubbleLayer,点击执行，场景中的气泡图就被删除了。
2. 按类型删除图层
首先添加一个气泡图，再添加一个热力图，这里可以看到热力图的代码中，含有 clearOverlayType 清除图层，所以前面添加的气泡图就被删除了，当再添加一个地标图，这时场景中就包含了 2 种图层，回到删除图层，只需要在 overlayType 方法输入 all,点击执行，可以看到，场景种全部图层就都被删除了。
JavaScript
let jsonData = {
overlayType: 'landmark',
};
appInstance.uniCall('clearOverlayType', jsonData, (result) => {
console.log(result);
});第九节 添加图层 tip
引入版本：3.0 起支持
图层 tip 和图层 label 的区别在于，label 只能显示文字，tip 支持我们自定义成任何样式或者结构，来展示在图层的旁边。代码范例如下：
JavaScript
let jsonData = {
id: 'landmark', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
url: './scene/tip/overlay-tip.html', // Tip 窗口页面地址
divId: '', // 悬浮层dom元素id
isShowClose: true, // 是否显示右上角关闭按钮，默认显示关闭按钮
size: [313, 200], // Tip 窗口宽高xy，x：窗口宽；y：窗口高（单位：像素）
offset: [0, 0], // Tip 左上角相对 对象中心点 偏移量 xy，x：为正，向右偏移；y：为正，向上偏移（单位：像素）
overlayType: 'landmark', // 覆盖物类型
};
appInstance.uniCall('addOverlayTip', jsonData, (result) => {
console.log(result);
});首先我们来添加一个地标点，我们在代码种写入了 id 和经纬度坐标，并清除其他图层以免二次添加，通过 addLandmark 添加地标点，点击执行，可以看到场景种添加了一个地标点，并且地标点图标旁显示的是文字“电线杆”，这就是 label，只有文字，无法展示其他的信息。 接下来，我们清楚 label 种的文字并执行，可以看到场景中就只剩下地标点图标了，点击执行看一下效果，可以看到场景种的地标点旁边增加了一个信息面板，并在 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 进行控制。点击执行，可以看到场景图标旁出现了我们自定义的标牌，并且没有关闭按钮，我们只需要再次点击标牌，就可以关闭显示。
第十节 获取自定义模型和图标
本小节我们来介绍获取自定义模型和图标的操作。
使用自定义图标，我们首先要向场景中添加自定义图标。 在图观官网-我的业务中，找到场景编辑器，进入。在场景编辑器中找到对应的场景。 在场景中，点击上方“图片”tab 页签，点击界面中的添加图片，就可以将我们需要的自定义图片上传到场景编辑器中。
接下来回到“场景”工作界面，点击下方“本场景”标签，可以看到我们上传的图标文件，当然，场景编辑器已经预置了大量的图标模型资产可以选用。 在“本场景”中，已经提前上传了“周界摄像头”图标，我们可以通过拖拉拽的方式，将图标加载到场景中，这里要注意的是，如果此时保存场景，那么后续我们每次打开场景都会显示这个图标，所以我们先在右侧模型列表中将图标隐藏。点击保存，发布就可以了。
我们回到 API 调试器中，第一步就是要上传自定义图标，第二步就是获取场景中都有哪些自定义图标，我们先将后边的代码删除，执行第二步的指令，可以在右下方的事件日志面板中看到，通过 result 回调出了很多的信息：scenes 是场景都有哪些状态；customIcons 代表自定义图标，这里要注意在图标名称前多了“custom-”，我们使用的时候要引用全称；customModels 是场景中的自定义模型。接下来第三步，就是添加自定义图标名称。
在添加自定义图标的代码中，我们定义了图标的 id 为 landmark，图标的 iconName 是 custom-周界摄像头，并且设定添加图标并将视野聚焦到图标，点击执行，可以看到场景中显示出我们刚刚上传的自定义图标，并且场景视角进行了聚焦动作。
