Terrain Modification Web App

[goni000211]

Hello!
I completed the Terrain Modification Web App and I want to introduce my results to the Cesium community.

The first feature is measurement, which is a default feature in GIS web applications.
The difference is that I created a data list on the left side of the viewer and resolved the kinked polygon problem in Cesium.

---

The second feature is the terrain-flattening tool.
You can draw an area and specify the height to flatten the terrain using a slider.

wire view mode

---

The third feature is the construction tool.
You can select a building model and add model entities to the Cesium viewer.

---

With the three tools mentioned above, users planning construction can measure the area, flatten the planned area, and add building models.

Thanks to the Cesium team and community, I was able to complete the project.

This is my web app link : https://stans-map.vercel.app/
Feel free to ask me any questions!

[cqliao]

Very well done, I want to know how wire view mode is implemented，thanks

[Adekunle]

Hi,
I read your post about adding entities to the viewer. Please can you help me I’m trying to add a 3d model to my Cesium App but I noticed the models were not showing in the app, I wouldn’t mind if you could help me with any suggestion on how to go about it.

[goni000211]

Thank you!

Implementing wire view mode is not complicated.

viewer.scene.globe._surface.tileProvider._debug.wireframe = boolean;

You just need to change a boolean value.

[goni000211]

I add model entities to viewer with the code below.

viewer.entities.add({
            position: clickPosition,
            model: {
              uri: "/glb/burj_khalifa.glb",
              scale: 30,
            },
          });

Your model might be added below ground level and not visible.
Adjust the height value or check in the network tab to confirm if the model is being loaded.

[SAYEOR]

The terrain flattening tool is achieved by adjusting the height of terrain vertices, but it becomes ineffective when there are no vertices in the drawn area. Is there a good solution?

[goni000211]

Good Question!

The more detailed the DEM information, the smaller the area that can be flattened.

There is no way in frontend, it only depends on terrain information in backend.
This is why I introduced wire view mode to check the areas that can be flattened.

[xjindf]

Hello, may I ask if your terrain editing is based on the following post on the forum?

Terrain editing on the fly

I found a better way to achieve this. Since I have the level, x and y of the tile in the requestTileGeometry method, and also have access to the terrain provider tiling scheme, I used this._tilingScheme.tileXYToRectangle(x, y, level) to get the tile’s rectangle and checked if it overlaps the user’s polygon. Bummer… but I guess it won’t be so bad to have the terrain reloaded. We’ll see when I’m done Right now I’m focused on this issue. I’m trying to break the mesh triangles th…

[goni000211]

HI

Cesium currently lacks a terrain modification API, so I referred to another open-source code. Due to uncertainty about sharing someone else’s code, I will provide my modified code instead.

alexgoni/Stans-Map/blob/main/components/module/lib/CustomTerrainProvider.js

As a side note, it is presumed that the open sourcecode I referred to originated from that forum.

[xjindf]

Well done, learning from you! I don’t know if you have a good solution for multiple excavation holes in the terrain

[goni000211]

It already supports multiple terrain modification features.

Is this what you meant?

[xjindf]

Cesium’s built-in ClippingPlaneCollection can only achieve single convex polygon removal. Due to functional requirements, I need to implement concave polygon removal or multiple polygon removal. The following is a forum post, but he needs to modify the Cesium source code, so I don’t think it’s a perfect solution.

Add support for concave /convex clipping planes + holes in CesiumJS

[goni000211]

To my knowledge, the cesium clipping plane creates an infinite plane with only the normal vector and distance, and this plane cannot be modified.

If you don’t want the concave polygon part to be rendered for one tile,
consider creating multiple clipping planes vertically, as in the example below.

Cesium Sandcastle

[mehmet_emin_yalcin]

Hi goni000211,
How you solved z values of point you added. When I click a position and add a point on this location it have been drawn under building or glb models How can I solve it.
Here is my code

viewer.entities.add({
position: rayPosition,
point: {
pixelSize: 10,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.RED,
outlineWidth: 3,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY
},
});
}

[goni000211]

How about removing the heightReference property?
Upon comparing your code with mine, the only difference is that part.

This is my function.

export function createLinePoint({ viewer, position }) {
  const point = viewer.entities.add({
    position,
    point: {
      pixelSize: 9,
      color: Cesium.Color.GOLD,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 2,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
  });

  return point;
}

[mehmet_emin_yalcin]

When I remove heightReference it was drawn under terrain.

[goni000211]

As far as I know, if you apply disableDepthTestDistance: Number.POSITIVE_INFINITY,
the point will be visible regardless of depth.

Another possibility that can be considered is that the click position is incorrect.
Please check the code with my code.

function getRayPosition({ viewer, position }) {
  const ray = viewer.camera.getPickRay(position);
  const rayPosition = viewer.scene.globe.pick(ray, viewer.scene);

  return rayPosition;
}