'Show current location in Cesium

I'm using cesium map

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Draw</title>
  <script src="../../Cesium/Cesium.js"></script>
  <style>
    @import url(../../Cesium/Widgets/widgets.css);
    html, body, #cesiumContainer {
        width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.BingMapsApi.defaultKey = 'XXXXXXXXXX';
  var viewer = new Cesium.Viewer('cesiumContainer', {infoBox : false, selectionIndicator : false });
  var color;
  var camera = viewer.camera;
  var polyline;
  var drawing = false;
  var positions = [];
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  handler.setInputAction(
      function (click) {
          if (drawing) {
              color.alpha = 0.6;
              viewer.entities.add({
                  polygon: {
                      hierarchy : {
                          positions : positions
                      },
                      material : color,
                      outline : true
                  }
              });
              viewer.entities.remove(polyline);
              positions = [];
          } else {
              color = Cesium.Color.fromRandom({alpha : 1.0});
              polyline = viewer.entities.add({
                  polyline : {
                    positions : new Cesium.CallbackProperty(function(){
                      return positions;
                    }, false),
                    material : color
                  }
              });
          }
          drawing = !drawing;
      },
      Cesium.ScreenSpaceEventType.LEFT_CLICK
  );

  handler.setInputAction(
      function (movement) {
          var surfacePosition = camera.pickEllipsoid(movement.endPosition);
          if (drawing && Cesium.defined(surfacePosition)) {
              positions.push(surfacePosition);
          }
      },
      Cesium.ScreenSpaceEventType.MOUSE_MOVE
  );
  
  camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-100, 40, 10000)});

  </script>
</body>
</html>

I want to show current location on the map and it should zoom that location from where the user is accessing the map. Is it possible in cesium, Thanks

cesium


Solution 1:[1]

Possible. Here is a Sandcastle link.

Solution 2:[2]

check cesium api doc here.

https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html?classFilter=viewer#zoomTo

viewer.zoomTo(any entity object you want to focus, option)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ZhefengJin
Solution 2 sozerodev

Related Questions