使用mapbox 绘制台风风圈、台风路径

最新推荐文章于 2024-10-17 14:23:01 发布
最新推荐文章于 2024-10-17 14:23:01 发布
阅读量2.3k 收藏 12
点赞数 5
分类专栏： WebGIS mapbox 文章标签： javascript 开发语言 大屏端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46478007/article/details/126865147
版权

目录

1、台风路径信息准备与添加

    1.1 数据准备，这里可以从中央气象台台风网抓取数据http://typhoon.nmc.cn/web.html

    1.2 添加地图信息

 2、添加台风风圈

     1、使用坐标转换计算

  2、使用turf.js计算台风风圈范围

3、台风路径的播放效果

1、台风路径信息准备与添加

    1.1 数据准备，这里可以从中央气象台台风网抓取数据http://typhoon.nmc.cn/web.html

    1.2 添加地图信息

         添加台风预报路径

 function addTyLine(map, typData) {
  // 最后的点位添加编号名称
  typData.points[typData.points.length - 1].forecast.forEach((element, index) => {
    let coordList = [];
    element.forecastpoints.map(item => {
      coordList.push([Number(item.lng), Number(item.lat)]);
    });
    if (!map.getSource(`${typData.tfid}_typhon_route_line_${element.tm}`)) {
      map.addSource(`${typData.tfid}_typhon_route_line_${element.tm}`, {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: coordList,
          },
        },
      });
    }
    if (!map.getLayer(`typhon_route_${typData.tfid}_${index}`)) {
      map.addLayer({
        id: `typhon_route_${typData.tfid}_${index}`,
        type: 'line',
        source: `${typData.tfid}_typhon_route_line_${element.tm}`,
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
        },
        paint: {
          'line-color': '设定颜色',
          'line-width': 2,
          'line-dasharray': [0.005, 3],
        },
      });
    }
  });
}

        根据数据的格式来整理成geojson添加

预报站点信息、已测路径信息、已测站点信息同理添加

 2、添加台风风圈

     关于台风风圈，已知的数据有台风中心点以及台风半径，而台风半径又分为西北、西南、东南、东北四个方位角，这里在网上搜集了两种方法：

     1、使用坐标转换计算

      已知的中心点坐标为wgs84投影类型，也就是经纬度，需将其转换为投影坐标系来计算距离，再根据距离将其转换为经纬度来添加

let coords_7 = getCircleCoords(coordList[time], radiusData);

map.addSource(`currentFill_${typData.tfid}`, {
      type: 'geojson',
      data: {
        type: 'Feature',
        properties: {
          name: typData.name,
          radius: '7',
        },
        geometry: {
          type: 'Polygon',
          coordinates: coords_7,
        },
      },
    });
  map.addLayer({
    id: `currentFill_${typData.tfid}`,
    source: `currentFill_${typData.tfid}`,
    type: 'fill',
    paint: {
      'fill-color': ['match', ['get', 'radius'], '7', '#ffff00', '10', '#ffa911', '#ff5341'],
      'fill-opacity': 0.2,
      'fill-outline-color': ['match', ['get', 'radius'], '7', '#ffff00', '10', '#ffa911', '#ff5341'],
},
  });

getCircleCoords(center, radiusData) {
 //radiusData = {
   // ne: 100,
    //nw: 120,
    //sw: 120,
    //se: 10,
  //};

  center = proj4(proj4('EPSG:4326'), proj4('EPSG:3857'), center);
  let _coords = [];
  let _angInterval = 6;
  let _pointNums = 360 / (_angInterval * 4);
  let quadrant = {
    // 逆时针算角度
    '0': 'ne',
    '1': 'nw',
    '2': 'sw',
    '3': 'se'
  };
  for (let i = 0; i < 4; i++) {
    let _r = parseFloat(radiusData[quadrant[i]]) * 1000; // 单位是km
    if (!_r) _r = 0;
    for (let j = i * _pointNums; j <= (i + 1) * _pointNums; j++) {
      let _ang = _angInterval * j;
      let x = center[0] + _r * Math.cos((_ang * Math.PI) / 180);
      let y = center[1] + _r * Math.sin((_ang * Math.PI) / 180);
      var coord = proj4(proj4('EPSG:3857'), proj4('EPSG:4326'), [x, y]);
      _coords.push(coord);
    }
  }

  return [_coords];
}

传入的radiusData  需包含四个半径，格式如上；

proj4.js是坐标系转换通用的库，需单独引入；

以上方法可行，但是算出来的台风风圈经过验证存在一点误差，所以这里介绍另外一种使用turf.js计算的方法，算出来的风圈范围跟官网一致；

  2、使用turf.js计算台风风圈范围

drawTyphoonCircle(p, radiusData) {
  var center = turf.point(p);
  let quadrant = {
    // 逆时针算角度
    0: 'ne',
    1: 'sw',
    2: 'se',
    3: 'nw',
  };
  if (radiusData[quadrant[0]]) {
    var options = { number: 2048 };
    var arc_ne = turf.lineArc(center, radiusData[quadrant[0]], 0, 89.9, options);
    var arc_se = turf.lineArc(center, radiusData[quadrant[3]], 90, 179.9, options);
    var arc_sw = turf.lineArc(center, radiusData[quadrant[2]], 180, 269.9, options);
    var arc_nw = turf.lineArc(center, radiusData[quadrant[1]], 270, 360.1, options);

    var arcs = [];
    arcs.push(arc_ne, arc_se, arc_sw, arc_nw);

    var typhoonCircleCoords = [];
    for (var i = 0; i < arcs.length; i++) {
      var rawCoords1 = arcs[i].geometry.coordinates;

      for (var j = 0; j < rawCoords1.length; j++) {
        typhoonCircleCoords.push(rawCoords1[j]);
      }
    }

    var lineAll = turf.lineString(typhoonCircleCoords);
    var typhoonCirclePolygon = turf.lineToPolygon(lineAll);
    console.log('typhoonCirclePolygon', typhoonCirclePolygon);
    return typhoonCirclePolygon;
  } else {
    return;
  }

}

    这里返回直接是geojson，

3、台风路径的播放效果

设置定时器，对geojson数据源定时修改，用到的核心方法是    map.getSource(`currentPoint`).setData(geojson);记得动画播放结束后要clearInterval()哦

let time = 0
updateSource[typData.tfid] = setInterval(async () => {
    time++;
    if (!typData.points[time]) {
      clearInterval(updateSource[typData.tfid]);
      updateSource[typData.tfid] = null;
      return;
    }
    radiusSeven = typData.points[time]?.radius7.split('|');
    radiusData = {
      ne: radiusSeven[0],
      nw: radiusSeven[1],
      sw: radiusSeven[2],
      se: radiusSeven[3],
    };
    // let coords_7 = getCircleCoords(coordList[time], radiusData);
    let coords_7 = drawTyphoonCircle(coordList[time], radiusData);
    const geojson_7 = await {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: coords_7?.geometry?.coordinates,
          },
          properties: {
            tfid: typData.tfid,
            radius: '7',
          },
        },
      ],
    };
    radiusTen = typData.points[time].radius10.split('|');
    radiusTenData = {
      ne: radiusTen[0],
      nw: radiusTen[1],
      sw: radiusTen[2],
      se: radiusTen[3],
    };
    let coords_10 = drawTyphoonCircle(coordList[time], radiusTenData);
    const geojson_10 = await {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: coords_10?.geometry?.coordinates,
          },
          properties: {
            name: typData.name,
            radius: '10',
          },
        },
      ],
    };
    let radiusTwelve = typData.points[time].radius12.split('|');
    let radiusTwelveData = {
      ne: radiusTwelve[0],
      nw: radiusTwelve[1],
      sw: radiusTwelve[2],
      se: radiusTwelve[3],
    };
    let coords_12 = drawTyphoonCircle(coordList[time], radiusTwelveData);
    const geojson_12 = await {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: coords_12?.geometry?.coordinates,
          },
          properties: {
            name: typData.name,
            radius: '12',
          },
        },
      ],
    };
    const geojson = await {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: coordList[time],
          },
        },
      ],
    };
    try {
      if (!coordList[time] || !typData.points[time]) {
        clearInterval(updateSource[typData.tfid]);
        updateSource[typData.tfid] = null;
        return;
      }
      map.getSource(`currentPoint_${typData.tfid}`).setData(geojson);
      map.getSource(`currentFill_${typData.tfid}`).setData(geojson_7);
      map.getSource(`currentFill_10_${typData.tfid}`).setData(geojson_10);
      map.getSource(`currentFill_12_${typData.tfid}`).setData(geojson_12);
    } catch (err) {
      // If the updateSource interval is defined, clear the interval to stop updating the source.
      if (updateSource) {
        clearInterval(updateSource[typData.tfid]);
        updateSource[typData.tfid] = null;
      }
      throw new Error(err);
    }
  }, 100);

类似台风路径的播放效果官网上也有所介绍，https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/其里面的核心内容就是设置定时器更新数据源 ，当然数据源的要求是geojson, map.getSource('pointSourceName').setData(pointGeojson); 

windjs-over-mapbox:在实时地图上显示风图
07-24
windjs-over-mapbox 文章 - 在实时地图上显示风图 作者 我可以从事自由数据可视化工作。 如果您希望我用我的经验和专业知识帮助您，请 您也可以与我
Leaflet地图 -- 绘制台风风圈
chysxslt的博客
05-06 5403
Leaflet -- 绘制台风风圈12 1 2
arcgis api 3.x for js 入门开发系列十五台风轨迹
最新发布
GIS之家专栏
10-17 971
前言 关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。 本篇实现台风轨迹，截图如下： 下面简单介绍相关知识点 警戒线 警戒线坐标集合： var lineArr24=[[127,34],[127,21],[110,15]];//24小时警戒线坐标集
作为Mapbox自定义图层的WebGL风粒子模拟___下载.zip
04-08
作为Mapbox自定义图层的WebGL风粒子模拟___下载.zip
可视化，mapboxGL加载台风风场动画
m0_46478007的博客
11-01 2327
mapboxGL加载台风风场动画
python绘制台风路径
走向CTO的路上...
06-26 1644
其中，台风路径数据需要保存在名为“typhoon_path.txt”的文件中，每行数据格式为：年份,月份,经度,纬度,气压,风速,移动速度,移动方向。由于Basemap库已于2020年停止更新，因此在使用时可能会遇到一些问题。如果遇到问题，可以考虑使用Cartopy这个新的地理信息库。运用python读取CMA的台风路径数据（txt格式），绘制台风路径，并有所经过的附近区域的全球地图作底图、经纬度划分。
探索WebGL风向图：Mapbox的webgl-wind项目解析
gitblog_00054的博客
04-11 703
探索WebGL风向图：Mapbox的webgl-wind项目解析 项目地址:https://gitcode.com/gh_mirrors/we/webgl-wind 在今天的技术世界中，数据可视化已经成为理解和交流复杂信息的关键工具。Mapbox的webgl-wind项目，正是这样一个利用WebGL技术将风速和风向数据生动呈现的开源库。通过实时、动态的交互式地图，它能帮助我们直观地了解全球的风流动...
Mapbox绘制台风及台风眼（含动画）
qq_44896385的博客
12-14 692
不同颜色的点位代表不同台风登记（台风路线和台风点位是两个图层）第一次自己做的时候是按照这个思路来的，如果你也是新手，可以参考一下下面思路。gif中白色实线是已经发生过的台风路线，虚线是预测的台风路线。使用定时器，定时器每次执行时，每次添加新的坐标。使用定时器，定时器每次执行时，每次添加新的坐标。具体思路我不清楚，代码就在下面了，可以直接复制。pointFeatures目标数据结构。目标lineFeature数据格式。
绘制台风风圈
01-23
IDL代码，用来绘制台风风圈。指定台风中心经纬度，台风四至距离，返回一串儿点的经纬度，即可构成台风风圈形状。
mapbox绘制航线图
04-19
使用地图绘制航线图
mapbox 中使用的仿宋字体
02-19
Mapbox使用Glyphs（字形）来呈现地图上的文本，这些字形通常存储为点阵字体或者SVG格式，每个字符对应一个特定的编码。当遇到非ASCII字符，如中文特殊符号时，如果Mapbox默认的字体库不包含这些字符，就会导致显示...
wind-layer:风层| 一个 openlayers && amap && bmap && 传单 && mapbox-gl 扩展到windjs
08-05
wind-layer a | | | | | extension to show wind field。 介绍 设计之初是来源于 的一个气象数据的展示，他使用了流体场的方式去展示了全球的风速和风向富有很强的 表现力, 这个插件的很多核心代码也是来源于此。 目前最新版本为v1.0.0体验版，在1.0版本之前，在设计之初考虑的只有 一个地图引擎的支持，所以统一使用的是一个package 进行管理；这在后续去添加其他地图扩展库存在很多不便，所以在 1.0 版本之后对仓库进行了拆分，抽离了核心支持库和其他扩展库。 特性 (相对于原始 ) 抽离了粒子Field和向量 Vector 计算代码，便于进行扩展计算, 例如使用 webworker 或者 gpu.js 加速。 易于配置粒子数量，原始 windy.js 只能给定一个系数，会根据地图元素的大小进行计算粒子数量；现在可以支持系数
arcgis api for js 3.x 动态气象风向图、流场效果图
10-08
1、arcgis api for js 3.x 动态气象风向图、流场效果图 2.esri的效果是缩放地图时候，粒子数是不变的，即是不会随着地图的缩放而变动，导致地图放大的时候，效果很不好，看不出来风向流动的效果；修改为粒子数是根据地图当前范围extent而动态改变的。
webgis温州台风网项目
09-10
这是我使用Uniapp和Vue3结合OpenLayers框架仿照温州台风网做的项目， 自己总结了一篇OpenLayers和MapBox基础使用总结。 作者：张世洋 文档地址：https://gitee.com/zhang-shi-yang/typhoon
mapbox-redux:使用Redux测试Mapbox
05-12
一个基本的示例，展示了如何在Redux中使用Mapbox。 $ git clone git@github.com:michogar/mapbox-redux.git $ cd mapbox-redux $ npm install $ npm run start 如何 本示例使用库。 那里有更多文档。 借助mapbox-...
GIS使用的风场演示数据（可下载 2个）
大剑师兰特的GIS世界
07-14 1568
风场数据通常是指用来描述大气中风向和风速分布的数据集。这类数据对于气象学、航空、航海以及环境科学等领域至关重要。风场数据结构可以非常复杂，取决于数据的来源和精度要求。地理位置：通常包括纬度（latitude）和经度（longitude）坐标，有时也会包含海拔高度（altitude）或气压（pressure level）。风速：表示风的强度，通常单位为米/秒（m/s）、公里/小时（km/h）或节（knots）。风向。
mapbox自定义地图
weixin_52375283的博客
11-05 2284
基于mapbox根据自己的气象数据定制地图 更多地图效果访问www.mapbox.cn/mapbox-gl-js/examples/ 效果图-风场图 热力图 App.vue <template> <div style="height: 100%; width: 100%"> <div ref="basicMapbox" id="map" :style="mapSize"> <div class="screen">..
使用mapbox绘制一个正方形
06-11
好的，以下是使用Mapbox绘制一个正方形的示例代码： 首先，你需要在Mapbox官网注册并创建一个账户，然后创建一个新的地图项目，并获取你的访问令牌（access token）。 然后，你需要引入Mapbox的JavaScript库，并在HTML中添加一个`<div>`元素作为地图容器。接着，你可以使用以下代码创建一个地图，并添加一个正方形： ```html <!DOCTYPE html> <html> <head> <title>Mapbox - First Map</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' /> <style> #map { height: 400px; } </style> </head> <body> <div id='map'></div> <script> // 初始化地图，设置中心点和缩放级别 mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [-122.4194, 37.7749], zoom: 12 }); // 添加一个正方形 var square = turf.square([-122.4248, 37.7649], 0.2, {units: 'kilometers'}); map.on('load', function() { map.addLayer({ 'id': 'square', 'type': 'fill', 'source': { 'type': 'geojson', 'data': square }, 'paint': { 'fill-color': '#088', 'fill-opacity': 0.4 } }); }); </script> </body> </html> ``` 在这个示例代码中，我们首先引入了Mapbox的JavaScript库，并在HTML中添加了一个`<div>`元素作为地图容器。然后，我们使用`mapboxgl.Map`函数创建了一个地图，并设置了中心点和缩放级别。接着，我们使用Turf.js创建了一个正方形，并在地图加载完成后，使用`map.addLayer`函数将其添加到地图上。 你需要将代码中的`YOUR_ACCESS_TOKEN`替换为你自己的访问令牌。运行代码后，你应该能够在地图上看到一个正方形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值