KML data source Point entity

CesiumJS
1

Hi everyone,I have a kml file and I want to show it in cesium. I made changes to the polygons, lines and billboards in the codes below, but I cannot change the point data. Points are shown on the map, but the console says point location is undefined. How can I make changes? Thanks in advance

 // KmlDataSource referance update
        kmlDataSourceRef.current = kmlDataSource;
        // Customize the entities as needed
        entities.forEach((entity) => {
             console.log(entity.entityCollection.collectionChanged, "entity");
            if (entity.polyline) {
                entity.polyline.arcType = Cesium.ArcType.GEODESIC;
                entity.polyline.clampToGround = true;
            }

            if (entity.polygon) {
                //console.log(entity.polygon.hierarchy);
                entity.polygon.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
                let height = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions[0].z / 100000;
                entity.polygon.extrudedHeight = height;
                entity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.5);
                entity.polygon.fill = true;
                entity.polygon.outlineColor = Cesium.Color.AQUA;
            }

            if (entity.billboard) {
                entity.billboard.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
                entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
            }
        });
2

This looks like this is related to using the CesiumJS runtime and not the Cesium ion hosting services. I have moved it to the CesiumJS category where it will get a better response.

1 Like
3 
 if (entity.billboard) {
                const pixelRange = 100;
                const minimumClusterSize = 50;
                const enabled = true;

                kmlDataSource.clustering.enabled = enabled;
                kmlDataSource.clustering.pixelRange = pixelRange;
                kmlDataSource.clustering.minimumClusterSize = minimumClusterSize;

                let removeListener;

                const pinBuilder = new Cesium.PinBuilder();
                const pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();

                function customStyle() {
                    if (Cesium.defined(removeListener)) {
                        removeListener();
                        removeListener = undefined;
                    } else {
                        removeListener = kmlDataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
                            cluster.label.show = false;
                            cluster.billboard.show = true;
                            cluster.billboard.id = cluster.label.id;
                            cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

                            if (clusteredEntities.length >= 50) {
                                cluster.billboard.image = pin50;
                            }
                        });
                    }
                }

                // start with custom style
                customStyle();

                entity.billboard.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
                entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
                entity.billboard.scaleByDistance = new Cesium.NearFarScalar(0.0, 1.0, 100000.0, 0.9);
                entity.billboard.image = '/demo/images/whiteShapes.png';
                entity.billboard.width = 25;
                entity.billboard.height = 25;
                entity.billboard.imageSubRegion = new Cesium.BoundingRectangle(67, 80, 14, 14);
                entity.billboard.color = Cesium.Color.YELLOW;
                entity.label.show = false;
            }