Leaflet地图 -- 绘制台风风圈

L.Typhoon类中，两个最核心方法：一个是计算风圈四个方向半径，一个是绘制台风风圈：基于SVG的path元素来实现的，下面是代码：

核心代码
亨达外汇http://www.fx61.com/brokerlis...

计算风圈半径：台风中心经纬度和半径计算屏幕坐标

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 ""

全部代码

(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},