layer-graphic/fun/clustering示例中的BusineDataLayer应该怎么传data格式呢？

## 问题

1.layer-graphic/fun/clustering示例中的BusineDataLayer应该怎么传data格式呢？

2.就是GraphicLayer，自己加graphic进去这句话的意思是？使用data的话要用onCreateGraphic代替symbol吗？

3.我自己写了一个data格式传进去，但是聚合不生效呢，请问可以提供一个使用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
      }
    }

/**
 * 释放当前地图业务的生命周期函数
 * @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
}

```

## 相关链接
 
1.https://gitee.com/marsgis/mars3d/issues/I8PISB?from=project-issue

2.http://mars3d.cn/editor-vue.html?id=layer-graphic/fun/clustering
## 期望效果

1.期望提供这个data的使用示例

![输入图片说明](https://foruda.gitee.com/images/1703126223609463077/a27e5b44_10844892.png "屏幕截图")

火星科技/Mars3D三维可视化平台

内容风险标识

评论 (1)

火星科技/Mars3D三维可视化平台 .gitee-modal { width: 500px !important; }

内容风险标识