Leaflet地图 -- 绘制台风风圈

逻辑流光
• 阅读 2608

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

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)

}

})();

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分1、简单圆形效果图如下:!(http://static.oschina.net/uploads/space/2016/0223/221143_UhEK_2619189.png)关键代码:<svg xmlns"http://www.w3.org/2000/svg" version"1.1
Stella981 Stella981
3年前
SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分1、简单圆形效果图如下:!(http://static.oschina.net/uploads/space/2016/0223/221143_UhEK_2619189.png)关键代码:<svg xmlns"http://www.w3.org/2000/svg" version"1.1
Stella981 Stella981
3年前
SVG绘制饼状图
SVG绘制饼状图昨天学习了基本的SVG,下面是使用SVG绘制饼状图创建SVG空间创建SVG需要一个document.createElementNS()方法一个一个setAttribute()方法编写如下js,将会创建一个svg空间//创建一个XML命名空间varsvgns"http:
Easter79 Easter79
3年前
SVG绘制饼状图
SVG绘制饼状图昨天学习了基本的SVG,下面是使用SVG绘制饼状图创建SVG空间创建SVG需要一个document.createElementNS()方法一个一个setAttribute()方法编写如下js,将会创建一个svg空间//创建一个XML命名空间varsvgns"http:
Stella981 Stella981
3年前
SVG 绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。
Stella981 Stella981
3年前
LeafLet 简单使用
Leaflet使用最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet,简单介绍一下。介绍:Leaflet是一个为移动设备设计的交互式地图的开源的javascript库,并只有38k,包含了大多数开发者需要的地图特点。准备:下载leaflet文件
Easter79 Easter79
3年前
SVG 绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。
Stella981 Stella981
3年前
DataGear 轻松制作支持图表联动的全国地图、省级地图数据可视化看板
DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.datagear.tech)看板的图表联动功能,使您可以轻松制作支持图表联动的全国地图、省级地图数据可视化看板。首先,新建两个数据集。第一个是各省指标数据集,将用于绘制全国指标图表,它的SQL语句如下
Easter79 Easter79
3年前
SVG 如何绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。
Stella981 Stella981
3年前
SVG 如何绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。
Wesley13 Wesley13
3年前
12、开源游戏
在前面中我们初始化了游戏的资源,这次我们来说下地图的绘制和游戏主循环设计。地图绘制    以前说过地图是用tiled画好,导出为图片形式的,所以地图的绘制,就是把这个图片绘制到canvas的过程。这样绘制地图就简单了,使用drawImage方法绘制即可。    这里有个2问题,1是地图的大小一般肯定是大于canvas的,所以我们只是把地图