Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.
Another common application, fly-line animation, is to show the flow of data
Lbsyun.baidu.com/solutions/m…
1. Draw a single flying line
Drawing the here can use baidu curve generator: lbsyun.baidu.com/solutions/m…
<body> <div id="map_container"></div> <script> const map = initBMap(); const data = initData(); setData(data, map); Function initBMap() {// mapv provides an API, According to the names for the coordinate const cityCenter = mapv. UtilCityCenter. GetCenterByCityName (' Shanghai '); const map = initMap({ center: [cityCenter.lng, cityCenter.lat], zoom: 6, style: purpleStyle, tilt: 30 }) return map; Function initData() {let data = []; Const curve = new mapvgl.bezierCurve (); const curve = new mapvgl.beziercurve (); / / 2. Set the start and end coordinates const. Start = mapv utilCityCenter. GetCenterByCityName (' Shanghai '); Const end = mapv. UtilCityCenter. GetCenterByCityName (" Beijing "); curve.setOptions({ start:[start.lng, start.lat], end:[end.lng, end.lat] }); Const curveData = curve.getPoints(); data.push({ geometry:{ type: 'LineString', coordinates: curveData } }) return data; Function setData(data, map) {const view = new mapvgl. view ({map}); // Initialize the flyLine object and add it to the layer const flyLine = new mapvgl.FlyLineLayer({color: 'red', textureColor: 'Blue ', textureWidth: 20, textureLength: 80, style: 'chaos', step: 0.5}); view.addLayer(flyLine); flyLine.setData(data); } </script> </body>Copy the code
Function setData(data, map) {const view = new mapvgl. view ({map}); // initialize the flyLine object and add it to the layer const flyLine = new mapvgl.FlyLineLayer({color: 'rgba(33,242,214,0.3)', textureColor: '#ff0000', textureWidth: 20, textureLength: 10, style: 'chaos', step: 0.3}); view.addLayer(flyLine); flyLine.setData(data); }Copy the code
2. Add more lines
Function initData() {let data = []; Const cities = [' Beijing ', 'tianjin', 'Shanghai', chongqing, shijiazhuang, taiyuan, Hohhot, Harbin, changchun, ' ', shenyang, jinan, nanjing, hefei, hangzhou, nanchang, fuzhou, 'zhengzhou', 'wuhan, changsha, guangzhou, nanning, xi 'an, yinchuan, lanzhou, xining, urumqi, chengdu, guiyang, kunming, Lhasa,' haikou ']; let randomCount = 100; Const curve = new mapvgl.bezierCurve (); const curve = new mapvgl.beziercurve (); While (randomCount--) {// 2 mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]); const end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]); curve.setOptions({ start: [start.lng, start.lat], end: [end.lng, end.lat] }); Const curveData = curve.getPoints(); data.push({ geometry: { type: 'LineString', coordinates: curveData } }) } return data; }Copy the code
3. Mapv example porting mapVGL – point convergence diagram
Here in fact mapV (mapVGL predecessor) has a lot of good fly map cases can refer to, but the official has not maintained, but we can still go to learn, such as here: mapv.baidu.com/examples/#b…
Note that the script path needs to be changed to an absolute path. The default path is a relative path:
The above example is the old version of MAPV, actually not recommended to learn, will not explain the code in detail.
Mapv is rendered based on Canvas, which will lag when moving the perspective. Mapvgl is implemented based on WebGL, which will not have the above problems
But we can transplant it to mapVGL as a whole. This map has a lot of content. It is actually composed of moving points and static lines
Implement static line Layer
It mainly involves the transplantation of a convergence algorithm, we first realize a multipoint line in Beijing, and then look at the ever realize static line layer, this can be done based on LineLayer: lbsyun.baidu.com/solutions/m…
<body> <div id="map_container"></div> <script> const map = initBMap(); const data = initData(); setData(data, map); Function initBMap() {// mapv provides an API, According to the names for the coordinate const cityCenter = mapv. UtilCityCenter. GetCenterByCityName (" Beijing "); const map = initMap({ center: [cityCenter.lng, cityCenter.lat], zoom: 5, style: purpleStyle, tilt: 0 }) return map; Function initData() {let data = []; Const cities = [' Beijing ', 'Tianjin ',' Shanghai ']; let randomCount = 100; Const targetCity = mapv. UtilCityCenter. GetCenterByCityName (" Beijing "); const curve = new mapvgl.BezierCurve(); for (let i = 1; i < cities.length; i++) { const startCity = mapv.utilCityCenter.getCenterByCityName(cities[i]); curve.setOptions({ start: [startCity.lng, startCity.lat], end: [targetCity.lng, targetCity.lat] }) const curveData = curve.getPoints(); data.push({ geometry: { type: 'LineString', coordinates: curveData } }); } return data; Function setData(data, map) {const view = new mapvgl. view ({map}); Const linelayer = new mapvgl. linelayer ({color: 'rgba(55,50,250,0.3)'}); view.addLayer(lineLayer); lineLayer.setData(data); } </script> </body>Copy the codeImplement moving point layer
Note here mobile point layer of trajectory is consistent, and the static line is behind the data is the same, this website to find a layer, but we find a path in the sample demo figure, by a lot of moving point: mapv.baidu.com/gl/examples…
It is actually implemented based on LinePointLayer, but there is no information about this Layer in the official document, we can only refer to the demo to implement:
Function setData(data, map) {const view = new mapvgl. view ({map}); Const linelayer = new mapvgl. linelayer ({color: 'rgba(55,50,250,0.3)'}); Const linePointLayer = new mapvgl. linePointLayer ({size: 8, // size: 12, // size: 12, // size: 12, // size: 12, // size: 12, // size: 12, // size: 12, // size: 'rgba (255, 255, 0, 0.6)', animationType: mapvgl. LinePointLayer. ANIMATION_TYPE_SMOOTH, / / point shapeType animation type: Mapvgl. LinePointLayer. SHAPE_TYPE_CIRCLE, / / point shape blend: 'lighter' / / SEC when treatment}); view.addLayer(lineLayer); view.addLayer(linePointLayer) lineLayer.setData(data); linePointLayer.setData(data); }Copy the codeImplement more points
Here, some random point convergence targets are generated based on random numbers:
Function initData() {let data = []; Const cities = [' Beijing ', 'tianjin', 'Shanghai', chongqing, shijiazhuang, taiyuan, Hohhot, Harbin, changchun, ' ', shenyang, jinan, nanjing, hefei, hangzhou, nanchang, fuzhou, 'zhengzhou', 'wuhan, changsha, guangzhou, nanning, xi 'an, yinchuan, lanzhou, xining, urumqi, chengdu, guiyang, kunming, Lhasa,' haikou ']; let randomCount = 500; Const targetCity = mapv. UtilCityCenter. GetCenterByCityName (" Beijing "); const curve = new mapvgl.BezierCurve(); for (let i = 0; i < randomCount; i++) { const startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]); curve.setOptions({ start: [startCity.lng - 5 + 10 * Math.random(), startCity.lat - 5 + 10 * Math.random()], end: [targetCity.lng, targetCity.lat] }) const curveData = curve.getPoints(); data.push({ geometry: { type: 'LineString', coordinates: curveData } }); } return data; }Copy the codeEdge binding algorithm implementation
This algorithm can help reduce the degree of chaos in the graph, as an edge convergence function, for example, a position line is particularly close, it can help you converge together to reach the destination blog.csdn.net/gdp12315_gu… :
We currently do not implement edge binding, the effect is not as good as the above example, let’s take a look at mapV tool methods to do edge binding
Function initData() {let data = []; Const cities = [' Beijing ', 'tianjin', 'Shanghai', chongqing, shijiazhuang, taiyuan, Hohhot, Harbin, changchun, ' ', shenyang, jinan, nanjing, hefei, hangzhou, nanchang, fuzhou, 'zhengzhou', 'wuhan, changsha, guangzhou, nanning, xi 'an, yinchuan, lanzhou, xining, urumqi, chengdu, guiyang, kunming, Lhasa,' haikou ']; Const targetCity = mapv. UtilCityCenter. GetCenterByCityName (" Beijing "); let nodeData = [{ x: targetCity.lng, y: targetCity.lat }]; // let edgeData = [{source: 0, // 0 represents the 0 element of nodeData target: 0 // 0-0 line}]; // We need to generate node and edge data let randomCount = 500; const curve = new mapvgl.BezierCurve(); for (let i = 0; i < randomCount; i++) { const startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]); nodeData.push({ x: startCity.lng + 5 - Math.random() * 10, y: startCity.lat + 5 - Math.random() * 10 }); Edgedata. push({source: I + 1, // source is the node target of the new push above: 0})} / / edge binding API to acquiring data based on baidu const bundling. = mapv utilForceEdgeBundling (). The nodes (nodeData) edges (edgeData); const results = bundling(); For (let I = 0; i < results.length; i++) { const line = results[i]; const coordinates = []; for (let j = 0; j < line.length; j++) { coordinates.push([line[j].x, line[j].y]) } data.push({ geometry: { type: 'LineString', coordinates } }); } return data; Function setData(data, map) {const view = new mapvgl. view ({map}); Const linelayer = new mapvgl. linelayer ({color: 'rgba(55,50,250,0.5)'}); Const linePointLayer = new mapvgl. linePointLayer ({size: 5, // size: 12, // size: 12, // size: 12, // size: 12, // size: 12, // size: 12, // size: 'rgba (255, 255, 0, 0.6)', animationType: mapvgl. LinePointLayer. ANIMATION_TYPE_SMOOTH, / / point shapeType animation type: Mapvgl. LinePointLayer. SHAPE_TYPE_CIRCLE, / / point shape blend: 'lighter' / / SEC when treatment}); view.addLayer(lineLayer); view.addLayer(linePointLayer) lineLayer.setData(data); linePointLayer.setData(data); }Copy the codePlus the convergence effect
Const linelayer = new mapvgl. linelayer ({color: 'rgba(55,50,250,0.5)', blend: 'lighter'});Copy the codeEdge binding algorithm is often used in practical applications