Geojson data clampToGround but mouse move has offset?

CesiumJS
1

Hello!
I am tring to load GeoJson and show polygon in cesium createWorldTerrain.
If clampToGround not be set, then polygon can not be seen.
If clampToGround be true, the mouse move has offset.

c

GeoJson file be like:

{
    "type": "FeatureCollection",
    "name": "GeoFile",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [
        {
            "type": "Feature",
            "properties": {
                "id": "1",
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                logitude_1,
                                latitude_1
                            ],
                            [
                                logitude_2,
                                latitude_2
                            ],
                            [
                                logitude_3,
                                latitude_3
                            ],
                            [
                                logitude_4,
                                latitude_4
                            ],
                            [
                                logitude_5,
                                latitude_5
                            ]
                        ]
                    ]
                ]
            }
        },
    ]
}

Codes:

  const viewer = new Cesium.Viewer("cesium-container", {
    baseLayerPicker: true,
    terrainProvider: Cesium.createWorldTerrain(),
    mapProjection: new Cesium.WebMercatorProjection(),
  });

   Cesium.GeoJsonDataSource.load(item, {
      stroke: Cesium.Color.HOTPINK,
      fill: Cesium.Color.fromBytes(25, 137, 250),
      clampToGround: true,
    }).then((data) => {
      viewer.dataSources.add(data);
      data.entities.values.forEach((entity) => {
        if (!entity.polygon?.material) return;
        entity.polygon.material = createCallback(entity);
      });
    });

let highlightedEntity: Cesium.Entity | undefined;
const highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
const normalColor = Cesium.Color.YELLOW.withAlpha(0.6);
function createCallback(entity: Cesium.Entity) {
  const colorProperty = new Cesium.CallbackProperty((time, result) => {
    if (highlightedEntity === entity) {
      return Cesium.Color.clone(highlightColor, result);
    }

    return Cesium.Color.clone(normalColor, result);
  }, false);

  return new Cesium.ColorMaterialProperty(colorProperty);
}

Tanks!

2

This problem has been solved.
Using Cesium.sampleTerrainMostDetailed to query every point’s height and use the height to update raw data.

3

Finally I found that was caused by css transform: scale.