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并Billboards为该集合添加15,000 ,您将获得更好的性能.

这是一个可以与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();
});