Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to achieve simple arrow effect in Cesium". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

On mapbox-gl, you can use turf.js to achieve a simple arrow drawing, Cesium calls its own api, can also achieve the arrow drawing.

The way of realization is to first calculate the angle of the two points relative to the north direction, and then calculate the point coordinates of a certain distance according to the angle, so as to achieve the effect of arrowhead.

The angle of Cesium calculation relative to the northward direction is calculated according to the matrix.

Specific implementation code functions:

/ * *

* calculate the angle of point an and point b (deflection angle)

* @ param lng_a a point longitude

* @ param lat_a a point dimension

* @ param lng_b b longitude

* @ param lat_b b point dimension

* @ returns Angle

, /

Function courseAngle (lng_a, lat_a, lng_b, lat_b) {

/ / A local coordinate system is established with a point as the origin (the east direction is the x axis, the north direction is the y axis, and the perpendicular to the ground is the z axis), and a transformation matrix for the transformation from local coordinates to world coordinates is obtained.

Var localToWorld_Matrix =

Cesium.Transforms.eastNorthUpToFixedFrame (new Cesium.Cartesian3.fromDegrees (lng_a, lat_a))

/ / find the transformation matrix from world coordinates to local coordinates

Var worldToLocal_Matrix =

Cesium.Matrix4.inverse (localToWorld_Matrix, new Cesium.Matrix4 ())

/ / the position of the point in the local coordinates is actually the origin of the local coordinates.

Var localPosition_A =

Cesium.Matrix4.multiplyByPoint (worldToLocal_Matrix

New Cesium.Cartesian3.fromDegrees (lng_a, lat_a)

New Cesium.Cartesian3 ()

/ / the local coordinate position of point B with point An as the origin

Var localPosition_B =

Cesium.Matrix4.multiplyByPoint (worldToLocal_Matrix

New Cesium.Cartesian3.fromDegrees (lng_b, lat_b)

New Cesium.Cartesian3 ()

/ / Radian

Var angle =

Math.atan2 ((localPosition_B.y-localPosition_A.y)

(localPosition_B.x-localPosition_A.x))

/ / Angle

Var theta = angle* (180/Math.PI)

If (theta < 0) {

Theta = theta + 360

}

Return theta

}

However, what is calculated above is the angle corresponding to the x-axis, that is, the angle relative to the east, which is converted to a relatively northerly angle, which needs to be subtracted by 90 degrees.

Given a point, another point is calculated according to the angle and distance, also with reference to the official matrix calculation. / / _ ca_coord is the Cesium Cartesian3 coordinate / / local_coord is the offset meter relative to the current coordinate / / the return value can be either Cartesian3 coordinate or latitude and longitude coordinate

Function ComputeLngLat (_ ca_coord, local_coord) {

/ / also to establish a local coordinate system

Const _ localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame (_ ca_coord)

/ / calculate the new coordinate points according to the three directional distances of the offset

Const _ new_ca = Cesium.Matrix4.multiplyByPoint (_ localToWorld_Ma trix, Cesium.Cartesian3.fromElements (local_coord [1], local_coord [0], local_coord [2]), new Cesium.Cartesian3 ())

/ / return different coordinate types, free control

Return _ new_ca

Return Cesium.Cartographic.fromCartesian (_ new_ca)

}

Calculate the northward offset angle of the two points, according to the angle and the number of meters to be offset by the arrow, through the trigonometric functions sin and cos, calculate the offset distance in the x direction and y direction, call the function, you can calculate the new point position, connect the point into a line, and achieve the effect of a simple arrowhead. "how to achieve a simple arrow effect in Cesium" is introduced here, thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.