This is the seventh day of my participation in the August More text Challenge, the details of the activity are as follows: August more text Challenge we have seen flying line animation in big activities such as double 11 big screen, we are learning baidu map flying line animation today ~

usecommn.jsIn theinitMapMethod to initialize a map, which we have omitted here
3D curve generator BezierCurve

Instantiate the BezierCurve object; This is a built-in tool in MapVGL.

  1. Instantiate the Bezier curve
 var curve = new mapvgl.BezierCurve();
Copy the code
  1. Set the start and end points
 var startPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)]);
 var endPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)]);
 curve.setOptions({
    start: [startPoint.lng, startPoint.lat],
    end: [endPoint.lng, endPoint.lat]
  });
Copy the code
  1. Generate bezier curve coordinate set; usegetPoints()Method to obtain the generated Bezier curve coordinate set. And set it todataIn the array.
    • GetPoints gets the generated set of curve coordinates, passing in the field the number of segments of the curve, which defaults to 20

Now that we have the data, we are ready to load the layer on the map

FlyLineLayer

  1. To display the trajectory graph Layer, inherited from Layer, the graph Layer is created usingFlyLineLayerobject
var view = new mapvgl.View({map});
Copy the code
  1. Based on theThreejsThe mapVgl. threelayers package needs to be introduced before use
  • options
    • Style normal, default value: uniform animation speed; chaos, uneven animation speed
    • Color Bottom line color, same as CSS color
    • TextureColor fly line animation color, same as CSS color
    • TextureWidth Width of the fly line animation
    • TextureLength The length of the fly line animation, as a percentage of the entire line0-100.
    • Step The step size of flying animation. The larger the step size, the faster the animation speed
Var flyLine = new mapvgl.FlyLineLayer({style: 'chaos', step: 0.3, color: 'rgba(33, 242, 214, 0.3)', textureColor: Function (data) {return data.properties.count > 0.5? '#ff0000' : '#56ccdd'; }, textureWidth: 20, textureLength: 10 })Copy the code
    1. usemapvglIn theLineLayerLayers create the Line diagram layer. And add it to the Layer manager
 view.addLayer(flyLine)
Copy the code
  1. Bind the flyline object to the data source
 flyLine.setData(data)
Copy the code

Let’s have a look at the final effect of the picture ~ ask you how to do giFs ～～～～