Cesium Map 可以显示多少个点？

Question

我试图在 Cesium 地图上放置数千个点，但遇到了 Firefox 崩溃的问题。我需要使用 Firefox。该地图似乎能够显示 15,000 个点（作为图像）。但是，它也几乎无法使用。缩放和平移有巨大的延迟并最终崩溃。有谁知道限制应该是多少分？另外，有没有比我这样做更好的方法来显示这些点？我真的希望是我而不是铯。我听说创建 czml 然后将其传入比较慢，所以我有以下 javascript 测试：

function test(){
  for (var i=0; i<15000; i++){
     tempLat +=1;
     tempLon +=1;
     if(tempLat>90){
      tempLat=0;
      tempLon=0;
     }
     addBillboard(scene, ellipsoid, tempLat,tempLon);
  }
}

 //this is from the sandcastle examples for cesium. 
 function addBillboard(scene, ellipsoid,tempLat,tempLon) {
    var primitives = scene.primitives;
    var image = new Image();
    image.onload = function() {
        var billboards = new Cesium.BillboardCollection();
        var textureAtlas = scene.context.createTextureAtlas({image : image});
        billboards.textureAtlas = textureAtlas;
        billboard = billboards.add({
            position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(tempLat, tempLon)),
            imageIndex : 0
        });
        primitives.add(billboards);
    };
    image.src = '../images/Cesium_Logo_overlay.png';
}

Answer 1

您的代码正在创建 15,000 个 BillboardCollection 基元，每个基元都有一个 Billboard。如果您创建一个 BillboardCollection 并将 15,000 个 Billboards 添加到该集合，您将获得更好的性能。

这是一个可用于 b28 版本的工作示例。将此粘贴到 b28 Sandcastle：http://cesiumjs.org/releases/b28/Apps/Sandcastle/index.html?src=Billboards.html&label=Showcases

请注意，其中一些 API 将在即将发布的版本中进行更改。始终检查 CHANGES.md 以获取重大更改列表。

require(['Cesium'], function(Cesium) {
    "use strict";

    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    var primitives = scene.primitives;
    var ellipsoid = viewer.scene.globe.ellipsoid;

    var billboards = new Cesium.BillboardCollection();

    var image = new Image();
    image.onload = function() {
        var textureAtlas = scene.createTextureAtlas({image : image});
        billboards.textureAtlas = textureAtlas;
        primitives.add(billboards);
    };
    image.src = '../images/Cesium_Logo_overlay.png';

    function addBillboard(tempLat, tempLon) {
        billboards.add({
            position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(tempLat, tempLon)),
            imageIndex : 0
        });
    }

    var tempLat = 0;
    var tempLon = 0;
    for (var i = 0; i < 15000; i++){
        tempLat += 1;
        tempLon += 1;
        if (tempLat > 90){
            tempLat = 0;
            tempLon = 0;
        }
        addBillboard(tempLat, tempLon);
    }

    Sandcastle.finishedLoading();
});