cesuim 台风轨迹效果

已于 2023-10-30 18:43:00 修改
阅读量327 收藏 3
点赞数 1
文章标签： javascript 前端 开发语言
于 2023-10-30 18:08:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63736937/article/details/134125045
版权

 1.实现逻辑

import { viewer, cesiumRef } from '/@/store/cesium';
import {taifengData} from "/@/components/Tool/components/ts/taifengData";
import taifengImg from '../img/taifeng.png'
import * as Cesium from 'cesium';
// 存储创建的实体  方便清除
let pineAll=[];
let pointAll=[];
let preUpdateHandler=null;
// 绘画台风轨迹及计算飞行时间
const typhoonFlytoPath= async (viewer, positions, typhoonName)=>{
    // 允许飞行动画
    viewer.clock.shouldAnimate = true;
    // 设定模拟时间的界限
    const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
    const stop = Cesium.JulianDate.addSeconds(start, positions.length, new Cesium.JulianDate());

    viewer.clock.startTime = start.clone();
    viewer.clock.stopTime = stop.clone();
    viewer.clock.currentTime = start.clone();
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //末尾循环
    // 飞行速度，值越大速度越快，multiplier为0停止移动
    viewer.clock.multiplier = 3;
    // viewer.timeline.zoomTo(start, stop);


    // 计算飞行时间和位置
    const property =  await computeFlight(start, positions)

    var rotation = Cesium.Math.toRadians(30);

    function getRotationValue() {
        rotation += -0.03;
        return rotation;
    }

    const typhoonEntity = viewer.entities.add({
        name : '台风路径',
        availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start : start,
            stop : stop
        })]),
        position : property,
        orientation : new Cesium.VelocityOrientationProperty(property), // 根据位置移动自动计算方向
        ellipse : {
            semiMinorAxis : 35000.0,
            semiMajorAxis : 35000.0,
            height: 0.0,
            fill: true,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 5,
            outline : false,
            rotation: new Cesium.CallbackProperty(getRotationValue, false),
            stRotation: new Cesium.CallbackProperty(getRotationValue, false),
            material: new Cesium.ImageMaterialProperty({
                image: taifengImg,
                transparent: true
            })
        },
        point : {
            pixelSize : 10,
            color : Cesium.Color.TRANSPARENT,
            outlineColor : Cesium.Color.YELLOW,
            outlineWidth : 4
        },
        label : {
            text: typhoonName,
            font : '18px sans-serif',
            pixelOffset : new Cesium.Cartesian2(0.0, 50)
        },
        path : {
            resolution : 1,
            material : new Cesium.PolylineGlowMaterialProperty({
                glowPower : 0.9,
                color : Cesium.Color.YELLOW
            }),
            width : 6
        }
    })
    pineAll.push(typhoonEntity);
    // 设置飞行视角
    viewer.trackedEntity = undefined;
    viewer.flyTo(typhoonEntity,{
        duration: 2,
        offset : {
            height: 900000,
            heading : Cesium.Math.toRadians(0.0),
            pitch : Cesium.Math.toRadians(-90),
            range : 2000000
        }
    })
    // 飞行视角追踪
     preUpdateHandler = function(){
        if(typhoonEntity){
            const center = typhoonEntity.position.getValue(viewer.clock.currentTime);
            const hpr = new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0.0), Cesium.Math.toRadians(-90), 2000000)
            if(center){
                viewer.camera.lookAt(center, hpr);
            }

        }
    }
    // 飞行跟踪
    viewer.scene.preUpdate.addEventListener(preUpdateHandler);

    // 设置插值函数为拉格朗日算法
    typhoonEntity.position.setInterpolationOptions({
        interpolationDegree : 3,
        interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
    });
}
// 计算飞行时间和位置
const computeFlight=async (start, positions)=>{
    const property = new Cesium.SampledPositionProperty();
    for(let i=0; i<positions.length; i++){
        const time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
        const position = Cesium.Cartesian3.fromDegrees(parseFloat(positions[i].fLongitude), parseFloat(positions[i].fLatitude), Cesium.Math.nextRandomNumber() * 500 + 1750);
        property.addSample(time, position);
    }
    return property;
}
// 初始化台风效果
export const initTaiFeng=async (Cesium)=> {
    viewer._cesiumWidget._creditContainer.style.display = "none"; // 去除水印
    viewer.scene.globe.enableLighting = false; // 关闭日照
    viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形探测(地形之下的不可见)
    viewer.scene.globe.showGroundAtmosphere = false; // 关闭大气层
        // 台风数据
        var data=taifengData;
        var typhoonName = "台风";
        var result = [];
        if (data.length > 0) {
            for(let p= data.length -1; p >= 0; p--){
                const d = {
                    'FID' : data[p]["日期"] + " " + data[p]["时间"],
                    'serial': p+1,
                    'fLongitude': data[p].y,
                    'fLatitude': data[p].x
                }
                result.push(d);

                if (p % 10 == 0){
                    var color = null;
                    var fs = data[p]["风速（m/s）"];
                    if (fs >= 15 && fs < 20){
                        color = new Cesium.Color(0, 0, 205/255);
                    }else if (fs >= 20 && fs < 25){
                        color = new Cesium.Color(1, 1, 0);
                    }else if (fs >= 25 && fs < 30){
                        color = new Cesium.Color(1, 165/255, 0);
                    }else if (fs >= 30 && fs < 35){
                        color = new Cesium.Color(1, 140/255, 0);
                    }else if (fs >= 35){
                        color = new Cesium.Color(1, 0, 0);
                    }
                    let entity=viewer.entities.add(new Cesium.Entity({
                        point: new Cesium.PointGraphics({
                            color: color,
                            pixelSize: 20,
                            outlineColor: new Cesium.Color(0, 1, 1)
                        }),
                        label : {
                            text: "风速" + fs + "m/s \n" + data[p]["日期"] + " " + data[p]["时间"].split(":")[0] + "时",
                            font : '18px sans-serif',
                            pixelOffset : new Cesium.Cartesian2(0, 50)
                        },
                        position: Cesium.Cartesian3.fromDegrees(data[p].y, data[p].x, 5000)
                    }));
                    pointAll.push(entity);
                }




            }
            await typhoonFlytoPath(viewer, result, typhoonName)
        }
}
// 清除台风效果
export const clearTaiFeng=()=>{
    if(pineAll.length>0){
        pineAll.forEach((item)=>{
            viewer.entities.remove(item)
        })

    }
    if(pointAll.length>0){
        pointAll.forEach((item)=>{
            viewer.entities.remove(item)
        })
    }
    pineAll.length=0;
    pointAll.length=0;
    // 清除台风飞行飞行跟踪
    if(preUpdateHandler){
        viewer.scene.preUpdate.removeEventListener(preUpdateHandler);
    }

}

2.引入的台风数据 

export const taifengData=[
    {"日期":"2021-7-30","时间":"17:00:00","纬度":"38.4N","经度":"119E", "气压（hPa）":988,"风速（m/s）":15,"x":38.4,"y":119},
    {"日期":"2021-7-30","时间":"14:00::00","纬度":"38.4N","经度":"118.7E","气压（hPa）":988,"风速（m/s）":15,"x":38.4,"y":118.7},
    {"日期":"2021-7-30","时间":"11:00:00","纬度":"38.8N","经度":"118.2E","气压（hPa）":988,"风速（m/s）":15,"x":38.8,"y":118.2},
    {"日期":"2021-7-30","时间":"08:00:00","纬度":"38.8N","经度":"118.2E","气压（hPa）":988,"风速（m/s）":15,"x":38.8,"y":118.2},
    {"日期":"2021-7-30","时间":"05:00:00","纬度":"38.6N","经度":"117.8E","气压（hPa）":988,"风速（m/s）":15,"x":38.6,"y":117.8},
    {"日期":"2021-7-30","时间":"02:00:00","纬度":"38.5N","经度":"117.6E","气压（hPa）":988,"风速（m/s）":15,"x":38.5,"y":117.6},
    {"日期":"2021-7-29","时间":"23:00:00","纬度":"37.8N","经度":"117.5E","气压（hPa）":988,"风速（m/s）":15,"x":37.8,"y":117.5},
    {"日期":"2021-7-29","时间":"20:00:00","纬度":"37.1N","经度":"117.4E","气压（hPa）":988,"风速（m/s）":15,"x":37.1,"y":117.4},
    {"日期":"2021-7-29","时间":"17:00:00","纬度":"36.3N","经度":"117.2E","气压（hPa）":988,"风速（m/s）":15,"x":36.3,"y":117.2},
    {"日期":"2021-7-29","时间":"14:00::00","纬度":"35.8N","经度":"117.1E","气压（hPa）":988,"风速（m/s）":15,"x":35.8,"y":117.1},
    {"日期":"2021-7-29","时间":"11:00:00","纬度":"35.3N","经度":"116.9E","气压（hPa）":988,"风速（m/s）":15,"x":35.3,"y":116.9},
    {"日期":"2021-7-29","时间":"08:00:00","纬度":"34.9N","经度":"116.7E","气压（hPa）":988,"风速（m/s）":15,"x":34.9,"y":116.7},
    {"日期":"2021-7-29","时间":"05:00:00","纬度":"34.5N","经度":"116.8E","气压（hPa）":988,"风速（m/s）":15,"x":34.5,"y":116.8},
    {"日期":"2021-7-29","时间":"02:00:00","纬度":"34N","经度":"116.8E","气压（hPa）":985,"风速（m/s）":15,"x":34,"y":116.8},
    {"日期":"2021-7-28","时间":"23:00:00","纬度":"33.3N","经度":"116.9E","气压（hPa）":985,"风速（m/s）":15,"x":33.3,"y":116.9},
    {"日期":"2021-7-28","时间":"20:00:00","纬度":"32.8N","经度":"116.9E","气压（hPa）":985,"风速（m/s）":15,"x":32.8,"y":116.9},
    {"日期":"2021-7-28","时间":"17:00:00","纬度":"32.8N","经度":"116.6E","气压（hPa）":985,"风速（m/s）":15,"x":32.8,"y":116.6},
    {"日期":"2021-7-28","时间":"14:00::00","纬度":"33.1N","经度":"116.7E","气压（hPa）":985,"风速（m/s）":15,"x":33.1,"y":116.7},
    {"日期":"2021-7-28","时间":"11:00:00","纬度":"33.1N","经度":"117.1E","气压（hPa）":985,"风速（m/s）":15,"x":33.1,"y":117.1},
    {"日期":"2021-7-28","时间":"08:00:00","纬度":"32.7N","经度":"117.6E","气压（hPa）":985,"风速（m/s）":15,"x":32.7,"y":117.6},
    {"日期":"2021-7-28","时间":"05:00:00","纬度":"32.4N","经度":"117.9E","气压（hPa）":985,"风速（m/s）":15,"x":32.4,"y":117.9},
    {"日期":"2021-7-28","时间":"03:00:00","纬度":"32.4N","经度":"118.1E","气压（hPa）":985,"风速（m/s）":15,"x":32.4,"y":118.1},
    {"日期":"2021-7-28","时间":"02:00:00","纬度":"32.3N","经度":"118.2E","气压（hPa）":985,"风速（m/s）":18,"x":32.3,"y":118.2},
    {"日期":"2021-7-28","时间":"01:00:00","纬度":"32.2N","经度":"118.4E","气压（hPa）":985,"风速（m/s）":18,"x":32.2,"y":118.4},
    {"日期":"2021-7-28","时间":"00:00:00","纬度":"32N","经度":"118.6E","气压（hPa）":985,"风速（m/s）":18,"x":32,"y":118.6},
    {"日期":"2021-7-27","时间":"23:00:00","纬度":"31.9N","经度":"118.7E","气压（hPa）":985,"风速（m/s）":18,"x":31.9,"y":118.7},
    {"日期":"2021-7-27","时间":"22:00:00","纬度":"31.8N","经度":"118.9E","气压（hPa）":985,"风速（m/s）":18,"x":31.8,"y":118.9},
    {"日期":"2021-7-27","时间":"21:00:00","纬度":"31.6N","经度":"119E","气压（hPa）":985,"风速（m/s）":18,"x":31.6,"y":119},
    {"日期":"2021-7-27","时间":"20:00:00","纬度":"31.5N","经度":"119E","气压（hPa）":985,"风速（m/s）":18,"x":31.5,"y":119},
    {"日期":"2021-7-27","时间":"19:00:00","纬度":"31.4N","经度":"119.1E","气压（hPa）":985,"风速（m/s）":18,"x":31.4,"y":119.1},
    {"日期":"2021-7-27","时间":"18:00:00","纬度":"31.3N","经度":"119E","气压（hPa）":985,"风速（m/s）":18,"x":31.3,"y":119},
    {"日期":"2021-7-27","时间":"17:00:00","纬度":"31.3N","经度":"119E","气压（hPa）":985,"风速（m/s）":18,"x":31.3,"y":119},
    {"日期":"2021-7-27","时间":"16:00:00","纬度":"31.3N","经度":"119E","气压（hPa）":985,"风速（m/s）":18,"x":31.3,"y":119},
    {"日期":"2021-7-27","时间":"15:00:00","纬度":"31.3N","经度":"119E","气压（hPa）":985,"风速（m/s）":18,"x":31.3,"y":119},
    {"日期":"2021-7-27","时间":"14:00::00","纬度":"31.3N","经度":"119E","气压（hPa）":985,"风速（m/s）":18,"x":31.3,"y":119},
    {"日期":"2021-7-27","时间":"13:00:00","纬度":"31.3N","经度":"119E","气压（hPa）":985,"风速（m/s）":18,"x":31.3,"y":119},
    {"日期":"2021-7-27","时间":"12:00:00","纬度":"31.3N","经度":"119E","气压（hPa）":982,"风速（m/s）":20,"x":31.3,"y":119},
    {"日期":"2021-7-27","时间":"11:00:00","纬度":"31.3N","经度":"119.1E","气压（hPa）":982,"风速（m/s）":20,"x":31.3,"y":119.1},
    {"日期":"2021-7-27","时间":"10:00:00","纬度":"31.3N","经度":"119.2E","气压（hPa）":982,"风速（m/s）":20,"x":31.3,"y":119.2},
    {"日期":"2021-7-27","时间":"09:00:00","纬度":"31.3N","经度":"119.3E","气压（hPa）":982,"风速（m/s）":20,"x":31.3,"y":119.3},
    {"日期":"2021-7-27","时间":"08:00:00","纬度":"31.3N","经度":"119.4E","气压（hPa）":982,"风速（m/s）":20,"x":31.3,"y":119.4},
    {"日期":"2021-7-27","时间":"07:00:00","纬度":"31.3N","经度":"119.5E","气压（hPa）":985,"风速（m/s）":20,"x":31.3,"y":119.5},
    {"日期":"2021-7-27","时间":"06:00:00","纬度":"31.3N","经度":"119.6E","气压（hPa）":985,"风速（m/s）":20,"x":31.3,"y":119.6},
    {"日期":"2021-7-27","时间":"05:00:00","纬度":"31.3N","经度":"119.7E","气压（hPa）":985,"风速（m/s）":20,"x":31.3,"y":119.7},
    {"日期":"2021-7-27","时间":"04:00:00","纬度":"31.3N","经度":"119.8E","气压（hPa）":985,"风速（m/s）":20,"x":31.3,"y":119.8},
    {"日期":"2021-7-27","时间":"03:00:00","纬度":"31.2N","经度":"119.9E","气压（hPa）":985,"风速（m/s）":20,"x":31.2,"y":119.9},
    {"日期":"2021-7-27","时间":"02:00:00","纬度":"31.2N","经度":"120E","气压（hPa）":985,"风速（m/s）":20,"x":31.2,"y":120},
    {"日期":"2021-7-27","时间":"01:00:00","纬度":"31.2N","经度":"120E","气压（hPa）":985,"风速（m/s）":20,"x":31.2,"y":120},
    {"日期":"2021-7-27","时间":"00:00:00","纬度":"31.2N","经度":"120E","气压（hPa）":985,"风速（m/s）":20,"x":31.2,"y":120},
    {"日期":"2021-7-26","时间":"23:00:00","纬度":"31.1N","经度":"120.1E","气压（hPa）":985,"风速（m/s）":20,"x":31.1,"y":120.1},
    {"日期":"2021-7-26","时间":"22:00:00","纬度":"31.1N","经度":"120.2E","气压（hPa）":980,"风速（m/s）":23,"x":31.1,"y":120.2},
    {"日期":"2021-7-26","时间":"21:00:00","纬度":"31N","经度":"120.3E","气压（hPa）":980,"风速（m/s）":23,"x":31,"y":120.3},
    {"日期":"2021-7-26","时间":"20:00:00","纬度":"31N","经度":"120.4E","气压（hPa）":980,"风速（m/s）":23,"x":31,"y":120.4},
    {"日期":"2021-7-26","时间":"19:00:00","纬度":"31N","经度":"120.5E","气压（hPa）":980,"风速（m/s）":23,"x":31,"y":120.5},
    {"日期":"2021-7-26","时间":"18:00:00","纬度":"31N","经度":"120.6E","气压（hPa）":980,"风速（m/s）":23,"x":31,"y":120.6},
    {"日期":"2021-7-26","时间":"17:00:00","纬度":"31N","经度":"120.7E","气压（hPa）":980,"风速（m/s）":23,"x":31,"y":120.7},
    {"日期":"2021-7-26","时间":"16:00:00","纬度":"30.9N","经度":"120.8E","气压（hPa）":980,"风速（m/s）":25,"x":30.9,"y":120.8},
    {"日期":"2021-7-26","时间":"15:00:00","纬度":"30.9N","经度":"120.8E","气压（hPa）":980,"风速（m/s）":25,"x":30.9,"y":120.8},
    {"日期":"2021-7-26","时间":"14:00::00","纬度":"30.8N","经度":"120.9E","气压（hPa）":980,"风速（m/s）":25,"x":30.8,"y":120.9},
    {"日期":"2021-7-26","时间":"13:00:00","纬度":"30.8N","经度":"120.9E","气压（hPa）":978,"风速（m/s）":28,"x":30.8,"y":120.9},
    {"日期":"2021-7-26","时间":"12:00:00","纬度":"30.8N","经度":"121E","气压（hPa）":978,"风速（m/s）":28,"x":30.8,"y":121},
    {"日期":"2021-7-26","时间":"11:00:00","纬度":"30.7N","经度":"121E","气压（hPa）":978,"风速（m/s）":28,"x":30.7,"y":121},
    {"日期":"2021-7-26","时间":"10:00:00","纬度":"30.7N","经度":"121.1E","气压（hPa）":978,"风速（m/s）":28,"x":30.7,"y":121.1},
    {"日期":"2021-7-26","时间":"09:00:00","纬度":"30.6N","经度":"121.2E","气压（hPa）":978,"风速（m/s）":28,"x":30.6,"y":121.2},
    {"日期":"2021-7-26","时间":"09:00:00","纬度":"30.6N","经度":"121.2E","气压（hPa）":975,"风速（m/s）":30,"x":30.6,"y":121.2},
    {"日期":"2021-7-26","时间":"08:00:00","纬度":"30.5N","经度":"121.3E","气压（hPa）":970,"风速（m/s）":33,"x":30.5,"y":121.3},
    {"日期":"2021-7-26","时间":"07:00:00","纬度":"30.5N","经度":"121.3E","气压（hPa）":975,"风速（m/s）":33,"x":30.5,"y":121.3},
    {"日期":"2021-7-26","时间":"06:00:00","纬度":"30.5N","经度":"121.4E","气压（hPa）":975,"风速（m/s）":33,"x":30.5,"y":121.4},
    {"日期":"2021-7-26","时间":"05:00:00","纬度":"30.5N","经度":"121.4E","气压（hPa）":975,"风速（m/s）":33,"x":30.5,"y":121.4},
    {"日期":"2021-7-26","时间":"04:00:00","纬度":"30.5N","经度":"121.4E","气压（hPa）":970,"风速（m/s）":35,"x":30.5,"y":121.4},
    {"日期":"2021-7-26","时间":"03:00:00","纬度":"30.5N","经度":"121.4E","气压（hPa）":970,"风速（m/s）":35,"x":30.5,"y":121.4},
    {"日期":"2021-7-26","时间":"02:00:00","纬度":"30.4N","经度":"121.5E","气压（hPa）":970,"风速（m/s）":35,"x":30.4,"y":121.5},
    {"日期":"2021-7-26","时间":"01:00:00","纬度":"30.4N","经度":"121.5E","气压（hPa）":970,"风速（m/s）":35,"x":30.4,"y":121.5},
    {"日期":"2021-7-26","时间":"00:00:00","纬度":"30.4N","经度":"121.6E","气压（hPa）":970,"风速（m/s）":35,"x":30.4,"y":121.6},
    {"日期":"2021-7-25","时间":"23:00:00","纬度":"30.3N","经度":"121.7E","气压（hPa）":970,"风速（m/s）":35,"x":30.3,"y":121.7},
    {"日期":"2021-7-25","时间":"22:00:00","纬度":"30.2N","经度":"121.8E","气压（hPa）":970,"风速（m/s）":35,"x":30.2,"y":121.8},
    {"日期":"2021-7-25","时间":"21:00:00","纬度":"30.2N","经度":"121.8E","气压（hPa）":970,"风速（m/s）":35,"x":30.2,"y":121.8},
    {"日期":"2021-7-25","时间":"20:00:00","纬度":"30.2N","经度":"121.9E","气压（hPa）":970,"风速（m/s）":35,"x":30.2,"y":121.9},
    {"日期":"2021-7-25","时间":"19:00:00","纬度":"30.2N","经度":"121.9E","气压（hPa）":965,"风速（m/s）":38,"x":30.2,"y":121.9},
    {"日期":"2021-7-25","时间":"18:00:00","纬度":"30.2N","经度":"122E","气压（hPa）":965,"风速（m/s）":38,"x":30.2,"y":122},
    {"日期":"2021-7-25","时间":"17:00:00","纬度":"30N","经度":"122.2E","气压（hPa）":965,"风速（m/s）":38,"x":30,"y":122.2},
    {"日期":"2021-7-25","时间":"16:00:00","纬度":"30N","经度":"122.2E","气压（hPa）":965,"风速（m/s）":38,"x":30,"y":122.2},
    {"日期":"2021-7-25","时间":"15:00:00","纬度":"30N","经度":"122.2E","气压（hPa）":965,"风速（m/s）":38,"x":30,"y":122.2},
    {"日期":"2021-7-25","时间":"14:00::00","纬度":"30N","经度":"122.2E","气压（hPa）":965,"风速（m/s）":38,"x":30,"y":122.2},
    {"日期":"2021-7-25","时间":"13:00:00","纬度":"30N","经度":"122.3E","气压（hPa）":965,"风速（m/s）":38,"x":30,"y":122.3},
    {"日期":"2021-7-25","时间":"12:00:00","纬度":"30N","经度":"122.5E","气压（hPa）":965,"风速（m/s）":38,"x":30,"y":122.5},
    {"日期":"2021-7-25","时间":"12:00:00","纬度":"30N","经度":"122.5E","气压（hPa）":965,"风速（m/s）":38,"x":30,"y":122.5},
    {"日期":"2021-7-25","时间":"11:00:00","纬度":"29.9N","经度":"122.7E","气压（hPa）":965,"风速（m/s）":38,"x":29.9,"y":122.7},
    {"日期":"2021-7-25","时间":"10:00:00","纬度":"29.8N","经度":"122.9E","气压（hPa）":965,"风速（m/s）":38,"x":29.8,"y":122.9},
    {"日期":"2021-7-25","时间":"09:00:00","纬度":"29.7N","经度":"123E","气压（hPa）":965,"风速（m/s）":38,"x":29.7,"y":123},
    {"日期":"2021-7-25","时间":"08:00:00","纬度":"29.6N","经度":"123.1E","气压（hPa）":965,"风速（m/s）":38,"x":29.6,"y":123.1},
    {"日期":"2021-7-25","时间":"07:00:00","纬度":"29.5N","经度":"123.2E","气压（hPa）":965,"风速（m/s）":38,"x":29.5,"y":123.2},
    {"日期":"2021-7-25","时间":"06:00:00","纬度":"29.4N","经度":"123.3E","气压（hPa）":965,"风速（m/s）":38,"x":29.4,"y":123.3},
    {"日期":"2021-7-25","时间":"05:00:00","纬度":"29.3N","经度":"123.4E","气压（hPa）":965,"风速（m/s）":38,"x":29.3,"y":123.4},
    {"日期":"2021-7-25","时间":"04:00:00","纬度":"29N","经度":"123.5E","气压（hPa）":960,"风速（m/s）":40,"x":29,"y":123.5},
    {"日期":"2021-7-25","时间":"03:00:00","纬度":"28.7N","经度":"123.6E","气压（hPa）":960,"风速（m/s）":40,"x":28.7,"y":123.6},
    {"日期":"2021-7-25","时间":"02:00:00","纬度":"28.5N","经度":"123.6E","气压（hPa）":960,"风速（m/s）":40,"x":28.5,"y":123.6},
    {"日期":"2021-7-25","时间":"01:00:00","纬度":"28.4N","经度":"123.7E","气压（hPa）":960,"风速（m/s）":40,"x":28.4,"y":123.7},
    {"日期":"2021-7-25","时间":"00:00:00","纬度":"28.3N","经度":"123.8E","气压（hPa）":960,"风速（m/s）":40,"x":28.3,"y":123.8},
    {"日期":"2021-7-24","时间":"23:00:00","纬度":"28.2N","经度":"123.8E","气压（hPa）":960,"风速（m/s）":40,"x":28.2,"y":123.8},
    {"日期":"2021-7-24","时间":"22:00:00","纬度":"28.1N","经度":"123.9E","气压（hPa）":960,"风速（m/s）":40,"x":28.1,"y":123.9},
    {"日期":"2021-7-24","时间":"21:00:00","纬度":"28N","经度":"124E","气压（hPa）":960,"风速（m/s）":40,"x":28,"y":124},
    {"日期":"2021-7-24","时间":"20:00:00","纬度":"27.9N","经度":"124.1E","气压（hPa）":960,"风速（m/s）":40,"x":27.9,"y":124.1},
    {"日期":"2021-7-24","时间":"18:00:00","纬度":"27.7N","经度":"124.2E","气压（hPa）":960,"风速（m/s）":40,"x":27.7,"y":124.2},
    {"日期":"2021-7-24","时间":"17:00:00","纬度":"27.5N","经度":"124.2E","气压（hPa）":960,"风速（m/s）":40,"x":27.5,"y":124.2},
    {"日期":"2021-7-24","时间":"16:00:00","纬度":"27.4N","经度":"124.2E","气压（hPa）":960,"风速（m/s）":40,"x":27.4,"y":124.2},
    {"日期":"2021-7-24","时间":"15:00:00","纬度":"27.3N","经度":"124.2E","气压（hPa）":960,"风速（m/s）":40,"x":27.3,"y":124.2},
    {"日期":"2021-7-24","时间":"14:00::00","纬度":"27.2N","经度":"124.3E","气压（hPa）":960,"风速（m/s）":40,"x":27.2,"y":124.3},
    {"日期":"2021-7-24","时间":"13:00:00","纬度":"27.1N","经度":"124.3E","气压（hPa）":960,"风速（m/s）":40,"x":27.1,"y":124.3},
    {"日期":"2021-7-24","时间":"12:00:00","纬度":"26.9N","经度":"124.4E","气压（hPa）":960,"风速（m/s）":40,"x":26.9,"y":124.4},
    {"日期":"2021-7-24","时间":"11:00:00","纬度":"26.7N","经度":"124.5E","气压（hPa）":960,"风速（m/s）":40,"x":26.7,"y":124.5},
    {"日期":"2021-7-24","时间":"10:00:00","纬度":"26.5N","经度":"124.6E","气压（hPa）":960,"风速（m/s）":40,"x":26.5,"y":124.6},
    {"日期":"2021-7-24","时间":"09:00:00","纬度":"26.3N","经度":"124.6E","气压（hPa）":960,"风速（m/s）":40,"x":26.3,"y":124.6},
    {"日期":"2021-7-24","时间":"08:00:00","纬度":"26.1N","经度":"124.6E","气压（hPa）":960,"风速（m/s）":40,"x":26.1,"y":124.6},
    {"日期":"2021-7-24","时间":"07:00:00","纬度":"26N","经度":"124.6E","气压（hPa）":960,"风速（m/s）":40,"x":26,"y":124.6},
    {"日期":"2021-7-24","时间":"06:00:00","纬度":"25.9N","经度":"124.6E","气压（hPa）":960,"风速（m/s）":40,"x":25.9,"y":124.6},
    {"日期":"2021-7-24","时间":"05:00:00","纬度":"25.8N","经度":"124.6E","气压（hPa）":960,"风速（m/s）":40,"x":25.8,"y":124.6},
    {"日期":"2021-7-24","时间":"04:00:00","纬度":"25.6N","经度":"124.7E","气压（hPa）":960,"风速（m/s）":40,"x":25.6,"y":124.7},
    {"日期":"2021-7-24","时间":"03:00:00","纬度":"25.5N","经度":"124.8E","气压（hPa）":960,"风速（m/s）":40,"x":25.5,"y":124.8},
    {"日期":"2021-7-24","时间":"02:00:00","纬度":"25.4N","经度":"124.8E","气压（hPa）":960,"风速（m/s）":40,"x":25.4,"y":124.8},
    {"日期":"2021-7-24","时间":"01:00:00","纬度":"25.3N","经度":"124.9E","气压（hPa）":960,"风速（m/s）":40,"x":25.3,"y":124.9},
    {"日期":"2021-7-24","时间":"00:00:00","纬度":"25.1N","经度":"124.9E","气压（hPa）":960,"风速（m/s）":40,"x":25.1,"y":124.9},
    {"日期":"2021-7-23","时间":"23:00:00","纬度":"25N","经度":"124.9E","气压（hPa）":960,"风速（m/s）":40,"x":25,"y":124.9},
    {"日期":"2021-7-23","时间":"20:00:00","纬度":"24.8N","经度":"124.9E","气压（hPa）":955,"风速（m/s）":42,"x":24.8,"y":124.9},
    {"日期":"2021-7-23","时间":"18:00:00","纬度":"24.7N","经度":"125E","气压（hPa）":955,"风速（m/s）":42,"x":24.7,"y":125},
    {"日期":"2021-7-23","时间":"17:00:00","纬度":"24.7N","经度":"125E","气压（hPa）":955,"风速（m/s）":42,"x":24.7,"y":125},
    {"日期":"2021-7-23","时间":"16:00:00","纬度":"24.7N","经度":"125E","气压（hPa）":955,"风速（m/s）":42,"x":24.7,"y":125},
    {"日期":"2021-7-23","时间":"15:00:00","纬度":"24.6N","经度":"125.1E","气压（hPa）":955,"风速（m/s）":42,"x":24.6,"y":125.1},
    {"日期":"2021-7-23","时间":"14:00::00","纬度":"24.6N","经度":"125.1E","气压（hPa）":955,"风速（m/s）":42,"x":24.6,"y":125.1},
    {"日期":"2021-7-23","时间":"13:00:00","纬度":"24.6N","经度":"125.1E","气压（hPa）":955,"风速（m/s）":42,"x":24.6,"y":125.1},
    {"日期":"2021-7-23","时间":"12:00:00","纬度":"24.6N","经度":"125.2E","气压（hPa）":955,"风速（m/s）":42,"x":24.6,"y":125.2},
    {"日期":"2021-7-23","时间":"11:00:00","纬度":"24.5N","经度":"125.3E","气压（hPa）":955,"风速（m/s）":42,"x":24.5,"y":125.3},
    {"日期":"2021-7-23","时间":"10:00:00","纬度":"24.4N","经度":"125.3E","气压（hPa）":955,"风速（m/s）":42,"x":24.4,"y":125.3},
    {"日期":"2021-7-23","时间":"09:00:00","纬度":"24.3N","经度":"125.4E","气压（hPa）":955,"风速（m/s）":42,"x":24.3,"y":125.4},
    {"日期":"2021-7-23","时间":"08:00:00","纬度":"24.1N","经度":"125.5E","气压（hPa）":955,"风速（m/s）":42,"x":24.1,"y":125.5},
    {"日期":"2021-7-23","时间":"07:00:00","纬度":"24N","经度":"125.5E","气压（hPa）":955,"风速（m/s）":42,"x":24,"y":125.5},
    {"日期":"2021-7-23","时间":"06:00:00","纬度":"23.9N","经度":"125.5E","气压（hPa）":955,"风速（m/s）":42,"x":23.9,"y":125.5},
    {"日期":"2021-7-23","时间":"05:00:00","纬度":"23.7N","经度":"125.5E","气压（hPa）":955,"风速（m/s）":42,"x":23.7,"y":125.5},
    {"日期":"2021-7-23","时间":"04:00:00","纬度":"23.6N","经度":"125.5E","气压（hPa）":955,"风速（m/s）":42,"x":23.6,"y":125.5},
    {"日期":"2021-7-23","时间":"03:00:00","纬度":"23.6N","经度":"125.5E","气压（hPa）":955,"风速（m/s）":42,"x":23.6,"y":125.5},
    {"日期":"2021-7-23","时间":"02:00:00","纬度":"23.6N","经度":"125.5E","气压（hPa）":955,"风速（m/s）":42,"x":23.6,"y":125.5},
    {"日期":"2021-7-23","时间":"01:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-23","时间":"00:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"23:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"22:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"21:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"20:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"19:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"18:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"17:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"16:00:00","纬度":"23.5N","经度":"125.6E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.6},
    {"日期":"2021-7-22","时间":"15:00:00","纬度":"23.5N","经度":"125.7E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.7},
    {"日期":"2021-7-22","时间":"14:00::00","纬度":"23.5N","经度":"125.7E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.7},
    {"日期":"2021-7-22","时间":"13:00:00","纬度":"23.5N","经度":"125.8E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.8},
    {"日期":"2021-7-22","时间":"12:00:00","纬度":"23.5N","经度":"125.8E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.8},
    {"日期":"2021-7-22","时间":"11:00:00","纬度":"23.5N","经度":"125.8E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.8},
    {"日期":"2021-7-22","时间":"10:00:00","纬度":"23.5N","经度":"125.8E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.8},
    {"日期":"2021-7-22","时间":"09:00:00","纬度":"23.5N","经度":"125.8E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.8},
    {"日期":"2021-7-22","时间":"08:00:00","纬度":"23.5N","经度":"125.8E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.8},
    {"日期":"2021-7-22","时间":"07:00:00","纬度":"23.5N","经度":"125.8E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.8},
    {"日期":"2021-7-22","时间":"06:00:00","纬度":"23.5N","经度":"125.9E","气压（hPa）":955,"风速（m/s）":42,"x":23.5,"y":125.9},
    {"日期":"2021-7-22","时间":"05:00:00","纬度":"23.6N","经度":"126E","气压（hPa）":955,"风速（m/s）":42,"x":23.6,"y":126},
    {"日期":"2021-7-22","时间":"04:00:00","纬度":"23.6N","经度":"126E","气压（hPa）":955,"风速（m/s）":42,"x":23.6,"y":126},
    {"日期":"2021-7-22","时间":"03:00:00","纬度":"23.6N","经度":"126.1E","气压（hPa）":955,"风速（m/s）":42,"x":23.6,"y":126.1},
    {"日期":"2021-7-22","时间":"02:00:00","纬度":"23.7N","经度":"126.2E","气压（hPa）":955,"风速（m/s）":42,"x":23.7,"y":126.2},
    {"日期":"2021-7-22","时间":"01:00:00","纬度":"23.7N","经度":"126.2E","气压（hPa）":955,"风速（m/s）":42,"x":23.7,"y":126.2},
    {"日期":"2021-7-22","时间":"00:00:00","纬度":"23.8N","经度":"126.3E","气压（hPa）":955,"风速（m/s）":42,"x":23.8,"y":126.3},
    {"日期":"2021-7-21","时间":"23:00:00","纬度":"23.8N","经度":"126.3E","气压（hPa）":955,"风速（m/s）":42,"x":23.8,"y":126.3},
    {"日期":"2021-7-21","时间":"22:00:00","纬度":"23.9N","经度":"126.4E","气压（hPa）":955,"风速（m/s）":42,"x":23.9,"y":126.4},
    {"日期":"2021-7-21","时间":"21:00:00","纬度":"24N","经度":"126.5E","气压（hPa）":955,"风速（m/s）":42,"x":24,"y":126.5},
    {"日期":"2021-7-21","时间":"20:00:00","纬度":"24.1N","经度":"126.6E","气压（hPa）":955,"风速（m/s）":42,"x":24.1,"y":126.6},
    {"日期":"2021-7-21","时间":"19:00:00","纬度":"24.1N","经度":"126.8E","气压（hPa）":955,"风速（m/s）":42,"x":24.1,"y":126.8},
    {"日期":"2021-7-21","时间":"18:00:00","纬度":"24.1N","经度":"126.8E","气压（hPa）":955,"风速（m/s）":42,"x":24.1,"y":126.8},
    {"日期":"2021-7-21","时间":"17:00:00","纬度":"24.2N","经度":"126.9E","气压（hPa）":955,"风速（m/s）":42,"x":24.2,"y":126.9},
    {"日期":"2021-7-21","时间":"14:00::00","纬度":"24.3N","经度":"127.2E","气压（hPa）":955,"风速（m/s）":42,"x":24.3,"y":127.2},
    {"日期":"2021-7-21","时间":"11:00:00","纬度":"24.2N","经度":"127.8E","气压（hPa）":955,"风速（m/s）":42,"x":24.2,"y":127.8},
    {"日期":"2021-7-21","时间":"08:00:00","纬度":"24.1N","经度":"127.9E","气压（hPa）":965,"风速（m/s）":38,"x":24.1,"y":127.9},
    {"日期":"2021-7-21","时间":"05:00:00","纬度":"24.1N","经度":"128E","气压（hPa）":970,"风速（m/s）":35,"x":24.1,"y":128},
    {"日期":"2021-7-21","时间":"02:00:00","纬度":"24.1N","经度":"128.2E","气压（hPa）":970,"风速（m/s）":35,"x":24.1,"y":128.2},
    {"日期":"2021-7-20","时间":"23:00:00","纬度":"24.3N","经度":"128.6E","气压（hPa）":970,"风速（m/s）":35,"x":24.3,"y":128.6},
    {"日期":"2021-7-20","时间":"20:00:00","纬度":"24.4N","经度":"129E","气压（hPa）":975,"风速（m/s）":33,"x":24.4,"y":129},
    {"日期":"2021-7-20","时间":"17:00:00","纬度":"24.7N","经度":"129.4E","气压（hPa）":975,"风速（m/s）":33,"x":24.7,"y":129.4},
    {"日期":"2021-7-20","时间":"14:00::00","纬度":"24.7N","经度":"129.8E","气压（hPa）":975,"风速（m/s）":33,"x":24.7,"y":129.8},
    {"日期":"2021-7-20","时间":"11:00:00","纬度":"24.6N","经度":"130.5E","气压（hPa）":980,"风速（m/s）":30,"x":24.6,"y":130.5},
    {"日期":"2021-7-20","时间":"08:00:00","纬度":"24.2N","经度":"130.8E","气压（hPa）":980,"风速（m/s）":30,"x":24.2,"y":130.8},
    {"日期":"2021-7-20","时间":"05:00:00","纬度":"24.2N","经度":"130.8E","气压（hPa）":980,"风速（m/s）":30,"x":24.2,"y":130.8},
    {"日期":"2021-7-20","时间":"02:00:00","纬度":"24N","经度":"131.1E","气压（hPa）":980,"风速（m/s）":30,"x":24,"y":131.1},
    {"日期":"2021-7-19","时间":"23:00:00","纬度":"24N","经度":"131.1E","气压（hPa）":980,"风速（m/s）":30,"x":24,"y":131.1},
    {"日期":"2021-7-19","时间":"20:00:00","纬度":"24N","经度":"131.1E","气压（hPa）":980,"风速（m/s）":30,"x":24,"y":131.1},
    {"日期":"2021-7-19","时间":"17:00:00","纬度":"24N","经度":"131.1E","气压（hPa）":982,"风速（m/s）":28,"x":24,"y":131.1},
    {"日期":"2021-7-19","时间":"14:00::00","纬度":"24N","经度":"131.1E","气压（hPa）":982,"风速（m/s）":28,"x":24,"y":131.1},
    {"日期":"2021-7-19","时间":"11:00:00","纬度":"24N","经度":"131.1E","气压（hPa）":985,"风速（m/s）":25,"x":24,"y":131.1},
    {"日期":"2021-7-19","时间":"08:00:00","纬度":"23.9N","经度":"131.3E","气压（hPa）":985,"风速（m/s）":25,"x":23.9,"y":131.3},
    {"日期":"2021-7-19","时间":"05:00:00","纬度":"23.8N","经度":"131.5E","气压（hPa）":990,"风速（m/s）":23,"x":23.8,"y":131.5},
    {"日期":"2021-7-19","时间":"02:00:00","纬度":"23.5N","经度":"131.9E","气压（hPa）":990,"风速（m/s）":23,"x":23.5,"y":131.9},
    {"日期":"2021-7-18","时间":"20:00:00","纬度":"23.3N","经度":"132.2E","气压（hPa）":995,"风速（m/s）":20,"x":23.3,"y":132.2},
    {"日期":"2021-7-18","时间":"17:00:00","纬度":"23N","经度":"132.3E","气压（hPa）":995,"风速（m/s）":20,"x":23,"y":132.3},
    {"日期":"2021-7-18","时间":"14:00::00","纬度":"22.7N","经度":"132.3E","气压（hPa）":995,"风速（m/s）":20,"x":22.7,"y":132.3},
    {"日期":"2021-7-18","时间":"08:00:00","纬度":"22.5N","经度":"132.4E","气压（hPa）":998,"风速（m/s）":18,"x":22.5,"y":132.4},
    {"日期":"2021-7-18","时间":"05:00:00","纬度":"22.4N","经度":"132.5E","气压（hPa）":998,"风速（m/s）":18,"x":22.4,"y":132.5},
    {"日期":"2021-7-18","时间":"02:00:00","纬度":"22.2N","经度":"132.5E","气压（hPa）":998,"风速（m/s）":18,"x":22.2,"y":132.5}

]

3.台风图片:

4.效果可以查看:台风效果视频-CSDN直播 

程序员小凉
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
DEJA_VU3D - Cesium功能集 之 089-台风范围几何绘制
总得学点什么的博客
12-20 955
本篇我们先来简单绘制一个表示台风范围的几何图形，包括完整源代码
cesium天气效果（云）
God's asylum的博客
02-09 2837
cesium云层效果，用es6一封装好，直接复制调用即可
Cesium Wind：实时风场可视化神器
gitblog_00059的博客
04-23 793
Cesium Wind：实时风场可视化神器 项目地址:https://gitcode.com/QJvic/cesium-wind Cesium Wind 是一个基于 CesiumJS 的开源项目，用于在3D地球上实时展示全球风场数据。它结合了先进的WebGL技术和气象科学，将抽象的数据转化为直观、动态的视觉效果，为研究者、教育工作者和气象爱好者提供了强大的工具。 技术分析 CesiumJS: ...
mars-3d 台风来喽（台风的制作）
Hjiehahah的博客
04-08 774
这是一个台风图标的形成方法，使用后会如上图，那肯定有小伙伴问为啥要用这么复杂的方式去实现呢，不可以用一张图片吗，我想说的是这样的台风我们能掌控他的一切数据，例如大小矢量等等 computeCirclularFlight(lon, lat, radius, fx, angle) { //传入 经纬度 半径 从多少度开始 绘制多少度结束 let Ea = 6378137; // 赤道半径 let Eb = 6356725; // 极半径 let positio..
利用cesium模拟台风移动路径——以利奇马台风为例
一见终秦的博客
10-28 4631
根据cesium官网示例（https://sandcastle.cesium.com/?src=Interpolation.html）改造为台风移动轨迹，台风数据从台风路径实时发布系统获取。模拟台风移动路径从台风发生地开始，动态移动至台风消亡地，之后从起点又开始循环移动。采用实体ellipse模拟台风的旋转，给椭圆背景material贴图，使用CallbackProperty设置rotation和...
【GIS小案例】台风烟花的轨迹动图
心生的小鱼专栏
10-28 1787
效果如图所示： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial
使用Python绘制台风轨迹图的示例代码
12-16
2.Basemap生成的图中绘制轨迹 使用CMA热带气旋最佳路径数据集，对我国周边的台风进行绘制 import re import os import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.basemap import Basemap ...
Skyline二次开发台风移动效果开发Demo源码
05-09
Skyline二次开发台风移动效果开发Demo源码是一个用于模拟台风移动轨迹的项目，它基于Skyline平台进行定制和扩展。这个项目使用JavaScript编程语言，通过交互式的网页展示台风的动态移动过程，为气象研究、防灾减灾...
绘制台风风圈（2021）
09-15
5. **可能的扩展**：此程序可能还包含对不同风速等级的风圈绘制，或者动态显示台风路径的特性，以增强可视化效果。 在实际应用中，这样的程序可以帮助气象学家快速生成台风风圈图，便于进行天气预报和应急响应规划...
从沙盒开始学习Cesium（持续更新）
qq_36802917的博客
10-27 5518
1、设置Cesium3DTileStyle：通过3dTileset一些属性，编写条件使3dTileset变色 沙盒：https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Styling.html 一些属性写法需要参考3D Tiles Styling language文档 扩展知识：vector向量 向量类型 vecn 包含n个float分量的默认向量； bvecn 包含n个bool分量的向量； ivecn 包含n个int分量的.
cesuim 实时动态绘制线和动态立体墙，以及线的立体高度
半盏清茶，一杯浊酒
03-17 1376
1、实现样式 2、实现方法（只贴部分代码） let dayMaximumHeight; let PolyLinePrimitive = function () { //创建线方法 function _(points, bol) { if (viewModel.lineValue !== 'Wall') { this.options = {
Cesium深入浅出之可视域分析
热门推荐
Helsing的专栏
09-05 1万+
引子 万众瞩目的可视域分析功能终于来了！上一篇做这个预告的时候，压根还没开始碰这块东西，稍微有一点小担心，万一弄不出来不就打脸了么。不过好在功夫不负有心人，赶紧把热乎的饭给您盛上。 预期效果 细心的小盆友一定发现了，怎么你的效果跟别人的不一样啊。嗯，这是因为我没开深度检测的缘故，开了之后地面都绿洼洼的，我嫌弃它难看！ 实现原理 ShadowMap 顾名思义，ShadowMap就是阴影贴图。看Cesium的API，有一句话“Do not construct this directly”，看来官
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 422
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 342
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
weixin_44565776的博客
07-18 141
只要掌握了这些react技能，基本就可以熟练使用react了
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 973
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
HOW - SVG 图标组件封装（Lucide React）
最新发布
weixin_58540586的博客
07-18 796
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue openlayers实现台风轨迹
08-23
Vue是一种流行的JavaScript框架，用于构建用户界面。OpenLayers是一个开源的JavaScript库，用于在web浏览器中显示交互式地图。结合Vue和OpenLayers，我们可以实现台风轨迹的可视化。 首先，我们需要获取台风的相关数据。可以从台风数据的API或其他数据源中获取实时或历史台风数据。数据通常包含台风的经纬度坐标和其他相关信息，如风力、风速等。 在Vue组件中，我们可以使用OpenLayers来显示地图。首先，在Vue组件中引入OpenLayers库，并在Vue的生命周期钩子中初始化地图。可以使用OpenLayers的地图视图类（MapView）来设置地图的中心坐标和缩放级别。 接下来，我们需要将台风的轨迹数据添加到地图上。可以使用OpenLayers的矢量图层（Vector Layer）来添加台风轨迹。将每个台风点的经纬度坐标转换为OpenLayers的几何对象，并将其添加到矢量图层中。 为了使台风轨迹更具交互性，可以在每个台风点上添加弹出窗口，显示该点的详细信息。可以使用OpenLayers的弹出窗口类（Overlay）和交互类（Interaction）来实现这一功能。 最后，根据需求，可以添加其他地图元素，如底图切换、比例尺、图例等，以增强用户体验。 总之，使用Vue和OpenLayers，我们可以方便地将台风轨迹可视化，并提供交互功能。这种方式可以帮助用户更直观地了解台风的路径和特征，从而提高对台风的认知和应对能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值