Line of Sight Widget is not changing its position when the observer position is changed-CodePudding

I am developing a project in javascript API, and I m working on line of sight widget, in my code the observer is set on the upper floor of an existing building. Further it shows how the view of the observer is obstructed if a new building is constructed in front of it.

But in my code, when I change the direction or position of my observer on the map, it is not taking any impact. Any workarounds or ideas?

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />


    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
      require([
        "esri/WebScene",
        "esri/views/SceneView",
        "esri/widgets/LineOfSight",
        "esri/widgets/Expand",
        "esri/geometry/Point",
        "esri/Graphic",
        "esri/core/watchUtils"
      ], (
        WebScene,
        SceneView,
        LineOfSight,
        Expand,
        Point,
        Graphic,
        watchUtils
      ) => {

        const scene = new WebScene({
          portalItem: {
            id: "82127fea11d6439abba3318cb93252f7"
          }
        });

        const view = new SceneView({
          map: scene,
          container: "viewDiv"
        });


        const lineOfSight = new LineOfSight({
          view: view,
          container: "losWidget"
        });

        


        const viewModel = lineOfSight.viewModel;


  
        const intersectionSymbol = {
          type: "point-3d",
          symbolLayers: [
            {
              type: "object",
              resource: { primitive: "inverted-cone" },
              material: { color: [255, 100, 100] },
              height: 10,
              depth: 10,
              width: 10,
              anchor: "relative",
              anchorPosition: { x: 0, y: 0, z: -0.7 }
            }
          ]
        };

        function setIntersectionMarkers() {
          view.graphics.removeAll();
          viewModel.targets.forEach((target) => {
            if (target.intersectedLocation) {
              const graphic = new Graphic({
                symbol: intersectionSymbol,
                geometry: target.intersectedLocation
              });
              view.graphics.add(graphic);
            }
          });
        }
        viewModel.observer = new Point({
          latitude: 42.3521,
          longitude: -71.0564,
          z: 139
        });

        viewModel.targets = [
          createTarget(42.3492, -71.0529),
          createTarget(42.3477, -71.0542),
          createTarget(42.3485, -71.0533),
          createTarget(42.3467, -71.0549)
        ];

        function createTarget(lat, lon, z) {
          return {
            location: new Point({
              latitude: lat,
              longitude: lon,
              z: z || 0
            })
          };
        }


        viewModel.start();

        watchUtils.whenEqualOnce(viewModel, "state", "creating", () => {
          viewModel.stop();
        });

        const expand = new Expand({
          expandTooltip: "Expand line of sight widget",
          view: view,
          content: document.getElementById("menu"),
          expanded: true
        });

        view.ui.add(expand, "top-right");

        view.when(() => {

          const plannedBuildingsLayer = view.map.layers
            .filter((layer) => {
              return (
                layer.title === "Boston major projects - MajorProjectsBuildings"
              );
            })
            .getItemAt(0);

          document
            .getElementById("layerVisibility")
            .addEventListener("change", (event) => {
              plannedBuildingsLayer.visible = event.target.checked;
            });
        });
      });
    </script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #menu {
        padding: 1em;
      }
    </style>
  </head>

  <body>
    <div id="viewDiv">
      <div id="viewDiv">
        <div id="menu" class="esri-widget">
          <h3>Line of sight analysis</h3>
          <input type="checkbox" id="layerVisibility" checked /><label
            for="layerVisibility"
            >Show development layer</label
          >
          <div id="losWidget"></div>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

You didn’t include the code for, when the observer location changes and when a new target is added or removed.

Please update your code as follows:

viewModel.watch("observer", (value) => {
      setIntersectionMarkers();
    });
    viewModel.targets.on("change", (event) => {
      event.added.forEach((target) => {
        setIntersectionMarkers();
        // for each target watch when the intersection changes
        target.watch("intersectedLocation", setIntersectionMarkers);
      });
    });