colorByDistance use dynamic locations

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

I am new with cesium and I am trying to visualize 3D tiles using a location provided by a user but the code measures distance from a fixed latitude longitude (-1.291777521, 0.7105706624).
I am not able to put a variable in place of these values.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
// Color buildings by distance from a landmark.
function colorByDistance() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        defines : {
            distance : "distance(vec2(\{longitude\}, {latitude}), vec2(-1.291777521, 0.7105706624))"
        },
        color : {
            conditions : [
                ["\{distance\} > 0\.0002", "color\('gray'\)"\],                 \["true", "mix\(color\('yellow'\), color\('green'\), {distance} / 0.0002)"]
            ]
        }
    });
}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want users to drop a geometry on the map and the map should visualize according to the distance from the central location and the size of the geometry .

4. The Cesium version you're using, your operating system and browser.

Cesium 1.57 with Google Chrome

2

You can append your longitude/latitude to that string instead of using this fixed value. So instead of:

distance : “distance(vec2({longitude}, {latitude}), vec2(-1.291777521, 0.7105706624))”

``

You would have:

var longitude = -1.2;
var latitude = 0.7;

// …

distance : “distance(vec2({longitude}, {latitude}), vec2(” + longitude + ", " + latitude + “))”

``

Let me know if that works for you!