通过创建GeoLine给地图添加烟花图效果

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

ThingJS除了提供多种类型的模型外，还预置了多种粒子效果，包括：水、火、烟、雨、雪等，每种粒子效果按照不同的使用场景又有多种表现形式，可以满足在不同的天气条件下数字孪生可视化场景中的情况。那能不能在数字孪生可视化地图上添加效果呢？下面我就通过创建GeoLine（地理线）给数字孪生可视化地图添加烟花图效果。





几个关键点：

1. 烟花的火花颜色，大小，位置这三个变量。

2. 烟花飞出的方向：只向上。

3. 烟花的颜色：烟花也就是GeoLine（地理线）一共设置了三种颜色：黄、紫、蓝。

4. 线生长循环开启，烟花会在数字孪生可视化地图上循环出现。





代码如下：

1. var app = new THING.App();
   
2. // 设置app背景为黑色
   
3. app.background = [0, 0, 0];
   
4. 
   
5. var thingLayer = app.create({
   
6. type: "ThingLayer",
   
7. name: "thingLayer01"
   
8. });
   
9. 
   
10. // 引用地图组件脚本
    
11. THING.Utils.dynamicLoad(["https://www.thingjs.com/uearth/uearth.min.js"], function () {
    
12. app.create({
    
13. type: "Map",
    
14. url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFek5ETTRDaXR5QnVpbGRlckAyMDE5',
    
15. complete: function (event) {
    
16. var building = app.query(/建筑/)[0].data.features;
    
17. var points1 = app.query(/旅游/)[0].data.features;
    
18. var points2 = app.query(/医疗服务/)[0].data.features;
    
19. var points3 = app.query(/大型购物广场/)[0].data.features;
    
20. var newPoints2 = points2.filter((i, index) => index % 10 == 0);
    
21. 
    
22. createBuilding(building, 'building')
    
23. createMeshLine(points1, "#FF9933FF");
    
24. createMeshLine(newPoints2, "#FF00FFFF");
    
25. createMeshLine(points3, "#00CCFFFF");
    
26. }
    
27. });
    
28. });
    
29. 
    
30. /**
    
31. * 创建GeoBuilding
    
32. */
    
33. function createBuilding(building, name) {
    
34. building.map(item => {
    
35. var coordinates = item.geometry.coordinates;
    
36. var height = item.properties.height;
    
37. var building = app.create({
    
38. type: "GeoBuilding",
    
39. name: name,
    
40. coordinates, // 支持Polygon和MultiPolygon,格式可参考geoJson规范
    
41. height: height,
    
42. renderer: {
    
43. type: 'vector',
    
44. color: [61, 63, 70],// 面填充颜色
    
45. opacity: 1, // 填充不透明度
    
46. }
    
47. });
    
48. thingLayer.add(building);
    
49. })
    
50. }
    
51. 
    
52. /**
    
53. * 创建GeoLine
    
54. */
    
55. function createMeshLine(points, color) {
    
56. points.map(item => {
    
57. var height = Math.random() * 2000 + 3000;
    
58. var geoLine = app.create({
    
59. type: 'GeoLine',
    
60. name: color,
    
61. coordinates: [item.geometry.coordinates, item.geometry.coordinates],
    
62. heightArray: [0, height * 0.1],
    
63. // userData: { 'name': '花家地南街' },
    
64. renderer: {
    
65. type: 'vector', //GeoLine渲染类型 支持纯色(vector)和贴图(image)两种模式
    
66. lineType: 'Line', //可以是Line Plane Pipe Route
    
67. // imageUrl: 'https://www.thingjs.com/citybuilder_console/upload/lineIcons/3d/lightFlow_strip05.png',//线的贴图url, type是image时生效
    
68. // color: [255, 255, 255], //线的颜色, type是vector时生效
    
69. colorMapping: {
    
70. 0: "#00000000",
    
71. 0.7: "#33333300",
    
72. 0.8: "#333333FF",
    
73. 1: color,
    
74. },
    
75. // effect: true, //是否开启发光特效
    
76. // width: 10, //只在线类型为Plane,Pipe下生效,代表线的宽度
    
77. // numPass: 0.5, // 通道数,在贴图时贴图叠加的次数,次数越多颜色越亮,type是image时生效
    
78. speed: 0.4, //线贴图流动速度,默认是0,不流动 speed可以大于0也可以小于0，代表流动方向
    
79. // growSpeed: 0.4, //线生长速度,默认是0,不生长，lineType是Line,Plane时生效
    
80. // growLoop: true //线生长是否循环，默认是true，lineType是Line,Plane时生效
    
81. }
    
82. });
    
83. thingLayer.add(geoLine);
    
84. })
    
85. }

复制代码

最后就可以在数字孪生可视化地图上发射烟花了。本文分享了自己是如何实现在数字孪生可视化地图上产生烟花效果的，同时祝大家天天有精彩！

—————————————————

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：line OLI Lin GEO eol