首页 / 浏览问题 / 三维GIS / 问题详情
billboard怎么贴地
23EXP 2022年07月27日

使用产品: SuperMap iClient3D for Cesium  操作系统:win7 x64
数据类型:geojson
问题详细描述:billboard怎么贴地
问题重现步骤: 用如下代码加载billboard,并不贴地。

 let promise = new Cesium.GeoJsonDataSource('村庄').load('../../data.json', {

        clampToGround: true

      });

      promise.then(dataSource => {

        viewer.dataSources.add(dataSource);

        let entitires = dataSource.entities.values;

        for (let i = 0; i < entitires.length; i++) {

          const entity = entitires[i];

          let property = {};

          entity.properties._propertyNames.forEach(p => {

            property[p] = entity.properties[p]._value;

          });

          let name = property.name || property.Name || property.NAME;

          entity.billboard = {

            image: '../../assets/党徽.png', // default: undefined

            show: true, // default

            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default

            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER

            scale: 1.0, // default: 1.0

            width: 25, // default: undefined

            height: 25, // default: undefined

            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地

            disableDepthTestDistance: Number.POSITIVE_INFINITY //永远可视,不被地形压盖

          };

          entity.label = {

            text: name,

            font: "10px sans-serif",

            style: Cesium.LabelStyle.FILL_AND_OUTLINE,

            scale: 0.5,

            fillColor: Cesium.Color.fromCssColorString("#FF0000"),

            outlineColor: Cesium.Color.WHITE,

            outlineWidth: 3,

            pixelOffset: new Cesium.Cartesian2(

              20,

              20

            ),

            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, //贴地

            disableDepthTestDistance: Number.POSITIVE_INFINITY //永远可视,不被地形压盖

          };

        }

      })

效果图如下:billboard都飘在空中。

1个回答

您好,

1.贴地效果也是让图标锚点贴地,锚点通常是在图片中心,所以会一半地上一半地下

2. billboard贴地示范代码
 

var viewer = new Cesium.Viewer('cesiumContainer',{
        //添加STK World Terrain地形服务
        terrainProvider : new Cesium.CesiumTerrainProvider({
            url : URL_CONFIG.STK,
            requestWaterMask : true,
            requestVertexNormals : true
        }),
        //添加BingMaps影像服务
        imageryProvider :  new Cesium.BingMapsImageryProvider({
            url : 'https://dev.virtualearth.net',
            mapStyle : Cesium.BingMapsStyle.AERIAL,
            key : URL_CONFIG.BING_MAP_KEY
        })
    });
    //设置相机视角
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(103.064734, 31.12816),
        billboard :{
            image : './images/省级.png',
            heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
        }
    });
    viewer.scene.globe.depthTestAgainstTerrain = false;
    viewer.scene.camera.setView({
        destination : new Cesium.Cartesian3.fromDegrees(103.064734,31.12816,8870.867706),
        orientation : {
            heading : 0.34555839949062594,
            pitch : -0.1422794351856307,
            roll : 0.0009471063581933947
        }
    });



3.如果您不想一半地上一半地下,有两种方式(1)就用绝对高度,但是点或者布告板得有高程信息(2)使用viewer.scene.globe.depthTestAgainstTerrain = false;,这样实体就不会被地形遮挡,会靠近地面,但也不是完全贴地

4,151EXP 2022年07月27日
...