What are the steps for aligning GeoJSON data with terrain within Cesium Sandcastle?

I am currently using terrain view in Cesium Sandcastle and have loaded roads data in GeoJSON format as lines. I would like to clamp them on the terrain, similar to this example (select "Sample line positions and draw with depth test disabled" from drop-down menu) -> In the provided example, the line is defined within the code, but I have my data (roads) on my PC which is already loaded in the app. However, the roads are currently flat (below the terrain) and I need assistance in clamping them onto the terrain.

I attempted to use the existing code from the example without success.

Here is my current code snippet:

// Adding terrain
var viewer = new Cesium.Viewer('cesiumContainer');
var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    requestWaterMask : true,
    requestVertexNormals : true
});
viewer.terrainProvider = cesiumTerrainProviderMeshes;
viewer.scene.globe.depthTestAgainstTerrain = true;

// Loading data (roads)
var dataSource = Cesium.GeoJsonDataSource.load('../../SampleData/ceste_rab_okvir.geojson');
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);

I am aware of Cesium.GeoJsonDataSource.clampToGround, but due to my lack of coding experience, I struggle to implement it in my code. Could someone provide guidance on how to achieve this? Alternatively, if there are other methods to clamp roads to the terrain, I would appreciate any suggestions.

Thank you in advance.

Answer №1

After some investigation, I have come up with the correct way to write it:

//Include terrain
var viewer = new Cesium.Viewer('cesiumContainer');
var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    requestWaterMask : true,
    requestVertexNormals : true
});
viewer.terrainProvider = cesiumTerrainProviderMeshes;
viewer.scene.globe.depthTestAgainstTerrain = true;

//Import data (roads)
Cesium.GeoJsonDataSource.clampToGround = true;
var dataSource = Cesium.GeoJsonDataSource.load('../../SampleData/ceste_rab_okvir.geojson');
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript Functions to Resize Buttons and Change function on Click

I have a button in my code that triggers CSS changes by adding and removing classes. The JavaScript for this function works as intended - clicking once adds the class, clicking again removes it, and so on. However, I also implemented a feature to remove t ...

Determine whether the elements in the master array match the elements in the child array

Checking for data presence in arrays: [ { "productDisplay": "ZXP 105", "productNumber": "WZDR 112" }, { "productDisplay": "ZXP 106", "productNumber": "WZDR 113" } ] ChildArray [{productDisplay:"ZXP 105", ...

jQuery's making an error here - looks like matchExpr[type].exec is missing in action

Today, I encountered an error while running my code. Despite searching for guidance online, resources that could help me were hard to come by. Specifically, after crafting a few JavaScript functions, any attempt to use jQuery's methods on selectors r ...

Ways to send user input to a function within a React component

I am currently working on implementing a simple feature where users can search posts by their tags. To achieve this, I have created the Feed.jsx component with the following code: "use client"; import { useState, useEffect } from "react&quo ...

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

What is the best way to manage a file upload process?

What is the process for handling a file uploaded through curl in an express js action/route? router.route('/images') .post (function(req, res) { res.status(200); res.json({ message: 'file uploaded' }); }); app.u ...

Ways to detect scrolling activity on the v-data-table module?

Are you looking for a way to detect scrolling events on the v-data-table component in Vuetify framework? I am referring to the scenario where the table has a fixed height, causing the table body to scroll. <v-data-table fixed-header :height=400 : ...

Accessing my data on my personal server through firestore entails an extra step in the request process

If I were to set up Cloud Firestore on my personal server, wouldn't that create a "two-way trip" for accessing my data? What I find concerning is the fact that the client-side has to send a request to my server first, and then my server must reach ou ...

Navigating the complexities of managing group radio buttons in React JS within a functional component

I'm looking to implement a functionality where only one radio button can be selected at a time within a group. I've searched online for class component code, but I'm in need of a solution using React hooks. Can someone help me with an onChan ...

When the page is scrolled, trigger a click event on the next button in

Currently, I have a listing page that features pagination at the bottom. However, my goal is to transform this into an infinite loading page. The issue I am facing is that when the click event triggers after scrolling to the bottom, it makes calls for pag ...

The HTTP GET request was successful, however, there is no data being displayed on the screen

I am currently facing an issue with fetching data from a web server. The data is retrieved successfully as I can see the object in the console log, but it does not render in the component template. export class CountrydetailsComponent implements OnInit { ...

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

In my Angular 4 application, I encountered an issue with a date retrieved from an API call. The date is in the format '1990-03-31T23:00:00-06:00' and when attempting to create a Date object and retrieve the month using getMonth(), it returns the ...

What causes jQuery results to resemble a function?

When I create a jQuery wrapped set and insert it into console.log, the output appears as follows: I am aware that we can manipulate the console to display objects or arrays. For example, when we have: var obj = { 0: 'some', 1: 'dat ...

Extracting data from the response object and injecting it into the request

Once the file has been successfully uploaded, the 'uploadSuccess' callback event is triggered, providing information about the newly created media. The 'hashed_id' value within this object is crucial for my PUT request. I attempted to ...

How to modify a nested object in MongoDB based on the JSON data provided

In my possession, there exists a structured form of JSON data as displayed below: [ {"size":100,"year":2015,"geography":"London","age":"21","gender":"Female"}, {"size":80,"year":2015,"geography":"Cardiff","age":"38","gender":"Male"}, {"size":80,"year":201 ...

Javascript: regular expression to validate alphanumeric and special characters

Looking to create a regular expression for a string (company/organization name) with the following conditions: No leading or trailing spaces No double spaces in between Shouldn't allow only a single character (alphanumeric or whitelisted) Can start ...

Occasionally, the system may mistakenly flag a password as invalid even though it is indeed correct

To ensure the password meets certain criteria, it must start with a Z, have at least 8 characters, and contain an asterisk *. Take a look at this validating function: function validatePassword() { var strPassword; //Prompt user to enter pas ...

Output a message to the Java console once my Selenium-created Javascript callback is triggered

My journey with Javascript has led me to mastering callback functions and grasping the concept of 'functional programming'. However, as a newcomer to the language, I struggle to test my syntax within my IntelliJ IDE. Specifically, I am working on ...

Encountering an issue with an AngularJS form containing ng-repeat when attempting to submit

Here is my form structure: two text inputs followed by an ng-repeat with a text input and radio button inside. <form class="form-horizontal" id="myForm" name="myForm"> <div class="form-group"> <label for="name" class="co ...

Dealing with useEffect being invoked twice within strictMode for processes that should only execute once

React's useEffect function is being called twice in strict mode, causing issues that need to be addressed. Specifically, how can we ensure that certain effects are only run once? This dilemma has arisen in a next.js environment, where it is essential ...