Leaflet地图 -- 绘制台风风圈

最新推荐文章于 2024-08-14 21:21:46 发布
最新推荐文章于 2024-08-14 21:21:46 发布
阅读量5.2k 收藏 17
点赞数 5
分类专栏： Cavnas Gis 文章标签： svg canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chysxslt/article/details/105912623
版权

Leaflet -- 绘制台风风圈

实现效果

台风风圈实现效果

实现思路

我们先来看一下，后端返回的数据格式。下面是台风轨迹列表中的一条记录，红框的字段就是画台风风圈的关键字段：se、se、ne、nw分别代表当前点位台风风圈的东南、西南、东北、西北四个方向的影响半径。
台风轨迹列表点位数据详情
html的图形的绘制，svg和canvas。最开始选择的是canvas，绘制好了之后，在地图的位移时要重新计算和绘制实现效果不理想。
在这里插入图片描述

之后看了下leaflet的源码发现L.Polygon 是继承自L.Path对象。而L.Path本身又是，基于SVG实现的。那就好办了，我们继承L.Polygon再写个类L.Typhoon
在这里插入图片描述
L.Typhoon类中，两个最核心方法：一个是计算风圈四个方向半径，一个是绘制台风风圈： 基于SVG的path元素来实现的，下面是代码：

核心代码
  1. 计算风圈半径：台风中心经纬度和半径计算屏幕坐标
projectLatlngs: function () {
     try {
       var e = this._latlng;
       this._point = this._map.latLngToLayerPoint(e);
       var t_northeast = this._getLngRadius(this._getLatRadius(this._circle.ne * 1000)),
           i_northeast = this._map.latLngToLayerPoint([e.lat, e.lng - t_northeast]);
       this._radius_northeast = Math.max(this._point.x - i_northeast.x, 1);
       var t_southeast = this._getLngRadius(this._getLatRadius(this._circle.se * 1000)),
           i_southeast = this._map.latLngToLayerPoint([e.lat, e.lng - t_southeast]);
       this._radius_southeast = Math.max(this._point.x - i_southeast.x, 1);
       var t_southwest = this._getLngRadius(this._getLatRadius(this._circle.sw * 1000)),
           i_southwest = this._map.latLngToLayerPoint([e.lat, e.lng - t_southwest]);
       this._radius_southwest = Math.max(this._point.x - i_southwest.x, 1);
       var t_northwest = this._getLngRadius(this._getLatRadius(this._circle.nw * 1000)),
           i_northwest = this._map.latLngToLayerPoint([e.lat, e.lng - t_northwest]);
       this._radius_northwest = Math.max(this._point.x - i_northwest.x, 1)
     } catch (e) {
       this._radius_northeast = null;
       this._radius_southeast = null;
       this._radius_southwest = null;
       this._radius_northwest = null
     }
   },
  1. 绘制台风风圈：
getTyphoonPath: function () {
      if (this._radius_northeast && this._radius_southeast && this._radius_southwest && this._radius_northwest) {
        var t = this._point;
        var e_northeast = this._radius_northeast;
        var path_svg = "M" + t.x + "," + (t.y - e_northeast);
        var path_vml = "M" + t.x + "," + (t.y - e_northeast);
        path_svg += "A" + e_northeast + "," + e_northeast + ",0,0,1," + (t.x + e_northeast) + "," + t.y;
        path_vml += " ae " + t.x + "," + t.y + " " + e_northeast + "," + e_northeast + " " + 65535 * 450 + "," + -5898150;
        var e_southeast = this._radius_southeast;
        path_svg += "L" + (t.x + e_southeast) + "," + t.y;
        path_svg += "A" + e_southeast + "," + e_southeast + ",0,0,1," + t.x + "," + (t.y + e_southeast);
        path_vml += " ae " + t.x + "," + t.y + " " + e_southeast + "," + e_southeast + " " + 65535 * 360 + "," + -5898150;
        var e_southwest = this._radius_southwest;
        path_svg += "L" + t.x + "," + (t.y + e_southwest);
        path_svg += "A" + e_southwest + "," + e_southwest + ",0,0,1," + (t.x - e_southwest) + "," + t.y;
        path_vml += " ae " + t.x + "," + t.y + " " + e_southwest + "," + e_southwest + " " + 65535 * 270 + "," + -5898150;
        var e_northwest = this._radius_northwest;
        path_svg += "L" + (t.x - e_northwest) + "," + t.y;
        path_svg += "A" + e_northwest + "," + e_northwest + ",0,0,1," + t.x + "," + (t.y - e_northwest) + "z";
        path_vml += " ae " + t.x + "," + t.y + " " + e_northwest + "," + e_northwest + " " + 65535 * 180 + "," + -5898150 + "X";
        this.svgPath = L.Browser.svg ? path_svg : path_vml
        return L.Browser.svg ? path_svg : path_vml
      }
      return ""
    },
全部代码
(function () {
  L.Typhoon = L.Polygon.extend({
    initialize: function (t, e, i) {
      L.Polygon.prototype.initialize.call(this, e), this._latlng = L.latLng(t), this._circle = e,this._style = i;
    },
    options: {fill: !0},
    projectLatlngs: function () {
      try {
        var e = this._latlng;
        this._point = this._map.latLngToLayerPoint(e);
        var t_northeast = this._getLngRadius(this._getLatRadius(this._circle.ne * 1000)),
            i_northeast = this._map.latLngToLayerPoint([e.lat, e.lng - t_northeast]);
        this._radius_northeast = Math.max(this._point.x - i_northeast.x, 1);
        var t_southeast = this._getLngRadius(this._getLatRadius(this._circle.se * 1000)),
            i_southeast = this._map.latLngToLayerPoint([e.lat, e.lng - t_southeast]);
        this._radius_southeast = Math.max(this._point.x - i_southeast.x, 1);
        var t_southwest = this._getLngRadius(this._getLatRadius(this._circle.sw * 1000)),
            i_southwest = this._map.latLngToLayerPoint([e.lat, e.lng - t_southwest]);
        this._radius_southwest = Math.max(this._point.x - i_southwest.x, 1);
        var t_northwest = this._getLngRadius(this._getLatRadius(this._circle.nw * 1000)),
            i_northwest = this._map.latLngToLayerPoint([e.lat, e.lng - t_northwest]);
        this._radius_northwest = Math.max(this._point.x - i_northwest.x, 1)
      } catch (e) {
        this._radius_northeast = null;
        this._radius_southeast = null;
        this._radius_southwest = null;
        this._radius_northwest = null
      }
    },
    getTyphoonPath: function () {
      if (this._radius_northeast && this._radius_southeast && this._radius_southwest && this._radius_northwest) {
        var t = this._point;
        var e_northeast = this._radius_northeast;
        var path_svg = "M" + t.x + "," + (t.y - e_northeast);
        var path_vml = "M" + t.x + "," + (t.y - e_northeast);
        path_svg += "A" + e_northeast + "," + e_northeast + ",0,0,1," + (t.x + e_northeast) + "," + t.y;
        path_vml += " ae " + t.x + "," + t.y + " " + e_northeast + "," + e_northeast + " " + 65535 * 450 + "," + -5898150;
        var e_southeast = this._radius_southeast;
        path_svg += "L" + (t.x + e_southeast) + "," + t.y;
        path_svg += "A" + e_southeast + "," + e_southeast + ",0,0,1," + t.x + "," + (t.y + e_southeast);
        path_vml += " ae " + t.x + "," + t.y + " " + e_southeast + "," + e_southeast + " " + 65535 * 360 + "," + -5898150;
        var e_southwest = this._radius_southwest;
        path_svg += "L" + t.x + "," + (t.y + e_southwest);
        path_svg += "A" + e_southwest + "," + e_southwest + ",0,0,1," + (t.x - e_southwest) + "," + t.y;
        path_vml += " ae " + t.x + "," + t.y + " " + e_southwest + "," + e_southwest + " " + 65535 * 270 + "," + -5898150;
        var e_northwest = this._radius_northwest;
        path_svg += "L" + (t.x - e_northwest) + "," + t.y;
        path_svg += "A" + e_northwest + "," + e_northwest + ",0,0,1," + t.x + "," + (t.y - e_northwest) + "z";
        path_vml += " ae " + t.x + "," + t.y + " " + e_northwest + "," + e_northwest + " " + 65535 * 180 + "," + -5898150 + "X";
        this.svgPath = L.Browser.svg ? path_svg : path_vml
        return L.Browser.svg ? path_svg : path_vml
      }
      return ""
    },
    beforeAdd: function (map) {
      this._renderer = map.getRenderer(this);
    },
    onAdd: function (map) {
      this.projectLatlngs();
      this.getTyphoonPath();
      this._renderer._initPath(this);
      this._reset();
      this._path.setAttribute('d',this.svgPath);
      this._renderer._addPath(this);
      this._setStyle(this._style);
    },

    _setStyle: function (style) {
      L.setOptions(this, style);
      if (this._renderer) {
        this._renderer._updateStyle(this);
      }
      return this;
    },
    _getLatRadius: function (r) {
      return r / 40075017 * 360
    },
    _getLngRadius: function (lr) {
      return lr / Math.cos(Math.PI / 180 * this._latlng.lat)
    }
  });

  L.typhoon = function (t, e, i) {
    return new L.Typhoon(t, e, i)
  }
  
})();
结束语

以上就是台风风圈的绘制实现及代码。本文是基于leaflet v1.6.0的完成的，低版本的leaflet是否可以用并未进行测试，请自行进行测试或对代码进行修改。

chysxslt
关注
专栏目录
leaflet 绘制台风风圈
小武的博客
12-16 1469
效果如下图所示： 代码实现 台风的计算方法(只写了一个台风轮廓的添加，多个可自行循环天机) getTF(lat, ne, se, sw, nw) { const TF = { longitude: 144.9, latitude: 26.2, radius7_quad: { ne: 350, se: 300, sw: 150, nw: 280 } } // 求出方位半径方向上弧形经纬度 const getPoints = (c.
Leaflet实现路径轨迹回放
11-07
基于Leaflet实现路径轨迹回放功能，另外对Leaflet.Marker类进行扩展，支持设置图标旋转角度
百度地图动态绘制台风轨迹
最新发布
Qin的专栏
08-14 496
百度地图动态绘制台风轨迹
绘制台风风圈
01-23
IDL代码，用来绘制台风风圈。指定台风中心经纬度，台风四至距离，返回一串儿点的经纬度，即可构成台风风圈形状。
绘制台风风圈（2021）
09-15
2021，IDL代码，用来绘制台风风圈。指定台风中心经纬度，台风四至距离，返回一串儿点的经纬度，即可构成台风风圈形状。
leaflet图层根据风力风向进行偏移
qq_39052099的博客
07-09 477
前几天要用leaflet做个危险源覆盖范围的图层，这个覆盖范围要根据风向进行偏移。偏移距离为为覆盖范围半径的一半。当风向为北风的时候效果如下：（红点为危险源，圆为危险区域，此时风向为北风）## leaflet图层根据风力风向进行偏移 实现步骤： 1:调用高德天气接口（key值为自己付费申请的key值），代码如下： /** * 获取天气 * @param {Object} nCity 城市code */ function getWeather(nCity) { var _sWeather = '';
Leaflet地图 - 绘制台风风圈 - 2
dragon_ydl的博客
08-26 1010
leflet 台风 风圈
使用mapbox 绘制台风风圈、台风路径
m0_46478007的博客
09-15 2208
计算台风风圈范围，使用mapbox添加台风播放动画
arcgis for js如何画台风风圈
weixin_30376163的博客
09-05 167
转自：https://blog.csdn.net/leftfist/article/details/78984533#commentBox arcgis for js里面，画一个圆不是什么难事。小的可以用SimpleMarkerSymbol，"style": "esriSMSCircle"； 大的话，直接就来一个new Circle 但是，如果是类似台风风圈这类的呢？ 似...
Leaflet——台风路线展示的封装
陈浩然哦 的博客
04-28 1142
一、首次添加台风展示的八要素（typhoonData：{}） typhoonData.typCheck = false; // 台风显示状态 typhoonData.typhoonNameIcon = null; // 台风名称 typhoonData.lineLayer = null; // 实况路线 typhoonData.circleGroup = null; // 实况路线站点 typhoonData.tf_marke.
画台风图参考
weixin_52910435的博客
05-11 372
描述 界面是右侧切换台风、气压、毫巴、涌、浪等气象， vue文件 <!-- 风 --> <template> <div class="map-wind"> <div class="typhoonDiv"> 台风等级 <div class="bottom"> <ul> <li v-for="(item,key) in typhoonLegendLeft" :ke
leaflet-velocity，leaflet风场流线插件
09-18
leaflet-velocity，leaflet风场流线插件 个人总结的使用方式，希望对你有用 https://blog.csdn.net/qq_35131811/article/details/82761238
2019台风路径-线.kml
07-14
2019年台风路径kml文件，包含台风国际编号、名称、6小时间隔时间、中心最大风速等，能使用google earth直接打开查看。这个是台风移动的路线，前一个上传的是数据点文件。
VML进行地图，描述台风路线
09-02
VML精细地图，描述台风路线 <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>台风路径</title> </head> <STYLE> v\:* { BEHAVIOR: url(#default#VML) } </STYLE>
leaflet-wind.7z
07-01
动态风场特效Demo，包含完整代码和示例数据，下载直接运行可查看效果
2019台风路径-点.kml
07-14
2019年台风路径kml文件，包含台风国际编号、名称、6小时间隔时间、中心最大风速等，能使用google earth直接打开查看
leaflet-ant-path_leaflet_
10-03
此外，“leaflet-ant-path”还支持自定义动画函数，让你可以完全控制路径的绘制过程，以适应各种复杂的需求。 总结起来，“leaflet-ant-path”是Leaflet库的一个强大补充，它使开发者能够轻松创建动态路径效果，...
leaflet-search:在传单地图中搜索内容
04-14
npm install --save leaflet-search 选项 选项 默认 描述 网址 '' 通过ajax请求进行搜索的网址，例如：“ search.php？q = {s}”。 可以用作返回字符串以进行动态参数设置的函数 层 空值 搜索标记所在的图层（是L....
135：vue+leaflet 利用Leaflet-Geoman绘制多种图形，导出为geojson文件
大剑师兰特的GIS世界
11-09 734
第135个本示例的目的是介绍演示如何在vue+leaflet中利用Leaflet-Geoman绘制多种图形，导出为geojson文件。灵活地配置Leaflet-Geoman的属性，可以产生各种美妙的绘图效果。利用FileSaver可以导出geojson文件。
leaflet-draw绘制线段
03-10
Leaflet-draw 是一个基于 Leaflet 的插件，可以帮助用户在地图上绘制各种形状，包括线段、多边形、圆形等等。如果你想要使用 Leaflet-draw 绘制线段，可以先引入 Leaflet 和 Leaflet-draw 的相关文件，然后在地图上添加绘制工具条，最后通过监听绘制事件来获取用户绘制的线段。具体的实现方式可以参考 Leaflet-draw 的官方文档。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值