解决cesium加载海量点崩溃、卡顿

最新推荐文章于 2025-03-14 10:32:38 发布

meetAlice

最新推荐文章于 2025-03-14 10:32:38 发布

阅读量3.7k

点赞数

分类专栏： cesium 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_42129143/article/details/131896533

版权

cesium 专栏收录该内容

6 篇文章

订阅专栏

文章介绍了在图形编程中使用primitive而不是entity的好处，特别是对于大量简单图形如点的渲染，由于GPU硬件加速，可以高效地创建和显示十万个点。示例代码展示了如何用Cesium库创建带有颜色和位置信息的点，并添加交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不使用entity的形式，使用primitive，与entity相比，primitive是更低层次的图形概念，通常用于描述一组简单的图形几何体，例如点、线、多边形、体积、文本等基本图形。每个primitive实例可以设置不同的属性，例如颜色、边框、宽度、高度等。主要优点是高效，因为使用了GPU硬件加速，可以轻松绘制大量几何体。

举例十万个点：

//Primitive方式
var pointPrimitives = viewer.scene.primitives.add(
    new Cesium.PointPrimitiveCollection()
);
var color = new Cesium.Color.fromCssColorString('#FED976').withAlpha(0.6);
var numPoints = 100000;
for (var j = 0; j < numPoints; ++j) {
    var position = randomPoint();
    var primitive = pointPrimitives.add({
        pixelSize: 3,
        color: color,
        position: position
    });
    primitive.tooltip = '第' + j + '个点';
    // primitive.popup = '第' + j + '个点';
    // primitive.click = function (primitive) {//单击
    //     //单击事件  
    // }
}

//取区域内的随机点
function randomPoint() {
	var jd = haoutil.math.random(116.11 * 1000, 116.21 * 1000) / 1000;
	var wd = haoutil.math.random(30.88 * 1000, 30.98 * 1000) / 1000;
	var height = haoutil.math.random(700, 3000)
	return Cesium.Cartesian3.fromDegrees(jd, wd, height);
}

实现效果：