Cesium 实体、3d瓦片、鼠标事件、三维模型、粒子效果、点聚合、数据加载

最新推荐文章于 2024-09-18 23:20:34 发布
最新推荐文章于 2024-09-18 23:20:34 发布
阅读量149 收藏 3
点赞数
文章标签： 3d 计算机外设 图像处理 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhushanlin/article/details/139213849
版权
本文深入探讨Cesium的高级特性，包括使用实体(primitive)创建高性能图形，3D瓦片的加载与应用，鼠标事件交互，加载和展示三维模型，实现炫酷的粒子效果，以及对大量点数据的聚合处理。通过这些内容，帮助读者掌握Cesium在复杂场景中的应用技巧。
摘要由CSDN通过智能技术生成

1、实体 primitive

 entity
1.2  调用方便，封装完美
1.3  是基于primitive的封装

primitive
1.1 更接近底层,性能消耗较小，要素很多时使用primitive
1.2 可以绘制高级图形
1.3 由Geometry(几何形状)、(Appearance)外观组成…

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

let viewer
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false//隐藏右上角信息框
  })

  const rectangleInstance = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
      rectangle: Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0),
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
    }),
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
    }
  });
  const polygonInstance = new Cesium.GeometryInstance({
    geometry: new Cesium.PolygonGeometry({
      polygonHierarchy: new Cesium.PolygonHierarchy(
        Cesium.Cartesian3.fromDegreesArray([
          -100.0, 43.0,
          -100.0, 27.0,
          -90, 35
        ])
      )
    }),
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
    }
  });
  viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: [rectangleInstance, polygonInstance],
    appearance: new Cesium.PerInstanceColorAppearance()
  }));
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>

2、3d瓦片

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

let viewer
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    // selectionIndicator: false,//隐藏选中框
    // infoBox: false//隐藏右上角信息框
  })

  // 3d瓦片添加在primitives里面
  // const tileset = viewer.scene.primitives.add(
  //   new Cesium.Cesium3DTileset({
  //     url: Cesium.IonResource.fromAssetId(69380)
  //   })
  // )
  // viewer.zoomTo(tileset)

  const tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: '/src/assets/b3dm/tileset.json'
    })
  )
  viewer.zoomTo(tileset)

})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>

3、鼠标事件

<template>
  <div id="cesiumContainer">
  </div>
  <!-- <button @click="toDel" class="btn">销毁事件</button> -->
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
const toDel = () => {
  handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

let viewer, handler
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false//隐藏右上角信息框
  })
  const tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: Cesium.IonResource.fromAssetId(69380)
    })
  )
  viewer.zoomTo(tileset)
  const line = viewer.entities.add({
    polyline: {
      positions: [],
      width: 5,
      material: Cesium.Color.YELLOW,
      clampToGround: true //贴地
    }
  })
  let arr = []
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handler.setInputAction((event) => {
    let position = viewer.scene.pickPosition(event.position)  //拾取坐标
    if (position) {
      viewer.entities.add({
        position,
        point: {
          color: Cesium.Color.RED,
          pixelSize: 20
        }
      })
      arr.push(position)
      line.polyline.positions = arr
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  handler.setInputAction((event) => {
    // 结束绘制
    alert('结束绘制')
    viewer.entities.removeAll() //不合理  用影响其他实体  用空数组删节点
    viewer.entities.add(line)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>


<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

let viewer, handler
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false//隐藏右上角信息框
  })
  const tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: Cesium.IonResource.fromAssetId(75343)
    })
  )
  viewer.zoomTo(tileset)
  let lastPick
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handler.setInputAction((event) => {
    let pick = viewer.scene.pick(event.endPosition) //移动事件中没有event.position
    if (pick) {
      if (lastPick) {
        lastPick.color = Cesium.Color.WHITE
      }
      pick.color = Cesium.Color.ORANGERED
      lastPick = pick
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>

4、加载三维模型

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
let viewer
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false,//隐藏右上角信息框
    shouldAnimate: true,
    shadows: true//显示阴影
  })

  const position = Cesium.Cartesian3.fromDegrees(114, 30, 300)
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0)
  )

  const model = viewer.entities.add({
    position,
    orientation,
    model: {
      uri: '/src/assets/Cesium_Air.glb',
      scale: 0.5,
      minimumPixelSize: 10 //模型最小像素
    }
  })
  viewer.zoomTo(model)



})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>

5、粒子效果

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
let viewer
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false,//隐藏右上角信息框
    shouldAnimate: true,
    shadows: true//显示阴影
  })

  const position = Cesium.Cartesian3.fromDegrees(114, 30, 300)
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0)
  )

  const model = viewer.entities.add({
    position,
    orientation,
    model: {
      uri: '/src/assets/Cesium_Air.glb',
      scale: 0.5,
      minimumPixelSize: 10 //模型最小像素
    }
  })
  viewer.zoomTo(model)

  viewer.scene.primitives.add(new Cesium.ParticleSystem({
    image: '/src/assets/fire.png',
    imageSize: new Cesium.Cartesian2(20, 20), //尺寸
    startScale: 1.0, //初始大小
    endScale: 4.0, //最后大小 
    particleLife: 3.0, 设置每一个粒子存在的时间
    speed: 5.0, //发射粒子的速度
    emitter: new Cesium.CircleEmitter(2),  //设置发射器(圆形发射器) 
    // emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(10, 10, 10)),
    emissionRate: 5,//例子发射数量
    modelMatrix: model.computeModelMatrix(
      viewer.clock.startTime,  //时间控件中的起始时间
      new Cesium.Matrix4()  //4*4矩阵数据
    ),  //设置位置
    lifetime: 16, //生命期属性为所需的持续时间
    // loop: false,  //只循环一次
  }));
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>

6、点聚合

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
let viewer
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false,//隐藏右上角信息框
    shouldAnimate: true,
    shadows: true//显示阴影
  })

  const position = Cesium.Cartesian3.fromDegrees(114, 30, 300)
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    Cesium.HeadingPitchRoll.fromDegrees(0, 0, 0)
  )

  const model = viewer.entities.add({
    position,
    orientation,
    model: {
      uri: '/src/assets/Cesium_Air.glb',
      scale: 0.5,
      minimumPixelSize: 10 //模型最小像素
    }
  })
  viewer.zoomTo(model)

  viewer.scene.primitives.add(new Cesium.ParticleSystem({
    image: '/src/assets/fire.png',
    imageSize: new Cesium.Cartesian2(20, 20), //尺寸
    startScale: 1.0, //初始大小
    endScale: 4.0, //最后大小 
    particleLife: 3.0, 设置每一个粒子存在的时间
    speed: 5.0, //发射粒子的速度
    emitter: new Cesium.CircleEmitter(2),  //设置发射器(圆形发射器) 
    // emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(10, 10, 10)),
    emissionRate: 5,//例子发射数量
    modelMatrix: model.computeModelMatrix(
      viewer.clock.startTime,  //时间控件中的起始时间
      new Cesium.Matrix4()  //4*4矩阵数据
    ),  //设置位置
    lifetime: 16, //生命期属性为所需的持续时间
    // loop: false,  //只循环一次
  }));
})
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.btn {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 999;
}
</style>

7、加载 load3dtiles

<template>
  <div id="cesiumContainer">
  </div>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>小区设施</span>
      </div>
    </template>
    <div v-for="(item,index) in data.arr" :key="index" class="text" @click="changeView(item)">
      {{item.name}}
    </div>
  </el-card>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted, reactive } from 'vue'
import { load3dtiles, update3dtiles } from './tool/load'
import facilities from './assets/facilities.json'
const data = reactive({
  arr: []
})

let viewer
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMDY1ZmUxNi1mMGNhLTQ1NDEtYTU2YS0wNTUwZDJhOWNkNmEiLCJpZCI6MTE1MTg3LCJpYXQiOjE3MDA0NDUxNDB9.wdc1z2bc8UV2q_FpcuB5QKtRx8OYLKq4KI3gDs6-gA8'
onMounted(() => {
  // viewer是操控地图api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,//隐藏选中框
    infoBox: false,//隐藏右上角信息框
  })
  load3dtiles(viewer, '/src/assets/b3dm/tileset.json', (tileset) => {
    update3dtiles(tileset)
    viewer.zoomTo(tileset)
    initData()
  })
})
const changeView = (item) => {
  const position = item.cameraPosition.split(',').map(a => Number(a))
  const ortArr = item.cameraOrt.split(',').map(a => Number(a))
  viewer.camera.flyTo({
    destination: new Cesium.Cartesian3(...position),
    orientation: {
      heading: ortArr[0],
      pitch: ortArr[1],
      roll: ortArr[2],
    }
  })
}
const initData = () => {
  data.arr = facilities
  console.log(data.arr)
}

</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.box-card {
  position: absolute;
  width: 300px;
  top: 40px;
  left: 40px;
}

.text {
  margin: 10px;
  cursor: pointer;
}

.text:hover {
  color: blueviolet;
}
</style>
@仗剑走天涯
关注
专栏目录
cesium城市建筑物光效（cesium篇.23）
地图之家
08-02 4521
听老人家说：多看美女会长寿 地图之家总目录（建议先查看该内容） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> <link r
cesium 效果篇——雨水涟漪
qq_33416536的博客
08-04 1895
cesium雨水涟漪效果
Cesium最全系列教程！从零到一完成智慧城市实战项目！
最新发布
前端、nodejs、3D、GIS、人工智能
09-18 1494
小伙伴A：博主，有没有Cesium基础系列类教程，能够把大部分知识点串联起来的那种？我之前是一个只接触过二维的前端，日常工作就是写写大屏后台管理H5或者小程序之类的，最近公司领导突然要求我学习一下Cesium，为公司后期一些三维项目开发做准备。作为一个只会curd的前端，刚接触Cesium着实让我有点头大，一堆的API，一堆陌生的名词，如空间直角坐标系欧拉角3D Tiles倾斜摄影BIM模型矩阵geoJson等等，这些我之前根本就没接触过。
【Cesium学习（六）】Cesium加载3D模型（3D tiles和glTF模型）
HAI_GUI的博客
08-17 9611
3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集, 3DTiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是一个优秀的,并且格式公开的数据格式。3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。
cesium 效果篇—毛玻璃
qq_33416536的博客
12-13 1165
cesium，毛玻璃效果。
cesium一些常见的效果
flight_diary的博客
03-09 3235
1 添加实体群 var dataSoure = new Cesium.CustomDataSource(); // 可用于手动管理一组实体的实现。 dataSoure.entities.add({ position: Cesium.Cartesian3.fromDegrees(longitude, latitude), billboard: { image: '图片地址', //
【开源】Cesium场景效果大全（cesium+vue3+vite+vuex）
前端、nodejs、3D、GIS、人工智能
06-03 2223
今天再一次带来我的开源项目，这个项目主要收集了cesium在日常业务开发中常用到的一些场景效果的开发。这个项目我已开源，也欢迎感兴趣的小伙伴能够加入进来，一起参与共建（目前还是有一定的star基础的🤭）开源地址：https://github.com/tingyuxuan2302/cesium-vue3-vite如果觉得项目对你有帮助，希望可以随手点一个star，激励我去开源更多优秀的代码。如果有在做数字孪生或者GIS方面的同学也可以加我交流：brown_7778，我拉你进交流群。
cesium单独加载3d模型.txt
11-16
cesium单独加载3d模型
Cesium中导入三维模型方法（dae到glft_bgltf） - l491453302的专栏 - CSDN博客1
08-03
在Cesium中导入三维模型主要涉及到的格式是gltf和bgltf，这两种格式由Khronos组织定义，用于在互联网和移动设备上展示3D内容，与OpenGL、WebGL和OpenGL ES图形加速标准兼容。gltf是一种文本格式，而bgltf是其二进制...
cesium贴地贴模型绘制示例，html,三维开发实例 前端开发
05-21
关于“三维开发实例”，Cesium提供了丰富的API和实体类型来创建各种3D对象，如点、线、多边形、几何体和模型。模型（Model）是Cesium中处理复杂3D形状的关键，它可以加载来自GLTF、GEOJSON等多种格式的3D模型。在贴...
cesium 实现天气效果雨雪雾
11-04
完整cesium实现雨雪雾效果，比较全，欢迎下载交流指正。
Cesium三维模型（电塔）glb格式，亲测可用
12-14
glb文件，供学习使用。原型来源网络，亲测可用！！！！！！！！！
cesiumjs瓦片数据 3dtiles
07-14
3D Tiles将整个三维场景划分为多个小块（瓦片），每个瓦片包含一部分三维模型数据。通过这种方式，可以在网络传输过程中仅加载当前视野范围内的瓦片数据，避免了不必要的带宽消耗。 ##### 3. 动态更新 3D Tiles...
Cesium三维模型
【cacrle】的博客
01-26 2270
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。Cesium作为三维GIS框架，其最大的优势就是支持各种格式的三维模型数据，包括倾斜摄影三维模型、BIM三维模型、glb三维模型等，并且用户可以使用关键帧动画等动态地模拟三维场景。本文将介绍Cesium中常用的三维模型操作并举例说明。
Cesium项目效果展示
qq_25806839的博客
07-19 682
Cesium项目效果展示
Cesium云层效果
xt3d的博客
01-11 3437
Cesium云层效果效果实现思路关键代码 效果 实现思路 rectangle+自定义材质 关键代码 "czm_material czm_getMaterial(czm_materialInput materialInput)\n\ {\n\ czm_material material = czm_getDefaultMaterial(materialInput);\n\ vec2 st = materialInput.st;\n\ vec4 colorImage = tex
3d查看器无法加载三维模型_Cesium中级教程6 – 3D Models 三维模型
weixin_39955925的博客
11-27 3147
Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/3D Models 三维模型本教程将教您如何通过Primitive API转换、加载和使用Cesium中的三维模型。如果你是Cesium的新用户，可能需要阅读三维模型部分的(空间数据可视化教程)[https://cesium.com/docs/tutorials/c...
cesium 实战005 --使用primitive实现聚合效果，解决大量点页面崩溃的情况
weixin_47907069的博客
03-22 2004
在Cesium官方提供的沙盒实例中可以找到使用entity.add()接口添加三种数据的方法，但是在实际使用过程中由于数据量过大会出现数据加载耗时较长、页面卡顿等情况。于是使用primitive添加并利用原有的clustering 实现聚合。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@仗剑走天涯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值