应用错误收集

如何解决Cesium中的聚类错误？

时间：2016-12-20 01:19:19

标签： cesium

我在1.28中发现了一个错误：

我通过创建许多带标签的实体来制作它。但是，当我启用聚类时，某些标签在2D中是不可见的。

bug

的屏幕截图

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description"
      content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<style>
    #convert {
        z-index: 100;
        top: 30px;
        position: absolute;
    }
</style>
<script type="text/javascript">

    require.config({
        baseUrl: '../../../Source',
        waitSeconds: 60
    });
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<div>
<button id="convert">2/3D转换</button>
</div>
<script id="cesium_sandcastle_script">
var viewer;
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
    viewer = new Cesium.Viewer('cesiumContainer');
    document.getElementById("convert").onclick = function () {
        if (viewer.scene.mode == Cesium.SceneMode.SCENE3D) {
            viewer.scene.mode = Cesium.SceneMode.SCENE2D
        } else {
            viewer.scene.mode = Cesium.SceneMode.SCENE3D
        }
    };


    var modelLayer = new Cesium.CustomDataSource();
    for (var i = 0; i < 50; i++) {
        var lon = Math.random() * 1000;
        var lat = Math.random() * 500;
        modelLayer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(-75.1641667 + lon, -39.9522222 + lat),
            label: {
                text: '东海舰队超级无敌',
                font: '13px Verdana',
                position: Cesium.Cartesian3.fromDegrees(-75.1641667 + lon, -39.9522222 + lat, 100000),
                verticalOrigin: Cesium.VerticalOrigin.TOP,
                eyeOffset: Cesium.Cartesian3(0, 0, -10000)
            },
            model: {
                position: Cesium.Cartesian3.fromDegrees(-75.1641667 + lon, -39.9522222 + lat, 0),
                uri: '../../SampleData/models/CesiumAir/Cesium_Air.glb',
                minimumPixelSize: 128,
                maximumScale: 20000
            }
        });
    }


    var pixelRange = 15;
    var minimumClusterSize = 3;
    var enabled = true;

    modelLayer.clustering.enabled = enabled;
    modelLayer.clustering.pixelRange = pixelRange;
    modelLayer.clustering.minimumClusterSize = minimumClusterSize;

    var removeListener;

    var pinBuilder = new Cesium.PinBuilder();
    var pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();
    var pin40 = pinBuilder.fromText('40+', Cesium.Color.ORANGE, 48).toDataURL();
    var pin30 = pinBuilder.fromText('30+', Cesium.Color.YELLOW, 48).toDataURL();
    var pin20 = pinBuilder.fromText('20+', Cesium.Color.GREEN, 48).toDataURL();
    var pin10 = pinBuilder.fromText('10+', Cesium.Color.BLUE, 48).toDataURL();

    var singleDigitPins = new Array(8);
    for (var i = 0; i < singleDigitPins.length; ++i) {
        singleDigitPins[i] = pinBuilder.fromText('' + (i + 2), Cesium.Color.VIOLET, 48).toDataURL();
    }
    customStyle();

    function customStyle() {
        if (Cesium.defined(removeListener)) {
            removeListener();
            removeListener = undefined;
        } else {
            removeListener = modelLayer.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
                cluster.label.show = true;
                cluster.billboard.show = true;
                cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

                if (clusteredEntities.length >= 50) {
                    cluster.billboard.image = pin50;
                } else if (clusteredEntities.length >= 40) {
                    cluster.billboard.image = pin40;
                } else if (clusteredEntities.length >= 30) {
                    cluster.billboard.image = pin30;
                } else if (clusteredEntities.length >= 20) {
                    cluster.billboard.image = pin20;
                } else if (clusteredEntities.length >= 10) {
                    cluster.billboard.image = pin10;
                } else {
                    cluster.billboard.image = singleDigitPins[clusteredEntities.length - 2];
                }
            });
        }

        // force a re-cluster with the new styling
        var pixelRange = modelLayer.clustering.pixelRange;
        modelLayer.clustering.pixelRange = 0;
        modelLayer.clustering.pixelRange = pixelRange;
    }

    viewer.dataSources.add(modelLayer);
//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
    startup(Cesium);
} else if (typeof require === "function") {
    require(["Cesium"], startup);
}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

这曾用于Cesium v1.26。我刚刚遇到与当前Cesium v1.34相同的问题并记录了一个错误。如果禁用群集，则会出现标签。