Mapbox绘制台风及台风眼（含动画）

已于 2023-12-15 09:53:59 修改
阅读量426 收藏 9
点赞数 6
文章标签： 前端 js
于 2023-12-14 17:34:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44896385/article/details/134990446
版权

目录

最终效果

实现思路（三个图层）

代码实现

绘制台风路线并添加动画

绘制台风点位并添加动画

绘制台风眼图标并旋转

执行下面两个函数即可

最终效果

实现思路（三个图层）

第一次自己做的时候是按照这个思路来的，如果你也是新手，可以参考一下下面思路

1、绘制台风路线并添加动画

        备注：gif中白色实线是已经发生过的台风路线，虚线是预测的台风路线

        动画思路：使用定时器，定时器每次执行时，每次添加新的坐标

2、绘制台风点位并添加动画

        备注：不同颜色的点位代表不同台风登记（台风路线和台风点位是两个图层）       

        动画思路：使用定时器，定时器每次执行时，每次添加新的坐标

3、绘制台风眼图标

        备注：单独一个图层

4、台风眼图标旋转

代码实现

以下是台风数据

// 台风等级颜色
let tfColor = new Map()
tfColor.set('TD', '#30fc31')
tfColor.set('TS', '#307efa')
tfColor.set('STS', '#fffc00')
tfColor.set('TY', '#ff9c00')
tfColor.set('STY', '#fb7cff')
tfColor.set('SuperTY', '#fa3030')
// 构造实况数据(台风编号,当前时间,经度，纬度,气压)
let liveData = [
  {typhoonID: '2305', datetime: '2023-07-24 02:00:00', longitude: 127.1, latitude: 15.2, pressure: 965, grade: 'TY'},
  {typhoonID: '2305', datetime: '2023-07-24 05:00:00', longitude: 127, latitude: 15.4, pressure: 960, grade: 'TY'},
  {typhoonID: '2305', datetime: '2023-07-25 08:00:00', longitude: 124.6, latitude: 17.6, pressure: 915, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-25 11:00:00', longitude: 124, latitude: 18, pressure: 915, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-25 14:00:00', longitude: 123.8, latitude: 18.2, pressure: 915, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-25 17:00:00', longitude: 123.3, latitude: 18.6, pressure: 915, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-25 20:00:00', longitude: 122.8, latitude: 18.8, pressure: 920, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-25 23:00:00', longitude: 122.2, latitude: 18.9, pressure: 925, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-26 02:00:00', longitude: 121.6, latitude: 19, pressure: 925, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-26 05:00:00', longitude: 121.3, latitude: 18.8, pressure: 925, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-26 11:00:00', longitude: 121.1, latitude: 19, pressure: 930, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-26 14:00:00', longitude: 121, latitude: 19.3, pressure: 930, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-26 17:00:00', longitude: 120.7, latitude: 19.4, pressure: 935, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-26 20:00:00', longitude: 120.6, latitude: 19.6, pressure: 935, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-26 23:00:00', longitude: 120.4, latitude: 19.9, pressure: 935, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-27 02:00:00', longitude: 120, latitude: 20, pressure: 935, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-27 05:00:00', longitude: 120, latitude: 20.1, pressure: 940, grade: 'STY'},
  {typhoonID: '2305', datetime: '2023-07-27 08:00:00', longitude: 119.9, latitude: 20.5, pressure: 940, grade: 'STY'},
  {typhoonID: '2305', datetime: '2023-07-27 11:00:00', longitude: 119.5, latitude: 20.9, pressure: 940, grade: 'STY'},
  {typhoonID: '2305', datetime: '2023-07-27 14:00:00', longitude: 119.3, latitude: 21.1, pressure: 940, grade: 'STY'},
  {typhoonID: '2305', datetime: '2023-07-27 17:00:00', longitude: 119.2, latitude: 21.4, pressure: 935, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-27 20:00:00', longitude: 119.2, latitude: 21.7, pressure: 930, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-27 23:00:00', longitude: 119.1, latitude: 22.2, pressure: 925, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-28 02:00:00', longitude: 119, latitude: 22.8, pressure: 925, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-28 05:00:00', longitude: 118.9, latitude: 23.4, pressure: 930, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-28 07:00:00', longitude: 118.9, latitude: 23.9, pressure: 930, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-28 10:00:00', longitude: 118.6, latitude: 24.7, pressure: 945, grade: 'STY'}
]
// 预测数据
let forecastData = [
  {typhoonID: '2305', datetime: '2023-07-28 14:00:00', longitude: 118.3, latitude: 25.2, pressure: 950, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-28 20:00:00', longitude: 118, latitude: 26.5, pressure: 980, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-29 02:00:00', longitude: 117.5, latitude: 28.2, pressure: 992, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-29 08:00:00', longitude: 116.7, latitude: 30.7, pressure: 998, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-29 20:00:00', longitude: 116, latitude: 32.6, pressure: 998, grade: 'SuperTY'},
  {typhoonID: '2305', datetime: '2023-07-30 08:00:00', longitude: 115.8, latitude: 34.3, pressure: 998, grade: 'SuperTY'}
]

// 先将以上数据处理为目标数据格式后全部放入lineFeatures和pointFeatures。做动画时，
// 在定时器中，将lineFeatures和pointFeatures中的数据 每次 分别加入animationLineFeature和animationPointFeature

// 线路feature(包含实况和预测)
let lineFeatures = []
// 台风点feature(包含实况和预测)
let pointFeatures = []
// 动画-台风点feature(包含实况和预测)
let animationPointFeature = []
// 动画-台风路线feature(包含实况和预测)
let animationLineFeature = []

绘制台风路线并添加动画

目标lineFeature数据格式

// 渲染台风路线
function renderLine() {
  handleLineData()

  // 路径geojson
  let geojsonLine = {
    type: 'FeatureCollection',
    features: animationLineFeature
  }
  map.addSource('tf_live_path', {
    type: 'geojson',
    data: geojsonLine
  })

  animationLine(geojsonLine)

  map.addLayer({
    id: 'tf_live_path',
    type: 'line',
    source: 'tf_live_path',
    paint: {
      'line-color': '#ccc', // 线颜色
      'line-width': 3, // 线宽
      // 根据properties中type字段 forecastve设置为实线 其他设置为虚线
      'line-dasharray': ['match', ['get', 'type'], 'forecastve', ['literal', [1, 1]], ['literal', [1, 0]]]
    }
  })
}

// 处理台风路线数据
function handleLineData() {
  for (let i = 0; i < liveData.length; i++) {
    let firstCoordinates
    let secondCoordinates
    let type
    if (i === liveData.length - 1) {
      firstCoordinates = [liveData[liveData.length - 1].longitude, liveData[liveData.length - 1].latitude]
      secondCoordinates = [forecastData[0].longitude, forecastData[0].latitude]
      type = 'forecastve'
    } else {
      firstCoordinates = [liveData[i].longitude, liveData[i].latitude]
      secondCoordinates = [liveData[i + 1].longitude, liveData[i + 1].latitude]
      type = 'live'
    }
    let feature = {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [firstCoordinates, secondCoordinates]
      },
      properties: {
        type: type
      }
    }
    lineFeatures.push(feature)
  }
  for (let i = 0; i < forecastData.length - 1; i++) {
    let feature = {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
          [forecastData[i].longitude, forecastData[i].latitude],
          [forecastData[i + 1].longitude, forecastData[i + 1].latitude]
        ]
      },
      properties: {
        type: 'forecastve'
      }
    }
    lineFeatures.push(feature)
  }
  // console.log('lineFeatures:', lineFeatures)
}

// 台风路线动画
function animationLine(geojsonLine) {
  let lineIndex = 0
  let lineTimer = setInterval(() => {
    if (lineIndex === lineFeatures.length - 1) clearInterval(lineTimer)
    animationLineFeature.push(lineFeatures[lineIndex])
    if (lineIndex === liveData.length) {
      // renderIcon()
      // 渲染台风眼icon并旋转
      rotateIcon()
    }
    lineIndex++
    map.getSource('tf_live_path').setData(geojsonLine)
  }, 200)
}

绘制台风点位并添加动画

pointFeatures目标数据结构

// 渲染台风点
function renderPoint() {
  handlePointData()

  let geojsonPoint = {
    type: 'FeatureCollection',
    features: animationPointFeature
  }

  map.addSource('tf_live_point', {
    type: 'geojson',
    data: geojsonPoint
  })

  animationPoint(geojsonPoint)

  map.addLayer({
    id: 'tf_live_point',
    type: 'circle',
    source: 'tf_live_point',
    paint: {
      'circle-color': [
        'case',
        ['==', ['get', 'grade'], 'TD'],
        tfColor.get('TD'),
        ['==', ['get', 'grade'], 'TS'],
        '#fb7cff',
        ['==', ['get', 'grade'], 'STS'],
        '#fb7cff',
        ['==', ['get', 'grade'], 'TY'],
        tfColor.get('TY'),
        ['==', ['get', 'grade'], 'STY'],
        tfColor.get('STY'),
        ['==', ['get', 'grade'], 'SuperTY'],
        tfColor.get('SuperTY'),
        '#FF0000'
      ]
    }
  })
}

// 处理台风点数据
function handlePointData() {
  // 将实况点位加入pointFeatures
  for (let i = 0; i < liveData.length; i++) {
    let feature = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [liveData[i].longitude, liveData[i].latitude]
      },
      properties: {
        type: 'live',
        grade: liveData[i].grade
      }
    }
    pointFeatures.push(feature)
  }
  // 将预测点位加入pointFeatures
  for (let i = 0; i < forecastData.length; i++) {
    let feature = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [forecastData[i].longitude, forecastData[i].latitude]
      },
      properties: {
        type: 'forecastve',
        grade: forecastData[i].grade
      }
    }
    pointFeatures.push(feature)
  }
  console.log('pointFeatures:', pointFeatures)

  // 动画先加载第一个点
  animationPointFeature.push({
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [liveData[0].longitude, liveData[0].latitude]
    },
    properties: {
      type: 'live',
      grade: liveData[0].grade
    }
  })
}

// 台风点动画
function animationPoint(geojsonPoint) {
  let i = 1
  let timer = setInterval(() => {
    if (i === pointFeatures.length - 1) clearInterval(timer)
    animationPointFeature.push(pointFeatures[i])
    i++
    map.getSource('tf_live_point').setData(geojsonPoint)
  }, 200)
}

绘制台风眼图标并旋转

具体思路我不清楚，代码就在下面了，可以直接复制

function rotateIcon() {
  map.addImage('typhoon', createRotateIconByStaticDiagram('/src/assets/img/typhoon.png'))

  map.addSource('rotate', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'Point',
            coordinates: [liveData[liveData.length - 1].longitude, liveData[liveData.length - 1].latitude]
          }
        }
      ]
    }
  })

  map.addLayer({
    id: 'rotate',
    type: 'symbol',
    source: 'rotate',
    layout: {
      'icon-image': 'typhoon',
      'icon-size': 0.3,
      'icon-offset': [0, 0],
      'icon-rotation-alignment': 'viewport',
      'icon-allow-overlap': true,
      'icon-ignore-placement': true
    }
  })
}

function createRotateIconByStaticDiagram(url) {
  const size = 100
  return {
    width: size,
    height: size,
    data: new Uint8Array(size * size * 4),
    // context: null,
    onAdd: function () {
      const canvas = document.createElement('canvas')
      canvas.width = this.width
      canvas.height = this.height
      this.context = canvas.getContext('2d')
    },
    render: function () {
      const context = this.context
      context.clearRect(0, 0, this.width, this.height)
      const img = new Image()
      img.src = url
      context.drawImage(img, 0, 0)
      img.onload = function () {
        context.clearRect(0, 0, size, size)
        context.translate(50, 50)
        context.rotate(Math.PI / 45)
        context.translate(-50, -50)
        context.drawImage(img, 0, 0)
      }
      this.data = context.getImageData(0, 0, this.width, this.height).data
      map.triggerRepaint()
      return true
    }
  }
}

执行下面两个函数即可

  // 渲染台风路线
  renderLine()

  // 渲染台风点
  renderPoint()

qq_44896385
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Mapbox 自定义图层 加载百度切片
02-21
在Mapbox中使用自定义图层实现百度地图切片纠偏后的展示，注意在这个中mapbox的版本尽量使用最新的，因为老版本自定义图层函数不一样
mapbox绘制航线图
04-19
使用地图绘制航线图
Mapboxgl实现点animate动画效果
03-24
Mapboxgl实现点animate动画效果
mapbox-gl-draw:mapbox-gl-js的绘图工具
04-30
@ mapbox / mapbox-gl-draw 增加了对地图上的绘图和编辑功能的支持。 需要 。 兼容版本记录在package.json中 在NPM上，此软件包最近已从mapbox-gl-draw移至@mapbox/mapbox-gl-draw 正在安装 npm install @mapbox/mapbox-gl-draw Draw随CSS一起提供，请确保将其包含在构建中。 打字稿 Typescript定义文件可作为包的一部分提供。 npm install @types/mapbox__mapbox-gl-draw 使用模块时 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css' 使用CDN时 < link rel =' stylesheet ' href =' https://api.mapbox.com/mapbox
deckgl-point-animation:deck.gl中的动画点演示
05-06
deck.gl点动画演示 一个使用deck.gl和MapBox为点设置动画的演示。 使用的数据集是美国的所有公共图书馆。 演示版 用于DelayedPointLayer演示（经度擦除动画） 为DelayedPointLayer演示（目标波纹动画） 有关ScatterplotLayer演示的 开始演示 npm run start 去 用于DelayedPointLayer演示（经度擦除动画） DelayedPointLayer演示的目标（目标波纹动画） 以获得ScatterplotLayer演示
作为Mapbox自定义图层的WebGL风粒子模拟___下载.zip
04-08
作为Mapbox自定义图层的WebGL风粒子模拟___下载.zip
Mapbox实现蒙版掩膜效果
最新发布
Sakura1998gis的博客
09-04 553
Mapbox实现蒙版掩膜效果
openlayers扩展：风场可视化（wind-layer）
DIY_Liu的博客
05-25 9147
windLayer api使用示例 这里主要为windlayer关于在openlayers3-4版本内使用的相关接口及参数说明 在加载时，主要读取的数据来源格式为json，而我们一般获取到的数据主要为netCDF或Grib等格式的数据，这里还涉及相关的数据转换操作 openlayers-wind参数说明 TIP 对应于openlayers 3-4相关参数 图层参数 参数 说明 类型 默认值 windOptions 风场参数，具体配置如下 object ...
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 只能给定一个系数，会根据地图元素的大小进行计算粒子数量；现在可以支持系数
mapbox-gl-draw-rectangle-restrict-area
05-16
mapbox-gl绘制矩形限制区域 绘制矩形模式，具有可选的区域限制 特征 一键/两键绘图 移动能力 面积平方限制可选 安装 npm install --save @mapbox/mapbox-gl-draw mapbox-gl-draw-rectangle-restrict-area 用法 import MapboxDraw from "@mapbox/mapbox-gl-draw" ; import DrawRectangle , { DrawStyles , } from "mapbox-gl-draw-rectangle-restrict-area" ; const map = new mapboxgl . Map ( { container : "map" , // container id style : "mapbox://styles/mapbox/stree
mapbox_polygonChoose.zip
06-06
mapbox结合turf.js绘制多边形通过空间拓扑判断相交，达到自定义绘制形状框选对象对象，并输出对象信息。
使用mapbox 绘制台风风圈、台风路径
m0_46478007的博客
09-15 1852
计算台风风圈范围，使用mapbox添加台风播放动画
mapbox GL台风路径的播放实现
LZUGIS
03-22 2096
概述 前面的文章中写了基于openlayers4的台风路径播放，最近用到mapbox GL，也要实现相似的功能，网上找了好久都没有找到，于是就放弃了“拿来主义”的想法，只能自己动手了。经过一下午的努力，终于有了一个雏形，在此分享出来，希望对你有用！ 效果 实现 1、数据获取 测试数据是从温州台风网，抓取了201929号台风数据作为测试数据。 2、添加台风编号和名称到地图 addTyphoonLa...
可视化，mapboxGL加载台风风场动画
m0_46478007的博客
11-01 1735
mapboxGL加载台风风场动画
MapBox-gl绘制点及点线
chubu3218的博客
03-15 1852
1.数据来源 setTargets(targets) { this.targets = []//所有目标对象数组 this.tgtID = new Map()//不同ID对应颜色不同 for (let key of this.tgtIdLineData.keys()) { let newArr = [] this.tgtIdLineData.set(key,newArr) }
【Mapbox GL JS 入门】（4）Markers and controls 标记和控件
椰子的职场成长记录
11-23 1377
【Mapbox GL JS 入门】Map Instance Members 地图实例 - Controls 控件
记录mapbox绘制点和绘制线
qq_43341001的博客
01-27 2630
/** * InitLayer 构造函数 * mapbox初始化地图 */ function InitLayer(map){ this.map = map; this.coordsLineArray = [];//存放经纬度 this.k = 0;//记录几个点 } /** * 绘制点图层 * 方法名 plottingMarker * e 事件 * */ InitLayer.prototype.plottingMarker = function plottingMa
《MapboxGL 基础知识点》- 放大/缩小/定位/级别
前端技术
07-31 1011
使用新旧值之间的动画转换更改中心、缩放、方位、俯仰和填充的任意组合。对于选项中未指定的任何详细信息，贴图将保留其当前值。：使用动画过渡将贴图缩放到指定的缩放级别。
使用mapbox绘制一个正方形
06-11
好的，以下是使用Mapbox绘制一个正方形的示例代码： 首先，你需要在Mapbox官网注册并创建一个账户，然后创建一个新的地图项目，并获取你的访问令牌（access token）。 然后，你需要引入Mapbox的JavaScript库，并在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值