当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-31 01:43:35 CSS

ThingJS不仅提供了多种类型的模型,还预设了多种粒子效果,包括:水、火、烟、雨、雪等,每种粒子效果根据不同的使用场景有多种表现形式,可以满足不同天气条件下数字孪生可视化场景中的情况。能给数字孪生可视化图加上效果吗?接下来,我将创建一个GeoLine(地理线)来为数字孪生视觉地图添加烟花效果。几个重点:烟花的火花颜色、大小、位置三个变量。烟花飞出的方向:只向上。烟花的颜色:烟花是GeoLine(地理线),共有黄色、紫色、蓝色三种颜色。线条生长周期开启,烟花会在数字孪生可视化图上循环出现。代码如下:varapp=newTHING.App();//设置app背景为黑色app.background=[0,0,0];varthingLayer=app.create({类型:“ThingLayer”,名称:“thingLayer01”});//引用地图组件脚本THING.Utils.dynamicLoad(["https://www.thingjs.com/uearth/uearth.min.js"],function(){app.create({type:"Map",url:'https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFek5ETTRDaXR5QnVpbGRlckAyMDE5',完成:函数(事件){varbuilding=app.query(/building/)[0].data.features;varpoints1=app.query(/travel/)[0].data.features;varpoints2=app.query(/medicalservices/)[0].data.features;varpoints3=app.query(/主要购物广场/)[0].data.features;varnewPoints2=points2.filter((i,index)=>index%10==0);createBuilding(building,'building')createMeshLine(points1,"#FF9933FF");createMeshLine(newPoints2,"#FF00FFFF");createMeshLine(points3,"#00CCFFFF");}});});/***创建GeoBuilding*/functioncreateBuilding(building,name){building.map(item=>{varcoordinates=item.geometry.coord天生的;varheight=item.properties.height;varbuilding=app.create({type:"GeoBuilding",name:name,coordinates,//支持Polygon和MultiPolygon,格式可以参考geoJson规范height:height,renderer:{type:'vector',color:[61,63,70],//面部填充颜色不透明度:1,//填充不透明度}});thingLayer.add(建筑物);})}/***创建GeoLine*/functioncreateMeshLine(points,color){points.map(item=>{varheight=Math.random()*2000+3000;vargeoLine=app.create({type:'GeoLine',name:color,coordinates:[item.geometry.coordinates,item.geometry.coordinates],heightArray:[0,height*0.1],//userData:{'name':'花家地南街'},renderer:{type:'vector',//GeoLine渲染类型支持纯色(矢量)和纹理(图像)两种模式lineType:'Line',//可以是LinePlanePipeRoute//imageUrl:'https://www.thingjs.com/citybuilder_console/upload/lineIcons/3d/lightFlow_strip05.png',//线图url,type为image时有效//color:[255,255,255],//线色,当type为image时有效类型是矢量colorMapping:{0:"#00000000",0.7:"#33333300",0.8:"#333333FF",1:color,},//effect:true,//是否启用特殊灯效//width:10,//仅当线型为Plane、Pipe时有效,代表线的宽度//numPass:0.5,//通道数,贴图时纹理叠加的次数,次数越多,颜色越亮,type为image时有效speed:0.4,//线贴图的流动速度,默认为0,非流动速度可大于0或小于0,表示流动方向//growSpeed:0.4,//线增长速度,默认为0,不增长,lineType为Line时有效,Plane//growLoop:true//线增长是循环的,默认为true,lineType为Line,Plane}});thingLayer.add(geoLine);})}最后就可以在数字孪生视觉地图上放烟花了精彩!——————————————————————数字孪生可视化:https://www.thingjs.com/