new mars3d.layer.GeoJsonLayer({追加addGraphic参与聚合效果

mianmianwu

于 2024-07-29 15:30:21 发布

阅读量329

点赞数 5

分类专栏： app Mars3d vue 文章标签：前端 javascript cesium webgl vue.js

本文链接：https://blog.csdn.net/m0_69803146/article/details/140772378

版权

Mars3d 同时被 3 个专栏收录

185 篇文章 16 订阅

订阅专栏

vue

181 篇文章 2 订阅

订阅专栏

app

163 篇文章 0 订阅

订阅专栏

new mars3d.layer.GeoJsonLayer({追加addGraphic参与聚合效果

相关聚合配置：

    clustering: {
      enabled: true,
      pixelRange: 20,
      clampToGround: false,
      addHeight: 1000
    },

完整代码：

async function addGraphicLayer() {
  graphicLayer = new mars3d.layer.GeoJsonLayer({
    clustering: {
      enabled: true,
      pixelRange: 20,
      clampToGround: false,
      addHeight: 1000
    },
    popup: "all",
    center: { lat: 31.639275, lng: 117.388877, alt: 52574.8, heading: 339.3, pitch: -65 },
    flyTo: true
  })
  map.addLayer(graphicLayer)

  // 单击事件
  graphicLayer.on(mars3d.EventType.click, function (event) {
    console.log("你单击了", event)
  })

  const res = await mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/hfty-point.json" })
  for (let i = 0; i < res.features.length; i++) {
    const item = res.features[i]
    const label = new mars3d.graphic.PointPrimitive({
      position: item.geometry.coordinates,
      style: {
        color: "#ff0000",
        pixelSize: 10,
        outlineColor: "#ffffff",
        outlineWidth: 2,
        label: {
          text: "我是原始点",
          font_size: 18,
          color: "#ffffff",
          pixelOffsetY: -10,
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 500000,
          distanceDisplayCondition_near: 0
        }
      },
    })
    graphicLayer.addGraphic(label)
  }
}

链接：功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

效果：

1.追加的PointPrimitive类型的矢量数据参与到GeoJsonLayer的聚合clustering效果中：