cesuim 台风轨迹移动(升级版)

程序员小凉

已于 2023-11-01 11:26:15 修改

阅读量480

点赞数 5

文章标签： javascript 前端 typescript

于 2023-10-31 18:42:30 首次发布

本文链接：https://blog.csdn.net/qq_63736937/article/details/134146039

版权

1.支持台风移动到对应点显示点信息

2.支持显示48警戒线和24警戒线

3.支持走完一圈自由操作

代码实现

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';
import jingjiexian24 from './24小时警戒线.json';
import jingjiexian48 from './48小警戒线.json';
// 绘制线的方法
const lineAllEntity = [];
const drawLine = (params, type, labelName, colorStr) => {
  const windPowerArea = [...params.features];
  let arr = [];
  windPowerArea.forEach((item, i) => {
    let coordinatesArr = [...item.geometry.coordinates];
    coordinatesArr.push(0);
    arr = arr.concat(coordinatesArr);
  });
  let line = null;
  if (!type) {
    line = viewer.entities.add({
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(arr),
        arcType: Cesium.ArcType.NONE,
        width: 2,
        material: new Cesium.PolylineOutlineMaterialProperty({
          color: colorStr
            ? Cesium.Color.fromCssColorString(colorStr)
            : Cesium.Color.fromCssColorString('#F8FA00'),
        }),
        depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
          color: colorStr
            ? Cesium.Color.fromCssColorString(colorStr)
            : Cesium.Color.fromCssColorString('#F8FA00'),
        }),
      },
    });
    lineAllEntity.push(line);
  } else {
    line = viewer.entities.add({
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(arr),
        arcType: Cesium.ArcType.NONE,
        width: 2,
        material: new Cesium.PolylineDashMaterialProperty({
          color: colorStr
            ? Cesium.Color.fromCssColorString(colorStr)
            : Cesium.Color.fromCssColorString('#F8FA00'),
          dashLength: 30, //短划线长度
          dashWidth: 6,
        }),
        depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
          color: colorStr
            ? Cesium.Color.fromCssColorString(colorStr)
            : Cesium.Color.fromCssColorString('#F8FA00'),
        }),
      },
    });
    lineAllEntity.push(line);
  }


};
// 删除线
const removeLine = async () => {
  // debugger;
  if (lineAllEntity && lineAllEntity.length > 0) {
    lineAllEntity.forEach((item) => {
      viewer.entities.remove(item);
    });
  }
  lineAllEntity.length=0;
};
// 添加label
let labelEntitleAll = [];
const addLabelMehods = (labelName, pointData, height) => {
  const labelEntities = viewer.entities.add({
    name: labelName,
    position: Cesium.Cartesian3.fromDegrees(pointData[0], pointData[1], height),
    label: {
      //文字标签
      text: labelName,
      font: '12pt Source Han Sans CN',
      // 字体颜色
      fillColor: new Cesium.Color(0.1, 0.8, 0.95, 1),
      // 背景颜色
      backgroundColor: Cesium.Color.gray,
      // 是否显示背景颜色
      showBackground: true,
      // label样式
      style: Cesium.LabelStyle.FILL,
      outlineWidth: 2,
      // 垂直位置
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
      // 水平位置
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      // 偏移
      pixelOffset: new Cesium.Cartesian2(30, 0),
    },
  });
  labelEntitleAll.push(labelEntities);
};
// 删除label
const removeLabelMehods = () => {
  if (labelEntitleAll && labelEntitleAll.length > 0) {
    labelEntitleAll.forEach((item) => {
      viewer.entities.remove(item);
    });
  }
  labelEntitleAll = [];
};
// 存储创建的实体  方便清除
const pineAll = [];
const pointAll = [];
let preUpdateHandler = null;
const selectAll = [];
// 绘画台风轨迹及计算飞行时间
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 = 5;
  // viewer.timeline.zoomTo(start, stop);

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

  let 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: 105000.0,
      semiMajorAxis: 105000.0,
      height: 100.0,
      fill: true,
      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.TRANSPARENT,
      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,
    },
  });
  const oldItem = [];
  let num = 0;
  // 飞行视角追踪
  preUpdateHandler = function (event) {
    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) {
        // 单个坐标
        const cartographic = Cesium.Cartographic.fromCartesian(center);
        const lat = Cesium.Math.toDegrees(cartographic.latitude);
        const lng = Cesium.Math.toDegrees(cartographic.longitude);
        const alt = cartographic.height;
        selectAll.forEach((item) => {
          if (Number(item.x) == lat.toFixed(1) && Number(item.y) == lng.toFixed(1)) {
            if (oldItem.length > 0) {
              if (
                (oldItem[0] != Number(item.x) && oldItem[1] == Number(item.y)) ||
                (oldItem[0] == Number(item.x) && oldItem[1] != Number(item.y)) ||
                (oldItem[0] != Number(item.x) && oldItem[1] != Number(item.y))
              ) {
                oldItem[0] = Number(item.x);
                oldItem[1] = Number(item.y);
              // 判断是否是最后一个点
              if((selectAll[selectAll.length-1].x==oldItem[0])&&(selectAll[selectAll.length-1].y==oldItem[1])){
                // 清除台风飞行飞行跟踪
                if (preUpdateHandler) {
                  viewer.scene.preUpdate.removeEventListener(preUpdateHandler);
                }
                // 需要延迟0.5秒取消锁定视角,确保已经清除跟踪视角
               setTimeout(()=>{
                 // 取消视角锁定
                 viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
                 viewer.trackedEntity = undefined;
               },500)
              }
                // console.log('进来啦1111', item);
                num++;
                if (num < pointAll.length) {
                  pointAll[num].label.text =
                    '风速' +
                    item['风速'] +
                    'm/s \n' +
                    item['日期'] +
                    ' ' +
                    item['时间'];
                }
              }
            } else {
              oldItem[0] = Number(item.x);
              oldItem[1] = Number(item.y);
              // console.log('进来啦222', item);
              if (num < pointAll.length) {
                pointAll[num].label.text =
                  '风速' + item['风速'] + '\n ' + item['日期'] +' ' + item['时间'];
              }
            }
            // console.log("点啊",item);

            // pointAll[0].label.text='8888888';
            // 思路 :
            // 1.根据给点加个自定义坐标 坐标内容为 它的经纬度
            // 2.获取它的自定义坐标 来跟现在的item.x 和 item.y比较 如果一样就显示对应的内容
          }
        });
        // console.log("经纬度",lat,lng,alt)
        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 () => {
  drawLine(jingjiexian24, false, '24小时警戒线');
  drawLine(jingjiexian48, true, '48小时警戒线');
  addLabelMehods('24小时警戒线', [118.859085804271217, 18.184787653347598, 0]);
  addLabelMehods('48小时警戒线', [131.945923047920701, 15.047864893994642, 0]);
  // viewer._cesiumWidget._creditContainer.style.display = 'none'; // 去除水印
  // viewer.scene.globe.enableLighting = false; // 关闭日照
  // viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形探测(地形之下的不可见)
  // viewer.scene.globe.showGroundAtmosphere = false; // 关闭大气层
  // 台风数据
  const data = [...taifengData].reverse();
  const typhoonName = '台风';
  const 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: Number(data[p].y),
        fLatitude: Number(data[p].x),
      };
      result.push(d);

      if (p % 10 == 0) {
        selectAll.push(data[p]);
        let color = null;
        const fs = data[p]['风速'].split('m')[0];
        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);
        }
        const entity = viewer.entities.add(
          new Cesium.Entity({
            id: data[p]['x'] + '-' + data[p]['y'] + '-' + p,
            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] + "时",
              text: '',
              font: '12px sans-serif',
              pixelOffset: new Cesium.Cartesian2(0, 50),
            },
            position: Cesium.Cartesian3.fromDegrees(Number(data[p].y), Number(data[p].x), 5000),
          }),
        );
        // console.log("entity",entity);
        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) {
    // 取消视角绑定
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    viewer.trackedEntity = undefined;
    pointAll.forEach((item) => {
      viewer.entities.remove(item);
    });
  }
  pineAll.length = 0;
  pointAll.length = 0;
  // 清除警戒线
  removeLine();
  //删除label名称
  removeLabelMehods();
  // 清除台风飞行飞行跟踪
  if (preUpdateHandler) {
    viewer.scene.preUpdate.removeEventListener(preUpdateHandler);
  }
};

2. taifengData数据

export const taifengData = [
    {
        "日期": "2023-9-30",
        "时间": "05:00:00",
        "风速": "18m/s",
        "移动方向": "北西",
        "强度": "热带风暴",
        "纬度": "15.6N",
        "经度": "132.1E",
        "中心气压(百帕)": "1000",
        "移动速度(km/h)": "10",
        "x": "15.6",
        "y": "132.1"
    },
    {
        "日期": "2023-9-30",
        "时间": "08:00:00",
        "风速": "18m/s",
        "移动方向": "北西",
        "强度": "热带风暴",
        "纬度": "15.3N",
        "经度": "131.7E",
        "中心气压(百帕)": "1000",
        "移动速度(km/h)": "11",
        "x": "15.3",
        "y": "131.7"
    },
    {
        "日期": "2023-9-30",
        "时间": "11:00:00",
        "风速": "18m/s",
        "移动方向": "北北西",
        "强度": "热带风暴",
        "纬度": "15.3N",
        "经度": "131.4E",
        "中心气压(百帕)": "1000",
        "移动速度(km/h)": "13",
        "x": "15.3",
        "y": "131.4"
    },
    {
        "日期": "2023-9-30",
        "时间": "14:00:00",
        "风速": "18m/s",
        "移动方向": "北北西",
        "强度": "热带风暴",
        "纬度": "15.7N",
        "经度": "131.2E",
        "中心气压(百帕)": "1000",
        "移动速度(km/h)": "14",
        "x": "15.7",
        "y": "131.2"
    },
    {
        "日期": "2023-9-30",
        "时间": "17:00:00",
        "风速": "18m/s",
        "移动方向": "北北西",
        "强度": "热带风暴",
        "纬度": "16.0N",
        "经度": "130.7E",
        "中心气压(百帕)": "1000",
        "移动速度(km/h)": "13",
        "x": "16.0",
        "y": "130.7"
    },
    {
        "日期": "2023-9-30",
        "时间": "20:00:00",
        "风速": "18m/s",
        "移动方向": "北北西",
        "强度": "热带风暴",
        "纬度": "16.3N",
        "经度": "130.5E",
        "中心气压(百帕)": "1000",
        "移动速度(km/h)": "13",
        "x": "16.3",
        "y": "130.5"
    },
    {
        "日期": "2023-9-30",
        "时间": "23:00:00",
        "风速": "20m/s",
        "移动方向": "北北西",
        "强度": "热带风暴",
        "纬度": "16.5N",
        "经度": "130.4E",
        "中心气压(百帕)": "995",
        "移动速度(km/h)": "13",
        "x": "16.5",
        "y": "130.4"
    },
    {
        "日期": "2023-10-1",
        "时间": "02:00:00",
        "风速": "20m/s",
        "移动方向": "北北西",
        "强度": "热带风暴",
        "纬度": "16.8N",
        "经度": "130.3E",
        "中心气压(百帕)": "995",
        "移动速度(km/h)": "13",
        "x": "16.8",
        "y": "130.3"
    },
    {
        "日期": "2023-10-1",
        "时间": "05:00:00",
        "风速": "20m/s",
        "移动方向": "北北西",
        "强度": "热带风暴",
        "纬度": "17.1N",
        "经度": "130.1E",
        "中心气压(百帕)": "995",
        "移动速度(km/h)": "14",
        "x": "17.1",
        "y": "130.1"
    },
    {
        "日期": "2023-10-1",
        "时间": "08:00:00",
        "风速": "20m/s",
        "移动方向": "北北西",
        "强度": "热带风暴",
        "纬度": "17.2N",
        "经度": "129.5E",
        "中心气压(百帕)": "995",
        "移动速度(km/h)": "14",
        "x": "17.2",
        "y": "129.5"
    },
    {
        "日期": "2023-10-1",
        "时间": "11:00:00",
        "风速": "25m/s",
        "移动方向": "北北西",
        "强度": "强热带风暴",
        "纬度": "17.4N",
        "经度": "129.2E",
        "中心气压(百帕)": "985",
        "移动速度(km/h)": "12",
        "x": "17.4",
        "y": "129.2"
    },
    {
        "日期": "2023-10-1",
        "时间": "14:00:00",
        "风速": "25m/s",
        "移动方向": "北西",
        "强度": "强热带风暴",
        "纬度": "17.9N",
        "经度": "128.9E",
        "中心气压(百帕)": "985",
        "移动速度(km/h)": "10",
        "x": "17.9",
        "y": "128.9"
    },
    {
        "日期": "2023-10-1",
        "时间": "17:00:00",
        "风速": "28m/s",
        "移动方向": "北西",
        "强度": "强热带风暴",
        "纬度": "18.3N",
        "经度": "128.7E",
        "中心气压(百帕)": "982",
        "移动速度(km/h)": "12",
        "x": "18.3",
        "y": "128.7"
    },
    {
        "日期": "2023-10-1",
        "时间": "20:00:00",
        "风速": "33m/s",
        "移动方向": "北西",
        "强度": "台风",
        "纬度": "18.3N",
        "经度": "128.5E",
        "中心气压(百帕)": "975",
        "移动速度(km/h)": "13",
        "x": "18.3",
        "y": "128.5"
    },
    {
        "日期": "2023-10-1",
        "时间": "23:00:00",
        "风速": "33m/s",
        "移动方向": "北西",
        "强度": "台风",
        "纬度": "18.5N",
        "经度": "128.3E",
        "中心气压(百帕)": "975",
        "移动速度(km/h)": "12",
        "x": "18.5",
        "y": "128.3"
    },
    {
        "日期": "2023-10-2",
        "时间": "02:00:00",
        "风速": "33m/s",
        "移动方向": "北西",
        "强度": "台风",
        "纬度": "18.7N",
        "经度": "128.1E",
        "中心气压(百帕)": "975",
        "移动速度(km/h)": "14",
        "x": "18.7",
        "y": "128.1"
    },
    {
        "日期": "2023-10-2",
        "时间": "05:00:00",
        "风速": "38m/s",
        "移动方向": "北西",
        "强度": "台风",
        "纬度": "19.0N",
        "经度": "127.8E",
        "中心气压(百帕)": "965",
        "移动速度(km/h)": "12",
        "x": "19.0",
        "y": "127.8"
    },
    {
        "日期": "2023-10-2",
        "时间": "08:00:00",
        "风速": "42m/s",
        "移动方向": "西北西",
        "强度": "强台风",
        "纬度": "19.2N",
        "经度": "127.3E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "11",
        "x": "19.2",
        "y": "127.3"
    },
    {
        "日期": "2023-10-2",
        "时间": "11:00:00",
        "风速": "42m/s",
        "移动方向": "西北西",
        "强度": "强台风",
        "纬度": "19.3N",
        "经度": "127.2E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "11",
        "x": "19.3",
        "y": "127.2"
    },
    {
        "日期": "2023-10-2",
        "时间": "14:00:00",
        "风速": "45m/s",
        "移动方向": "北西",
        "强度": "强台风",
        "纬度": "19.5N",
        "经度": "126.6E",
        "中心气压(百帕)": "950",
        "移动速度(km/h)": "11",
        "x": "19.5",
        "y": "126.6"
    },
    {
        "日期": "2023-10-2",
        "时间": "17:00:00",
        "风速": "48m/s",
        "移动方向": "北西",
        "强度": "强台风",
        "纬度": "19.6N",
        "经度": "126.4E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "12",
        "x": "19.6",
        "y": "126.4"
    },
    {
        "日期": "2023-10-2",
        "时间": "20:00:00",
        "风速": "50m/s",
        "移动方向": "北西",
        "强度": "强台风",
        "纬度": "19.9N",
        "经度": "126.2E",
        "中心气压(百帕)": "940",
        "移动速度(km/h)": "11",
        "x": "19.9",
        "y": "126.2"
    },
    {
        "日期": "2023-10-2",
        "时间": "23:00:00",
        "风速": "52m/s",
        "移动方向": "北西",
        "强度": "超强台风",
        "纬度": "20.2N",
        "经度": "125.7E",
        "中心气压(百帕)": "935",
        "移动速度(km/h)": "11",
        "x": "20.2",
        "y": "125.7"
    },
    {
        "日期": "2023-10-3",
        "时间": "02:00:00",
        "风速": "52m/s",
        "移动方向": "北西",
        "强度": "超强台风",
        "纬度": "20.2N",
        "经度": "125.5E",
        "中心气压(百帕)": "935",
        "移动速度(km/h)": "11",
        "x": "20.2",
        "y": "125.5"
    },
    {
        "日期": "2023-10-3",
        "时间": "05:00:00",
        "风速": "52m/s",
        "移动方向": "北西",
        "强度": "超强台风",
        "纬度": "20.2N",
        "经度": "125.2E",
        "中心气压(百帕)": "935",
        "移动速度(km/h)": "11",
        "x": "20.2",
        "y": "125.2"
    },
    {
        "日期": "2023-10-3",
        "时间": "08:00:00",
        "风速": "52m/s",
        "移动方向": "北西",
        "强度": "超强台风",
        "纬度": "20.6N",
        "经度": "125.1E",
        "中心气压(百帕)": "935",
        "移动速度(km/h)": "10",
        "x": "20.6",
        "y": "125.1"
    },
    {
        "日期": "2023-10-3",
        "时间": "12:00:00",
        "风速": "52m/s",
        "移动方向": "北西",
        "强度": "超强台风",
        "纬度": "21N",
        "经度": "124.9E",
        "中心气压(百帕)": "935",
        "移动速度(km/h)": "11",
        "x": "21",
        "y": "124.9"
    },
    {
        "日期": "2023-10-3",
        "时间": "18:00:00",
        "风速": "52m/s",
        "移动方向": "西北西",
        "强度": "超强台风",
        "纬度": "21.6N",
        "经度": "124.9E",
        "中心气压(百帕)": "935",
        "移动速度(km/h)": "10",
        "x": "21.6",
        "y": "124.9"
    },
    {
        "日期": "2023-10-3",
        "时间": "21:00:00",
        "风速": "50m/s",
        "移动方向": "西北西",
        "强度": "强台风",
        "纬度": "21.8N",
        "经度": "124.6E",
        "中心气压(百帕)": "940",
        "移动速度(km/h)": "10",
        "x": "21.8",
        "y": "124.6"
    },
    {
        "日期": "2023-10-4",
        "时间": "01:00:00",
        "风速": "50m/s",
        "移动方向": "西北西",
        "强度": "强台风",
        "纬度": "21.8N",
        "经度": "124.3E",
        "中心气压(百帕)": "940",
        "移动速度(km/h)": "11",
        "x": "21.8",
        "y": "124.3"
    },
    {
        "日期": "2023-10-4",
        "时间": "03:00:00",
        "风速": "48m/s",
        "移动方向": "西北西",
        "强度": "强台风",
        "纬度": "21.9N",
        "经度": "124.2E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "12",
        "x": "21.9",
        "y": "124.2"
    },
    {
        "日期": "2023-10-4",
        "时间": "04:00:00",
        "风速": "48m/s",
        "移动方向": "西北西",
        "强度": "强台风",
        "纬度": "21.9N",
        "经度": "124.1E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "12",
        "x": "21.9",
        "y": "124.1",
    },
    {
        "日期": "2023-10-4",
        "时间": "05:00:00",
        "风速": "48m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "22N",
        "经度": "124E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "13",
        "x": "22",
        "y": "124"
    },
    {
        "日期": "2023-10-4",
        "时间": "07:00:00",
        "风速": "48m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "22N",
        "经度": "123.8E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "13",
        "x": "22",
        "y": "123.8"
    },
    {
        "日期": "2023-10-4",
        "时间": "08:00:00",
        "风速": "50m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "22.1N",
        "经度": "123.6E",
        "中心气压(百帕)": "940",
        "移动速度(km/h)": "12",
        "x": "22.1",
        "y": "123.6"
    },
    {
        "日期": "2023-10-4",
        "时间": "18:00:00",
        "风速": "50m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "22.1N",
        "经度": "122.3E",
        "中心气压(百帕)": "940",
        "移动速度(km/h)": "13",
        "x": "22.1",
        "y": "122.3"
    },
    {
        "日期": "2023-10-4",
        "时间": "19:00:00",
        "风速": "50m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "22N",
        "经度": "122.1E",
        "中心气压(百帕)": "940",
        "移动速度(km/h)": "13",
        "x": "22",
        "y": "122.1"
    },
    {
        "日期": "2023-10-4",
        "时间": "20:00:00",
        "风速": "50m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "22N",
        "经度": "122E",
        "中心气压(百帕)": "940",
        "移动速度(km/h)": "11",
        "x": "22",
        "y": "122"
    },
    {
        "日期": "2023-10-4",
        "时间": "21:00:00",
        "风速": "50m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.9N",
        "经度": "121.9E",
        "中心气压(百帕)": "940",
        "移动速度(km/h)": "11",
        "x": "21.9",
        "y": "121.9"
    },
    {
        "日期": "2023-10-5",
        "时间": "08:00:00",
        "风速": "48m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.9N",
        "经度": "120.9E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "10",
        "x": "21.9",
        "y": "120.9"
    },
    {
        "日期": "2023-10-5",
        "时间": "09:00:00",
        "风速": "48m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "22N",
        "经度": "120.8E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "10",
        "x": "22",
        "y": "120.8"
    },
    {
        "日期": "2023-10-5",
        "时间": "21:00:00",
        "风速": "38m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "22N",
        "经度": "119.1E",
        "中心气压(百帕)": "965",
        "移动速度(km/h)": "11",
        "x": "22",
        "y": "119.1"
    },
    {
        "日期": "2023-10-5",
        "时间": "22:00:00",
        "风速": "38m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.9N",
        "经度": "118.9E",
        "中心气压(百帕)": "965",
        "移动速度(km/h)": "11",
        "x": "21.9",
        "y": "118.9"
    },
    {
        "日期": "2023-10-6",
        "时间": "02:00:00",
        "风速": "35m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.9N",
        "经度": "118.4E",
        "中心气压(百帕)": "970",
        "移动速度(km/h)": "10",
        "x": "21.9",
        "y": "118.4"
    },
    {
        "日期": "2023-10-6",
        "时间": "03:00:00",
        "风速": "35m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.8N",
        "经度": "118.3E",
        "中心气压(百帕)": "970",
        "移动速度(km/h)": "10",
        "x": "21.8",
        "y": "118.3"
    },
    {
        "日期": "2023-10-6",
        "时间": "10:00:00",
        "风速": "40m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.7N",
        "经度": "117.4E",
        "中心气压(百帕)": "960",
        "移动速度(km/h)": "9",
        "x": "21.7",
        "y": "117.4"
    },
    {
        "日期": "2023-10-6",
        "时间": "13:00:00",
        "风速": "40m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.7N",
        "经度": "117.1E",
        "中心气压(百帕)": "960",
        "移动速度(km/h)": "10",
        "x": "21.7",
        "y": "117.1"
    },
    {
        "日期": "2023-10-6",
        "时间": "14:00:00",
        "风速": "40m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.6N",
        "经度": "117E",
        "中心气压(百帕)": "960",
        "移动速度(km/h)": "9",
        "x": "21.6",
        "y": "117"
    },
    {
        "日期": "2023-10-6",
        "时间": "16:00:00",
        "风速": "40m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.6N",
        "经度": "116.8E",
        "中心气压(百帕)": "960",
        "移动速度(km/h)": "9",
        "x": "21.6",
        "y": "116.8"
    },
    {
        "日期": "2023-10-6",
        "时间": "17:00:00",
        "风速": "42m/s",
        "移动方向": "西南西",
        "强度": "强台风",
        "纬度": "21.5N",
        "经度": "116.7E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "8",
        "x": "21.5",
        "y": "116.7"
    },
    {
        "日期": "2023-10-6",
        "时间": "18:00:00",
        "风速": "42m/s",
        "移动方向": "西南西",
        "强度": "强台风",
        "纬度": "21.5N",
        "经度": "116.6E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "8",
        "x": "21.5",
        "y": "116.6"
    },
    {
        "日期": "2023-10-6",
        "时间": "19:00:00",
        "风速": "42m/s",
        "移动方向": "西南西",
        "强度": "强台风",
        "纬度": "21.4N",
        "经度": "116.4E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "8",
        "x": "21.4",
        "y": "116.4"
    },
    {
        "日期": "2023-10-6",
        "时间": "20:00:00",
        "风速": "42m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.4N",
        "经度": "116.3E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "7",
        "x": "21.4",
        "y": "116.3"
    },
    {
        "日期": "2023-10-6",
        "时间": "21:00:00",
        "风速": "42m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.3N",
        "经度": "116.2E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "10",
        "x": "21.3",
        "y": "116.2"
    },
    {
        "日期": "2023-10-6",
        "时间": "23:00:00",
        "风速": "45m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.3N",
        "经度": "116E",
        "中心气压(百帕)": "950",
        "移动速度(km/h)": "9",
        "x": "21.3",
        "y": "116"
    },
    {
        "日期": "2023-10-7",
        "时间": "00:00:00",
        "风速": "48m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.2N",
        "经度": "115.9E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "9",
        "x": "21.2",
        "y": "115.9"
    },
    {
        "日期": "2023-10-7",
        "时间": "02:00:00",
        "风速": "48m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.2N",
        "经度": "115.8E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "7",
        "x": "21.2",
        "y": "115.8"
    },
    {
        "日期": "2023-10-7",
        "时间": "04:00:00",
        "风速": "48m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.1N",
        "经度": "115.7E",
        "中心气压(百帕)": "945",
        "移动速度(km/h)": "7",
        "x": "21.1",
        "y": "115.7"
    },
    {
        "日期": "2023-10-7",
        "时间": "14:00:00",
        "风速": "45m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.1N",
        "经度": "115.3E",
        "中心气压(百帕)": "950",
        "移动速度(km/h)": "6",
        "x": "21.1",
        "y": "115.3"
    },
    {
        "日期": "2023-10-7",
        "时间": "17:00:00",
        "风速": "45m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.2N",
        "经度": "115.2E",
        "中心气压(百帕)": "950",
        "移动速度(km/h)": "6",
        "x": "21.2",
        "y": "115.2"
    },
    {
        "日期": "2023-10-8",
        "时间": "00:00:00",
        "风速": "42m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.2N",
        "经度": "115E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "6",
        "x": "21.2",
        "y": "115"
    },
    {
        "日期": "2023-10-8",
        "时间": "01:00:00",
        "风速": "42m/s",
        "移动方向": "西",
        "强度": "强台风",
        "纬度": "21.3N",
        "经度": "115E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": "6",
        "x": "21.3",
        "y": "115"
    },
    {
        "日期": "2023-10-8",
        "时间": "02:00:00",
        "风速": "42m/s",
        "移动方向": " ",
        "强度": "强台风",
        "纬度": "21.3N",
        "经度": "114.9E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": " ",
        "x": "21.3",
        "y": "114.9"
    },
    {
        "日期": "2023-10-8",
        "时间": "03:00:00",
        "风速": "42m/s",
        "移动方向": " ",
        "强度": "强台风",
        "纬度": "21.4N",
        "经度": "114.9E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": " ",
        "x": "21.4",
        "y": "114.9"
    },
    {
        "日期": "2023-10-8",
        "时间": "04:00:00",
        "风速": "42m/s",
        "移动方向": " ",
        "强度": "强台风",
        "纬度": "21.5N",
        "经度": "114.8E",
        "中心气压(百帕)": "955",
        "移动速度(km/h)": " ",
        "x": "21.5",
        "y": "114.8"
    },
    {
        "日期": "2023-10-8",
        "时间": "16:00:00",
        "风速": "38m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.5N",
        "经度": "114.1E",
        "中心气压(百帕)": "965",
        "移动速度(km/h)": "7",
        "x": "21.5",
        "y": "114.1"
    },
    {
        "日期": "2023-10-8",
        "时间": "19:00:00",
        "风速": "38m/s",
        "移动方向": "西",
        "强度": "台风",
        "纬度": "21.6N",
        "经度": "114.1E",
        "中心气压(百帕)": "965",
        "移动速度(km/h)": "7",
        "x": "21.6",
        "y": "114.1"
    },
    {
        "日期": "2023-10-8",
        "时间": "21:00:00",
        "风速": "38m/s",
        "移动方向": "西南西",
        "强度": "台风",
        "纬度": "21.6N",
        "经度": "114E",
        "中心气压(百帕)": "965",
        "移动速度(km/h)": "9",
        "x": "21.6",
        "y": "114"
    },
    {
        "日期": "2023-10-8",
        "时间": "22:00:00",
        "风速": "38m/s",
        "移动方向": "西南西",
        "强度": "台风",
        "纬度": "21.7N",
        "经度": "114E",
        "中心气压(百帕)": "965",
        "移动速度(km/h)": "10",
        "x": "21.7",
        "y": "114"
    },
    {
        "日期": "2023-10-9",
        "时间": "08:00:00",
        "风速": "28m/s",
        "移动方向": "西南西",
        "强度": "强热带风暴",
        "纬度": "21.7N",
        "经度": "113.2E",
        "中心气压(百帕)": "982",
        "移动速度(km/h)": "13",
        "x": "21.7",
        "y": "113.2"
    },
    {
        "日期": "2023-10-9",
        "时间": "09:00:00",
        "风速": "25m/s",
        "移动方向": "西南西",
        "强度": "强热带风暴",
        "纬度": "21.6N",
        "经度": "113E",
        "中心气压(百帕)": "985",
        "移动速度(km/h)": "13",
        "x": "21.6",
        "y": "113"
    },
    {
        "日期": "2023-10-9",
        "时间": "11:00:00",
        "风速": "25m/s",
        "移动方向": "西南西",
        "强度": "强热带风暴",
        "纬度": "21.6N",
        "经度": "112.7E",
        "中心气压(百帕)": "985",
        "移动速度(km/h)": "13",
        "x": "21.6",
        "y": "112.7"
    },
    {
        "日期": "2023-10-9",
        "时间": "12:00:00",
        "风速": "25m/s",
        "移动方向": "西南西",
        "强度": "强热带风暴",
        "纬度": "21.5N",
        "经度": "112.6E",
        "中心气压(百帕)": "985",
        "移动速度(km/h)": "13",
        "x": "21.5",
        "y": "112.6"
    },
    {
        "日期": "2023-10-9",
        "时间": "14:00:00",
        "风速": "20m/s",
        "移动方向": "南西",
        "强度": "热带风暴",
        "纬度": "21.5N",
        "经度": "112.4E",
        "中心气压(百帕)": "995",
        "移动速度(km/h)": "11",
        "x": "21.5",
        "y": "112.4"
    },
    {
        "日期": "2023-10-9",
        "时间": "15:00:00",
        "风速": "18m/s",
        "移动方向": "南西",
        "强度": "热带风暴",
        "纬度": "21.4N",
        "经度": "112.3E",
        "中心气压(百帕)": "998",
        "移动速度(km/h)": "10",
        "x": "21.4",
        "y": "112.3"
    },
    {
        "日期": "2023-10-9",
        "时间": "16:00:00",
        "风速": "18m/s",
        "移动方向": "西南西",
        "强度": "热带风暴",
        "纬度": "21.3N",
        "经度": "112.3E",
        "中心气压(百帕)": "998",
        "移动速度(km/h)": "10",
        "x": "21.3",
        "y": "112.3"
    },
    {
        "日期": "2023-10-9",
        "时间": "17:00:00",
        "风速": "15m/s",
        "移动方向": "南西",
        "强度": "热带低压",
        "纬度": "21.2N",
        "经度": "112.2E",
        "中心气压(百帕)": "1002",
        "移动速度(km/h)": "12",
        "x": "21.2",
        "y": "112.2"
    }
]

3.24警戒线Json

{
  "type": "FeatureCollection",
  "name": "24小时警戒线",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 0,
        "vertex_part": 0,
        "vertex_part_index": 0,
        "distance": 0.0,
        "angle": 181.16298765750767
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          127.063467352374118,
          34.055792562235581
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 1,
        "vertex_part": 0,
        "vertex_part_index": 1,
        "distance": 12.661340744086729,
        "angle": 214.57742085979675
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          126.806485563744445,
          21.397060011218343
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 2,
        "vertex_part": 0,
        "vertex_part_index": 2,
        "distance": 21.233379978598879,
        "angle": 213.04766787943828
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          118.859085804271217,
          18.184787653347598
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 3,
        "vertex_part": 0,
        "vertex_part_index": 3,
        "distance": 28.423290641913749,
        "angle": 199.77822594898183
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          119.097031904854248,
          10.998815415740069
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 4,
        "vertex_part": 0,
        "vertex_part_index": 4,
        "distance": 37.452233735007702,
        "angle": 232.65794537172491
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          113.119825858208628,
          4.2316283151589
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 5,
        "vertex_part": 0,
        "vertex_part_index": 5,
        "distance": 46.56993089592784,
        "angle": 243.86292054227681
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          104.934479998152426,
          0.215098137317341
        ]
      }
    }
  ]
}

4.48小时警戒线JSON

{
  "type": "FeatureCollection",
  "name": "48小警戒线",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 0,
        "vertex_part": 0,
        "vertex_part_index": 0,
        "distance": 0.0,
        "angle": 38.450363237102223
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          119.982587975857427,
          -0.018882194922753
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 1,
        "vertex_part": 0,
        "vertex_part_index": 1,
        "distance": 19.238717573888859,
        "angle": 19.46315735588648
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          131.945923047920701,
          15.047864893994642
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Id": 0,
        "vertex_index": 2,
        "vertex_part": 0,
        "vertex_part_index": 2,
        "distance": 38.144187546729142,
        "angle": 0.47595147467075
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          132.102967474305387,
          33.952682585316268
        ]
      }
    }
  ]
}

5.台风图片