首页 / 浏览问题 / 三维GIS / 问题详情
在地图上绘制标签,贴地线会叠在标签图片上
66EXP 2026年01月27日

用的最新版cesium sdk, 

在三维地图上绘制图片标签和区域贴地线,贴底线会映在图片标签上。

Entity.billboard  绘制图片标签,

Entity.polyline 绘制区域,clampToGround=true;

(场景里的透明材质树图层去掉,贴地线不会绘制到图片上)

1个回答

你好,我本地测试这个现象是因为视角和缩放层级的原因导致部份被遮盖,调整视角其实是没有出现遮盖的,测试代码如下,你那边可以尝试调整视角看看效果,如果不是因为视角导致的问题,麻烦你提供一下能复现该问题的数据、坐标、图标和代码,我本地测试重现排查:

<!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>
    <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
     <script src="./js/spectrum.js"></script>
    <script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
    <script src="./js/config.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>
<div id="toolbar" class="param-container tool-bar">
    <div class="param-item">
        <label>地形显隐:</label>
        <label for="terrainVisible">地形显示</label>
        <input type="radio" name="isTerrainVisible" value="terrainVisible" id="terrainVisible" checked>
        <label for="terrainUnvisible">地形隐藏</label>
        <input type="radio" name="isTerrainVisible" value="terrainUnvisible" id="terrainUnvisible">
    </div>
    <div class="param-item">
        <label>颜色透明</label>
        <input class="colorPicker" size="8" data-bind="value: color,valueUpdate: 'input'" id="colorPicker">
    </div>
    <div class="param-item">
        <label>颜色透明容限</label>
        <input type="range" min="0" max="1" step="0.02" data-bind="value: tolerance,valueUpdate: 'input'" id="tolerance" style="display: block;width:200px;margin: 5px 0">
    </div>
</div>
    
<script>
function onload(Cesium) {
    var viewer = new Cesium.Viewer('cesiumContainer',{
        //创建地形服务提供者的实例,url为SuperMap iServer发布的TIN地形服务
        terrainProvider : new Cesium.CesiumTerrainProvider({
            url : URL_CONFIG.SiChuan_TERRAIN,
            isSct : true,//地形服务源自SuperMap iServer发布时需设置isSct为true
            invisibility:true
        }),
    });
    //添加SuperMap iServer发布的影像服务
    var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
        url : URL_CONFIG.SiChuan_IMG
    }));
    
    let scene = viewer.scene

   var promise = scene.open(URL_CONFIG.SCENE_CBD);

     let dashedLine = viewer.entities.add({
                name: 'BLUE dashed line', // 实体名称
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights([116.44866497107367, 39.90704136560455, 10,116.44850453420888,39.90731297011973,10, 116.44874704472012, 39.908917501332404, 10]), // 带高度的坐标点
                    width: 4, // 线条宽度
                    material: new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.BLUE // 蓝色虚线
                    }),
                    clampToGround:true
                }
            });
            
            
            viewer.entities.add({
                        position: Cesium.Cartesian3.fromDegrees(
                            Number(116.44850453420888), // 经度
                            Number(39.90731297011973), // 纬度
                            Number(10)  // 高度
                        ),
                        billboard: {
                            image: './images/location4.png', // 标注图标
                            width: 30,  // 图标宽度
                            height: 40, // 图标高度
                        },
                    });
    
    var viewModel = {
        color : '#ffffff',
        tolerance : 0
    };
    $("#colorPicker").spectrum({
        color: "rgba(255,0,0,1)",
        showPalette: true,
        showAlpha: true,
        localStorageKey: "spectrum.demo",
        preferredFormat:'rgb'
    });
    $("#colorPicker").on('change', function(event) {
        var selectedColor = Cesium.Color.fromCssColorString(event.target.value);
        layer.transparentBackColor = selectedColor;
    });
    Cesium.knockout.track(viewModel);
    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);
    Cesium.knockout.getObservable(viewModel,'tolerance').subscribe(
        function(newValue) {
            layer.transparentBackColorTolerance = newValue;
        }
    );
    $("#terrainVisible").click(function(){
        viewer.terrainProvider.visible = true;
    });
    $("#terrainUnvisible").click(function(){
        viewer.terrainProvider.visible = false;
    });
    $('#loadingbar').remove();
    $('#toolbar').show();
}
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    onload(Cesium);
}
</script>
<!-- Code injected by live-server -->
<script>
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var parent = elem.parentElement || head;
					parent.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					parent.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
</script>
</body>
</html>

3,795EXP 2026年01月28日
引用: 你好,我本地测试这个现象是因为视角和缩放层级的原因导致部份被遮盖,   

特殊视角和缩小状态下,这个遮盖能处理 不遮盖么?
这个处理不了哈,这个是正常视角调整的现象
没有树这样的透贴图层,    这种被遮盖的现象就没有。  

是不是bug, 可以优化掉
没理解你说的“树这样的透贴图层”是什么?提供一下你说的数据和代码,以及测试截图,我本地测试看看

你这个场景里的 树 layer删掉,  绘制的线就不会叠在 图片标签上了

蓝色虚线是贴在建筑、树、电线杆、地面上的,所以会有垂直等各个方向的蓝色虚线,有这些图层就会存在视角上的遮盖,去掉的话刚好那个视角就没有了,他就只是贴地面。

你的图标弄高点 z=50,  线也会叠在图标上

标签设置不被模型遮挡, 线就不会叠加到标签上。  

可以修改成,标签被模型遮挡,线也不叠加到标签上么?
...