Mars3d的BusineDataLayer应该传data格式实现聚合效果
问题：
1.通过【Mars3d】加载new mars3d.layer.BusineDataLayer(的如果不用url使用data的话，格式应该是什么样子的呢？
相关说明：实质就是就是GraphicLayer，自己加graphic进去。
使用data的话要否需要用onCreateGraphic代替symbol吗实现添加矢量的效果？
回复：
相关data的格式使用.相关代码：
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: {"lat":32.632367,"lng":118.899899,"alt":4713595.4,"heading":348,"pitch":-69}
}
}
/**
* 初始化地图业务，生命周期钩子函数（必须）
* 框架在地图初始化完成后自动调用该函数
* @param {mars3d.Map} mapInstance 地图对象
* @returns {void} 无
*/
export function onMounted(mapInstance) {
map = mapInstance // 记录map
addBusinessLayer()
}
let historyFiresRes = {
"msg": "success",
"code": 0,
"data": [
{
"acq_time": "0454",
"frp": 1.7,
"year": "2019",
"acq_date": "2019-12-04",
"latitude": 40.81285,
"confidence": "n",
"scan": 0.39,
"instrument": "VIIRS",
"geom": "POINT(118.5964 40.81285)",
"version": "2.0NRT",
"brightness": 327.7,
"bright_t31": 280.7,
"daynight": "D",
"id": 1,
"satellite": "1",
"track": 0.36,
"longitude": 118.5964
},
{
"acq_time": "0500",
"frp": 3.2,
"year": "2019",
"acq_date": "2019-12-09",
"latitude": 41.2258,
"confidence": "n",
"scan": 0.39,
"instrument": "VIIRS",
"geom": "POINT(118.77624 41.2258)",
"version": "2.0NRT",
"brightness": 344.2,
"bright_t31": 281.6,
"daynight": "D",
"id": 2,
"satellite": "1",
"track": 0.36,
"longitude": 118.77624
},
{
"acq_time": "1800",
"frp": 0.4,
"year": "2019",
"acq_date": "2019-12-12",
"latitude": 40.52177,
"confidence": "n",
"scan": 0.38,
"instrument": "VIIRS",
"geom": "POINT(117.60754 40.52177)",
"version": "2.0NRT",
"brightness": 296.8,
"bright_t31": 267.7,
"daynight": "N",
"id": 3,
"satellite": "1",
"track": 0.36,
"longitude": 117.60754
},
{
"acq_time": "1724",
"frp": 1,
"year": "2019",
"acq_date": "2019-12-14",
"latitude": 40.73357,
"confidence": "n",
"scan": 0.52,
"instrument": "VIIRS",
"geom": "POINT(118.43446 40.73357)",
"version": "2.0NRT",
"brightness": 301.9,
"bright_t31": 261.3,
"daynight": "N",
"id": 4,
"satellite": "1",
"track": 0.5,
"longitude": 118.43446
},
{
"acq_time": "1824",
"frp": 0.7,
"year": "2019",
"acq_date": "2019-12-16",
"latitude": 40.59779,
"confidence": "n",
"scan": 0.41,
"instrument": "VIIRS",
"geom": "POINT(118.62975 40.59779)",
"version": "2.0NRT",
"brightness": 297.9,
"bright_t31": 271.7,
"daynight": "N",
"id": 5,
"satellite": "1",
"track": 0.45,
"longitude": 118.62975
},
{
"acq_time": "1824",
"frp": 1.4,
"year": "2019",
"acq_date": "2019-12-16",
"latitude": 40.52311,
"confidence": "n",
"scan": 0.55,
"instrument": "VIIRS",
"geom": "POINT(117.60539 40.52311)",
"version": "2.0NRT",
"brightness": 296.3,
"bright_t31": 269.8,
"daynight": "N",
"id": 6,
"satellite": "1",
"track": 0.43,
"longitude": 117.60539
}
]
}
function addBusinessLayer() {
// 创建矢量数据图层（业务数据图层）
graphicLayer = new mars3d.layer.BusineDataLayer({
data: historyFiresRes,
dataColumn: "data", // 数据接口中对应列表所在的取值字段名
lngColumn: "longitude",
latColumn: "latitude",
// 点的聚合配置
clustering: {
enabled: true,
pixelRange: 10,
clampToGround: false,
// addHeight: 1000
// opacity: 1
// getImage: function (count) { // getImage是完全自定义方式
// let colorIn
// if (count < 10) {
// colorIn = "rgba(110, 204, 57, 0.6)"
// } else if (count < 100) {
// colorIn = "rgba(240, 194, 12, 0.6)"
// } else {
// colorIn = "rgba(241, 128, 23, 0.6)"
// }
// const radius = 40
// const thisSize = radius * 2
// const circleCanvas = document.createElement("canvas")
// circleCanvas.width = thisSize
// circleCanvas.height = thisSize
// const circleCtx = circleCanvas.getContext("2d", { willReadFrequently: true })
// circleCtx.fillStyle = "#ffffff00"
// circleCtx.globalAlpha = 0.0
// circleCtx.fillRect(0, 0, thisSize, thisSize)
// // 圆形底色
// circleCtx.globalAlpha = 1.0
// circleCtx.beginPath()
// circleCtx.arc(radius, radius, radius, 0, Math.PI * 2, true)
// circleCtx.closePath()
// circleCtx.fillStyle = colorIn
// circleCtx.fill()
// // 数字文字
// const text = "故障" + count
// circleCtx.font = radius * 0.6 + "px bold normal" // 设置字体
// circleCtx.fillStyle = "#ffffff" // 设置颜色
// circleCtx.textAlign = "center" // 设置水平对齐方式
// circleCtx.textBaseline = "middle" // 设置垂直对齐方式
// circleCtx.fillText(text, radius, radius) // 绘制文字（参数：要写的字，x坐标，y坐标）
// return circleCanvas.toDataURL("image/png") // getImage方法返回任意canvas的图片即可
// }
},
symbol: {
type: "billboardP",
styleOptions: {
image: "img/marker/mark-blue.png",
width: 25,
height: 34, // billboard聚合必须有width、height
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scaleByDistance: new Cesium.NearFarScalar(1000, 0.7, 5000000, 0.3),
label: {
text: "{text}",
font_size: 19,
color: Cesium.Color.AZURE,
outline: true,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(10, 0), // 偏移量
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 80000)
}
}
}
// 自定义创建对象，可替代symbol、
// onCreateGraphic: function (e) {
// const graphic = new mars3d.graphic.BillboardEntity({
// position: e.position,
// style: {
// image: "img/marker/lace-blue.png",
// width: 25,
// height: 34, // 聚合必须有width、height
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
// },
// attr: e.attr
// })
// graphicLayer.addGraphic(graphic)
// },
})
map.addLayer(graphicLayer)
graphicLayer.on("clustering", function (event) {
console.log("新增聚合对象", event)
})
// 单击事件
graphicLayer.on(mars3d.EventType.click, function (event) {
console.log("你单击了", event)
if (map.camera.positionCartographic.height > 90000) {
const graphic = event.graphic
// graphic.closePopup()
if (graphic?.cluster) {
// 单击了聚合的点
console.log("单击了聚合的点", graphic.getGraphics())
} else {
// 单击了具体的点对象
const position = graphic.positionShow
map.flyToPoint(position, {
radius: 5000, // 距离目标点的距离
duration: 4,
complete: function (e) {
// 飞行完成回调方法
// graphic.openPopup()
}
})
}
}
})
graphicLayer.bindPopup(function (event) {
if (event.graphic.cluster && event.graphic.getGraphics) {
const graphics = event.graphic.getGraphics() // 对应的grpahic数组，可以自定义显示
if (graphics) {
const inthtml = `单击了聚合点(${graphics.length}个)`
return inthtml
}
}
const item = event.graphic?.attr
if (!item) {
return false
}
const inthtml = `
| ${item.text} | |
|---|---|
| 省： | ${item.province} |
| 市： | ${item.city} |
| 县/区： | ${item.district} |
| 地址： | ${item.address} |
| 视频： | |
return inthtml
})
}
/**
* 释放当前地图业务的生命周期函数
* @returns {void} 无
*/
export function onUnmounted() {
graphicLayer.remove()
graphicLayer = null
map = null
}
// 计算贴地高度示例代码，可以将获取到的高度更新到数据库内，后续不用重复计算。
export function getDataSurfaceHeight() {
if (graphicLayer.length === 0) {
globalMsg("数据尚未加载成功！")
return
}
showLoading()
// 对图层内的数据做贴地运算,自动得到贴地高度
graphicLayer.autoSurfaceHeight().then((graphics) => {
hideLoading()
const arr = []
for (let i = 0, len = graphics.length; i < len; i++) {
const graphic = graphics[i]
const point = graphic.point
arr.push({
...graphic.attr,
lat: point.lat,
lng: point.lng,
z: point.alt
})
}
mars3d.Util.downloadFile("point.json", JSON.stringify({ data: arr }))
})
}
export function enabledAggressive(val) {
graphicLayer.clustering = val
}
export function layerShowChange(val) {
graphicLayer.show = val
}
实现效果：