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();
});

Cesium Map可以显示多少个点？

1 个答案: