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

最新推荐文章于 2025-06-04 10:28:50 发布

原创

最新推荐文章于 2025-06-04 10:28:50 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #html5 #jquery #css

本文介绍如何利用ThingJS库在数字孪生可视化地图上创建GeoLine实现烟花效果。通过调整火花颜色、大小和位置，设定烟花只向上飞出，设置三种颜色的烟花循环出现，实现了地图上的烟花动画效果。

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 (e