Cesium实现“文字避让功能”，完整demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Drawing Example</title>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        #cesiumContainer {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
    <script>

        Cesium.Ion.defaultAccessToken =
        "你的令牌";
        const viewer = new Cesium.Viewer('cesiumContainer', {});
        viewer.scene.debugShowFramesPerSecond = true;

        let Labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
        let rectangleCollisionCheck = new Cesium.RectangleCollisionChecker();
        let labelIds = []; 
        for (var i = 0; i < 1000; i++) {
            let oneLabel = Labels.add({
                position: Cesium.Cartesian3.fromDegrees(-75.10 + Math.random() * 100, 39.57 + Math.random() * 100),
                text: 'Label ' + i
            });
            labelIds.push(i);
        }
        function updateLabelVisibility() {
            rectangleCollisionCheck._tree.clear();

            for (let id of labelIds) {
                let oneLabel = Labels.get(id);
                if (oneLabel) {
                    let ssPos = oneLabel.computeScreenSpacePosition(viewer.scene);
                    let boundingRectangle = Cesium.Label.getScreenSpaceBoundingBox(oneLabel, ssPos);
                    let { x, y, width, height } = boundingRectangle;
                    const west = x;
                    const south = y;
                    const east = x + width;
                    const north = y + height;
                    const rectangle = new Cesium.Rectangle(west, south, east, north);
                    
                    let isCollide = rectangleCollisionCheck.collides(rectangle);
                    if (isCollide) {
                        oneLabel.show = false;
                    } else {
                        oneLabel.show = true;
                        rectangleCollisionCheck.insert(id, rectangle);
                    }
                }
            }
        }
        viewer.camera.moveEnd.addEventListener(updateLabelVisibility);
        // viewer.camera.changed.addEventListener(updateLabelVisibility);
        // viewer.camera.moveStart.addEventListener(updateLabelVisibility);
        // viewer.scene.preRender.addEventListener(updateLabelVisibility);
        updateLabelVisibility();
    </script>
</body>
</html>
参考链接：cesium文字实现避让功能_cesium 字体重叠怎么解决-CSDN博客
Cesium实现“文字避让功能”，完整demo

悦读
