Appearance
聚簇图层
此功能案例实现聚簇图层功能
目录
1. 功能点
- 添加地图数据 addPointData
- 添加聚簇图层 addAggLandmarkLayer
- 更新聚簇图层样式 updateAggLandmarkLayerStyle
- 删除聚簇图层 removeOverlay
2. 视频演示
3. 核心代码
引入版本：3.2 起支持
第一步
添加点数据
JavaScript
// 添加聚簇图点数据
async function addPointData() {
// 获取数据
let res = await axios.get('/data/point.json')
let data = res.data.RECORDS.map((item) => {
return {
id: 'landmarkId' + item.id, // 数据子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
label: '', // 图标标签文本
value: 10, // 点的值
coord: [item.lon - 0, item.lat - 0], // XY 轴坐标，X：经度；Y：纬度
coordZ: 65, // Z 轴高度（单位：米）
year: item.year
}
})
// 添加图层数据
window.appInstance.uniCall(
'addPointData',
{
id: 'idPointData1', // 数据 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
attribute: ['year'], // 扩展属性，基于data中除了id、label、coord、coordZ、value之外的扩展，不能多余10个扩展属性
data: data,
},
(res) => {
console.log('添加数据', res)
}
)
}第二步
添加聚合地标图
JavaScript
// 添加聚簇图
function addAggLandmarkLayer() {
window.appInstance.uniCall(
'addAggLandmarkLayer',
{
id: 'AggLayer', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: 'layerName', // 图层名称，支持为图层自定义名称
coordZ: 0, // 聚合结果图层的显示 Z 轴高度（单位：米）
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
aggType: 0, // 聚簇方法：0-就近聚合 ，1-行政区划聚合, 2-栅格聚簇
aggRadius: 600, // 将点就近聚簇的范围半径（单位：像素）
aggMaxMapLevel: 17,
iconName: 'camera', // 最近距离点图标的样式
iconScale: 1, // 最近距离点图标大小，默认值是1表示原大，0 - 1：表示缩小倍率，大于1：表示放大倍率
labelScale: 1, //最近距离点文字标牌大小，默认值是1表示原大，0 - 1：表示缩小倍率，大于1：表示放大倍率
drawMax: 1000, // 最近距离点的绘制最大数量
minViewDistance: 0, // 点图标最小可见距离，（单位：米）
maxViewDistance: 200000, // 点图标最大可见距离，（单位：米）
visible: true,
aggDataId: 'idPointData1', // 对应本服务器上的聚合数据 id
clusters: [
{
value_range_min: 2, // 聚簇结果范围最小值（包含）
value_range_max: 100, // 聚簇结果范围最大值（包含）
clustersIcon: 'circle01', // 图标类型，根据内置枚举选择
size: 40 // 图标大小
},
{
value_range_min: 101,
value_range_max: 500,
clustersIcon: 'circle03',
size: 50
},
{
value_range_min: 501,
value_range_max: 1000,
clustersIcon: 'circle02',
size: 80
}
]
},
(res) => {
console.log('添加聚簇图', res)
}
)
}第三步
更新聚簇图层样式
JavaScript
// 更新聚簇图
function updateAggLandmarkLayerStyle() {
window.appInstance.uniCall(
'updateAggLandmarkLayerStyle',
{
id: "idLayer",// 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
iconName:"camera",// 图层名称，支持为图层自定义名称
iconScale: 1,// 最近距离点图标大小，默认值是1表示原大，0 - 1：表示缩小倍率，大于1：表示放大倍率
labelScale: 1,// 最近距离点文字标牌大小，默认值是1表示原大，0 - 1：表示缩小倍率，大于1：表示放大倍率
legends: [// 最近距离点图层包含的图例，支持为不同图例定义各自样式
{
name: "太阳能",// 最近距离点图层内图例名称，需要和attribute的值一致
color: "#ff0000"，// 颜色（HEX 颜色值）
iconName: "camera",
iconScale: 1,// 默认值是1表示原大，0 - 1：表示缩小倍率，大于1：表示放大倍率
labelScale: 1// 默认值是1表示原大，0 - 1：表示缩小倍率，大于1：表示放大倍率
},
{
name: "节能灯",// 最近距离点图层内图例名称，需要和attribute的值一致
color: "#ff0000"，// 颜色（HEX 颜色值）
iconName: "camera",
iconScale: 1,// 默认值是1表示原大，0 - 1：表示缩小倍率，大于1：表示放大倍率
labelScale: 1// 默认值是1表示原大，0 - 1：表示缩小倍率，大于1：表示放大倍率
}
],
legendAttr: "model",// 对应data中attribute的字段名称，如果找到有这个属性，会按照data中这个attribute的value找对应的legends，如果有则按照样式显示，如果没有，按照默认iconName显示
clusters: [
{
value_range_min:2,// 聚簇结果范围最小值（包含）
value_range_max:100,// 聚簇结果范围最大值（包含）
clustersIcon: "ball1",// 图标类型，根据内置枚举选择
size: 30// 图标大小
},
{
value_range_min:101,// 聚簇结果范围最小值（包含）
value_range_max:500,// 聚簇结果范围最大值（包含）
clustersIcon: "ball2",// 图标类型，根据内置枚举选择
size: 30// 图标大小
},
{
value_range_min:501,// 聚簇结果范围最小值（包含）
value_range_max:1000,// 聚簇结果范围最大值（包含）
clustersIcon: "ball3",// 图标类型，根据内置枚举选择
size: 30// 图标大小
}
]
}
(res) => {
console.log('更新聚簇图', res)
}
)
}第四步
删除聚簇图层
JavaScript
// 删除聚簇图层
function removeOverlay() {
window.appInstance.uniCall(
'removeOverlay',
{
id: 'idLayer',
overlayType: 'aggLandmarkLayer',
};
(res) => {
console.log('删除聚簇图', res)
}
)
}