Animating a point along the line in arcgis

Ever wished your maps could tell a more vivid story? Imagine tracking a moving object on your map, like a boat sailing along a river or a car cruising through city streets. Static markers are good, but animating a point along a line takes your map to a whole new level. In this tutorial, we’ll show you how to breathe life into your maps using the ArcGIS JavaScript API 4.x. By making a 3D boat move along a route, you can create dynamic and interactive maps that captivate your audience. Whether you’re visualizing the journey of a delivery truck, animated 3D objects add that extra touch of realism. Get ready to make your maps not just informative but downright fun! Join us as we walk through the simple steps of animating a 3D boat along a route.

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

The provided code is an HTML document with embedded JavaScript that uses the ArcGIS API for JavaScript (version 4.x) to create a 3D map and animate a boat along a specified route. I’ll provide a step-by-step explanation of the key components and functionalities in the code:

JavaScript Code:

1. ArcGIS API and Modules:

The script begins by loading the necessary modules from the ArcGIS API, including modules for creating maps, scene views, layers, graphics, symbols, and widgets.

2. Map Initialization:

• A new Map object is created with a specified basemap (“streets-vector”) and ground (“world-elevation”).

3. SceneView Initialization:

• A new SceneView is created and associated with the previously defined map.
• The initial camera position and orientation are set to a specific location.

4. Boat Symbol:

• A function boat_symbol is defined to create a 3D boat symbol using the ObjectSymbol3DLayer with a specified 3D model file (“Motorboat.glb”).
• .glb or.glTF is popular format for representing 3D object. Here, we are using Motorboat.glb file to animate on the map along the line.

5. Graphics and Layers:

• The route path, source, and target points are defined.
• Graphics layers are created for the route and a moving boat symbol.

6. Animation Functions:

• Several utility functions for calculating distance, heading, and bearing between points on the map.
• heading method defined in the code is used to set the screen angle along the boat. You can play with this function to test it.
• bearing method is used to set the direction of boat along the route. This function takes current and last coordinate of the path. This one is used to set boat alignment along the route.
• The animateLine function animates the boat along the specified route using a series of waypoints.

Here’s a summary of the mathematics behind the animateLine method, incorporating insights from the given code:

1. Calculating Segment Durations:

• It calculates the distances between waypoints along the path.
• It scales those distances proportionally to an overall animation duration (AREA_ANIMATION_DURATION) to determine how long each segment should take to animate.

2. Incremental Movement:

• It uses a recursive step function called repeatedly via window.requestAnimationFrame to create smooth animation.
• Within each step:

3. Timing and Completion:

• It checks if the animation for the current segment is complete (progress >= durations[index]).
• If all segments have been animated, it logs a completion message and stops the animation.

Key Mathematical Concepts:

• Distance Calculation: It uses a distance formula like the Euclidean distance to measure distances between points in 2D space.
• Linear Interpolation: It smoothly transitions between points using linear interpolation, a technique for finding intermediate values along a straight line.
• Camera Adjustment: It involves vector math and trigonometry to calculate appropriate camera positions and orientations based on the moving point’s location.

7. Event Handling:

• Event listeners are set up to prevent map interaction during the animation.

8. Navigation Button:

• A button with the ID “navigate” triggers the navigation and animation when clicked.

9. Execution:

• The script executes and initializes the map, view, layers, and event handling.

Step-by-Step Explanation:

1. Map and SceneView Setup: Initialize a map and a 3D scene view, set the initial camera position.
2. Symbol Creation: Define a boat symbol using a 3D model.
3. Graphics and Layers: Set up graphics for the route and boat, create graphics layers for display.
4. Animation Logic: Implement functions for distance, heading, bearing, and a function to animate the boat along the specified route.
5. Event Handling: Set up event listeners to prevent map interaction during animation.
6. Navigation Button: Create a button to trigger the animation.
7. Execution: Execute the script, creating the map, layers, and setting up event handling.

Note:

• The animateLine function uses the requestAnimationFrame method to create a smooth animation loop.
• The bearing function calculates the bearing between two geographical points.
• The navigation button (#navigate) triggers the animation when clicked.

Complete Code:

I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an mail at contact@spatial-dev.guru.

We also offer freelancing services. Please email us at contact@spatial-dev.guru for any query.