乐趣区

关于javascript:通过创建GeoLine给地图添加烟花图效果

jiezi

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

几个关键点：

  1. 烟花的火花色彩，大小，地位这三个变量。
  2. 烟花飞出的方向：只向上。
  3. 烟花的色彩：烟花也就是 GeoLine（天文线）一共设置了三种色彩：黄、紫、蓝。
  4. 线成长循环开启，烟花会在数字孪生可视化地图上循环呈现。

    代码如下：
var app = new THING.App();
// 设置 app 背景为彩色
app.background = [0, 0, 0];
 
var thingLayer = app.create({
 type: "ThingLayer",
 name: "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',
 complete: function (event) {var building = app.query(/ 修建 /)[0].data.features;
 var points1 = app.query(/ 游览 /)[0].data.features;
 var points2 = app.query(/ 医疗服务 /)[0].data.features;
 var points3 = app.query(/ 大型购物广场 /)[0].data.features;
 var newPoints2 = points2.filter((i, index) => index % 10 == 0);
 
 createBuilding(building, 'building')
 createMeshLine(points1, "#FF9933FF");
 createMeshLine(newPoints2, "#FF00FFFF");
 createMeshLine(points3, "#00CCFFFF");
 }
 });
});
 
/**
 * 创立 GeoBuilding
 */
function createBuilding(building, name) {
 building.map(item => {
 var coordinates = item.geometry.coordinates;
 var height = item.properties.height;
 var building = app.create({
 type: "GeoBuilding",
 name: name,
 coordinates, // 反对 Polygon 和 MultiPolygon, 格局可参考 geoJson 标准
 height: height,
 renderer: {
 type: 'vector',
 color: [61, 63, 70],// 面填充色彩
 opacity: 1, // 填充不透明度
 }
 });
 thingLayer.add(building);
 })
}
 
/**
 * 创立 GeoLine
 */
function createMeshLine(points, color) {
 points.map(item => {var height = Math.random() * 2000 + 3000;
 var geoLine = app.create({
 type: 'GeoLine',
 name: color,
 coordinates: [item.geometry.coordinates, item.geometry.coordinates],
 heightArray: [0, height * 0.1],
 // userData: {'name': '花家地南街'},
 renderer: {type: 'vector', //GeoLine 渲染类型 反对纯色 (vector) 和贴图 (image) 两种模式
 lineType: 'Line', // 能够是 Line Plane Pipe Route
 // imageUrl: 'https://www.thingjs.com/citybuilder_console/upload/lineIcons/3d/lightFlow_strip05.png',// 线的贴图 url, type 是 image 时失效
 // color: [255, 255, 255], // 线的色彩, type 是 vector 时失效
 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, 不流动 speed 能够大于 0 也能够小于 0，代表流动方向
 // growSpeed: 0.4, // 线成长速度, 默认是 0, 不成长，lineType 是 Line,Plane 时失效
 // growLoop: true // 线成长是否循环，默认是 true，lineType 是 Line,Plane 时失效
 }
 });
 thingLayer.add(geoLine);
 })
}

最初就能够在数字孪生可视化地图上发射烟花了。本文分享了本人是如何实现在数字孪生可视化地图上产生烟花成果的，同时祝大家天天有精彩！
—————————————————
数字孪生可视化：https://www.thingjs.com/

退出移动版