用supermap cesium 2026加载图标很模糊还有边缘锯齿，但是官方cesium1.143版本很清晰

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>天地图影像</title>
    <!-- 引入 public 目录下的 supermap cesium 2026 build 包 -->
    <link href="../public/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script type="text/javascript" src="../public/Build/Cesium/Cesium.js"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        /* 移除原始依赖，这里使用基础 CSS 来代替 Bootstrap 样式 */
        .tool-bar {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(42, 42, 42, 0.8);
            padding: 10px;
            border-radius: 4px;
            color: white;
            z-index: 999;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .form-control {
            width: 100%;
            padding: 8px;
            background: #333;
            color: #fff;
            border: 1px solid #555;
            border-radius: 3px;
            cursor: pointer;
        }

        .form-control:focus {
            outline: none;
            border-color: #0078A8;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>


    <script>
        // 使用默认的天地图 Token（从之前的代码中提取的通用 tk）
        const TOKEN_TIANDITU = 'd3940c4f1d55fdfb8b053ad7f1e0c80d';

        function onload(Cesium) {
            // 初始化 viewer 部件
            var viewer = new Cesium.Viewer('cesiumContainer', {
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                baseLayerPicker: false,
                navigationHelpButton: false,
                animation: false,
                timeline: false,
                infoBox: false,
                selectionIndicator: false
            });

            // 隐藏 Cesium 版权信息
            viewer._cesiumWidget._creditContainer.style.display = 'none';

            // 添加天地图基础影像服务
            viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
                credit: new Cesium.Credit('天地图全球影像服务     数据来源：国家地理信息公共服务平台 & 四川省测绘地理信息局'),
                token: TOKEN_TIANDITU
            }));

            var imageryLayers = viewer.imageryLayers;

            // 初始化天地图全球中文注记服务，并添加至影像图层 (索引1)
            var labelImagery = new Cesium.TiandituImageryProvider({
                mapStyle: Cesium.TiandituMapsStyle.CIA_C, // 天地图全球中文注记服务（经纬度投影）
                token: TOKEN_TIANDITU
            });
            imageryLayers.addImageryProvider(labelImagery);



            // 视角定位到成都
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 100000), // 降低高度以看清成都区域
                orientation: {
                    heading: 0,
                    pitch: Cesium.Math.toRadians(-90),
                    roll: 0
                }
            });

            // 随机在成都周边添加图标 (使用 ../public/mark.png)
            for (let i = 0; i < 50; i++) {
                // 在成都经纬度 (104.06, 30.67) 附近随机生成坐标
                let randomLon = 104.06 + (Math.random() - 0.5) * 0.5;
                let randomLat = 30.67 + (Math.random() - 0.5) * 0.5;

                viewer.entities.add({
                    name: "随机位置 " + i,
                    position: Cesium.Cartesian3.fromDegrees(randomLon, randomLat),
                    billboard: {
                        image: '../public/mark.png',
                        scale: 0.25,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                    }
                });
            }
        }

        if (typeof Cesium !== 'undefined') {
            window.startupCalled = true;
            onload(Cesium);
        } else {
            console.error('Cesium is not loaded. 检查 ../public/Build/Cesium/Cesium.js 路径是否正确。');
        }
    </script>
</body>

</html>
智能推荐
