leaflet实现台风动态轨迹
leaflet平台是我最新使用的webGIS平台，该平台比较轻巧以下是我展示台风动态路径展示
1.首先为大家展示一下动态台风所使用数据
上面中采用标准json格式数据，data数据中，points是对台风36个点的信息，每个点中points存有台风的信息，经度纬度，风力等级，风力强度等信息，按照这些信息和类型对台风进行动态可视化展示。
2.接下来就是台风方法绘制。
我块我是将台风封装成为一个独立的插件，在那个项目中只需要将插件包丢入，New一下台风对象，接入后端数据，就可以对台风进行动态显示，以及对应点的要素点击显示、预测路线显示和清除、都封装成一个完美插件显示，便于项目后期开发，
3.下面这些代码是将台风动态数据全部保存到对应的的接入，然后存到固定的数组中，返回后调用。
//计算出台风所有需要的数据对象
function dataHandler(typhoonTestData) {
//获取台风坐标点数据对象
var forecast = typhoonTestData[0]['points'];
//定义折线点数据的新数组
var polylinePoints = []; //主点线坐标
var radius = {}; //主所有风圈信息、点中信息
var pointlayerImage = {}; //主点图片信息
//台风名称
var typhoonName = typhoonTestData[0].name; //台风name
var typhoonNumber = typhoonTestData[0].tfid; //台风编号
var mainlandForecastList = []; //大陆预测线经纬度
var mainlandForecastinfo = {}; //大陆预测点信息
var japanForecastList = []; //日本预测点经纬度
var japanForecastinfo = {}; //日本预测点信息
var taiwanForecastList = []; //台湾预测点经纬度
var taiwanForecastinfo = {}; //台湾预测点信息
var usaForecastList = []; //美国预测点经纬度
var usaForecastinfo = {}; //美国预测点信息
var hkForecastList = []; //美国预测点经纬度
var hkForecastinfo = {}; //美国预测点信息
//找到经纬度数据，存放在新数组中
for (var i = 0; i < forecast.length; i++) {
var points = forecast[i];
polylinePoints.push([Number(points['lat']), Number(points['lng'])])
var typhoon_Rank_name = points.strong;
var typhoonImage = TyphoonImageRank(typhoon_Rank_name)
radius[i] = {
radius7: points.radius7,
radius10: points.radius10,
radius12: points.radius12,
lat: points.lat,
lng: points.lng,
movedirection: points.movedirection,
movespeed: points.movespeed,
power: points.power,
pressure: points.pressure,
speed: points.speed,
strong: points.strong,
time: points.time,
name: typhoonName,
number: typhoonNumber
}
pointlayerImage[i] = {
icon: L.icon({
iconUrl: typhoonImage,
iconSize: [8, 8]
})
}
//添加预测点线的经纬度
if (i == forecast.length - 1) {
var forecastPointData = forecast[i].forecast
forecastPointData.forEach((item, index, arr) => {
if (item.tm == "中国") {
item.forecastpoints.forEach((item, index) => {
mainlandForecastList.push([Number(item.lat), Number(item.lng)])
mainlandForecastinfo[index] = {
lat: item.lat,
lng: item.lng,
power: item.power,
pressure: item.pressure,
speed: item.speed,
strong: item.strong,
time: item.time,
tm: "中国",
name: typhoonName,
number: typhoonNumber
};
});
} else {
if (item.tm == "日本") {
item.forecastpoints.forEach((item, index) => {
japanForecastList.push([Number(item.lat), Number(item.lng)])
japanForecastinfo[index] = {
lat: item.lat,
lng: item.lng,
power: item.power,
pressure: item.pressure,
speed: item.speed,
strong: item.strong,
time: item.time,
tm: "日本",
name: typhoonName,
number: typhoonNumber
};
});
} else {
if (item.tm == "美国") {
item.forecastpoints.forEach((item, index) => {
usaForecastList.push([Number(item.lat), Number(item.lng)])
usaForecastinfo[index] = {
lat: item.lat,
lng: item.lng,
power: item.power,
pressure: item.pressure,
speed: item.speed,
strong: item.strong,
time: item.time,
tm: "美国",
name: typhoonName,
number: typhoonNumber
};
});
} else {
if (item.tm == "中国台湾") {
item.forecastpoints.forEach((item, index) => {
taiwanForecastList.push([Number(item.lat), Number(item.lng)])
taiwanForecastinfo[index] = {
lat: item.lat,
lng: item.lng,
power: item.power,
pressure: item.pressure,
speed: item.speed,
strong: item.strong,
time: item.time,
tm: "中国台湾",
name: typhoonName,
number: typhoonNumber
};
});
} else {
if (item.tm == "中国香港") {
item.forecastpoints.forEach((item, index) => {
hkForecastList.push([Number(item.lat), Number(item.lng)])
hkForecastinfo[index] = {
lat: item.lat,
lng: item.lng,
power: item.power,
pressure: item.pressure,
speed: item.speed,
strong: item.strong,
time: item.time,
tm: "中国香港",
name: typhoonName,
number: typhoonNumber
};
});
}
}
}
}
}
});
}
}
var info = {
polylinePoints: polylinePoints,
radius: radius,
pointlayerImage: pointlayerImage,
typhoonName: typhoonName,
typhoonNumber: typhoonNumber,
mainlandForecastList: mainlandForecastList,
mainlandForecastinfo: mainlandForecastinfo,
japanForecastList: japanForecastList,
japanForecastinfo: japanForecastinfo,
taiwanForecastList: taiwanForecastList,
taiwanForecastinfo: taiwanForecastinfo,
usaForecastList: usaForecastList,
usaForecastinfo: usaForecastinfo,
hkForecastList: hkForecastList,
hkForecastinfo: hkForecastinfo
};
return info;
};
4.然后根据固定的路径以及台风状态信息对台风进行不同颜色显示，各位博友可以根据自己开发设计进行配置台风颜色，一定要按照自己路径接入台风图片奥
function TyphoonImageRank(typhoon_Rank_name) { var typhoon_point_image = ""; switch (typhoon_Rank_name) { case "热带风暴": typhoon_point_image = "img/typhoonimage/typhoon/Tropical_Storm_Point_image.png"; break; case "台风": typhoon_point_image = "img/typhoonimage/typhoon/Typhoon_Point_image.png"; break; case "强台风": typhoon_point_image = "img/typhoonimage/typhoon/Violent_Typhoon_Point_image.png"; break; case "超强台风": typhoon_point_image = "img/typhoonimage/typhoon/Super_Typhoon_Point_image.png"; break; case "强热带风暴": typhoon_point_image = "img/typhoonimage/typhoon/Server_Tropical_Storm_Point_image.png"; break; case "热带低压": typhoon_point_image = "img/typhoonimage/typhoon/Tropical_Depression_Point_image.png"; break; default: typhoon_point_image = "img/typhoonimage/typhoon/Typhoon_Point_image.png"; } return typhoon_point_image; }
5.准备好数据准备好，图片就可以写台风啦，台风采用定时器方法加载，数组遍历的形式加载台风。
export var typhoon = function(map, L, typhoonNum, typhoonTestData, AgencyIsShow)
由于上面这个方法进行说明一下，由于采用Vue框架，地图容器采用传入方式，没有使用全局，前两个就是地图容器所需，第三个参数是台风编号信息，在我这个方法中没有用到编号，因为我的数据里面本来就有编号信息，第四个参数是台风的所以数据，
第五个参数是是否显示那个预测路径，我这边做了五条台风路径信息，中国、中国台湾、日本、中国香港、美国预测机构等五种机构，如果项目后期要加入其他机构，其实也挺好加的，看懂我的代码就可以啦，已将弹窗效果弄好只需要按照对应方法配置数据就可以了。
export var typhoon = function(map, L, typhoonNum, typhoonTestData, AgencyIsShow) {
var Agency = AgencyIsShow
var typhoon = {}
var typhoonList = []; // 已经加载的台风路径数组
// 全部扇形对象
var primitives = {}
var tyPrimitives = [];
var myLayerGroupline = new L.LayerGroup(); //主点线清除方法
var myLayerGrouppoint = new L.LayerGroup(); //主点清除方法
var myLayerGroupmode = new L.LayerGroup(); //模型标签
var myLayerchinaforceline = new L.LayerGroup(); //中国预测线段
var myLayerchinaforcepoint = new L.LayerGroup(); //中国预测线点
var myLayerjapanforcepoint = new L.LayerGroup(); //日本预测点
var myLayerjapanforceline = new L.LayerGroup(); //日本预测线
var myLayertaiwanforcepoint = new L.LayerGroup(); //台湾预测点
var myLayertaiwanforceline = new L.LayerGroup(); //台湾预测线
var myLayerAmericanforcepoint = new L.LayerGroup(); //美国预测点
var myLayerAmericanforceline = new L.LayerGroup(); //美国预测线
var myLayerHKforcepoint = new L.LayerGroup(); //香港预测点
var myLayerHKforceline = new L.LayerGroup(); //香港预测线
var timer
typhoonList = {
myLayerGroupline: myLayerGroupline,
myLayerGrouppoint: myLayerGrouppoint,
myLayerGroupmode: myLayerGroupmode,
myLayerchinaforceline: myLayerchinaforceline,
myLayerchinaforcepoint: myLayerchinaforcepoint,
myLayerjapanforcepoint: myLayerjapanforcepoint,
myLayerjapanforceline: myLayerjapanforceline,
myLayertaiwanforcepoint: myLayertaiwanforcepoint,
myLayertaiwanforceline: myLayertaiwanforceline,
myLayerAmericanforcepoint: myLayerAmericanforcepoint,
myLayerAmericanforceline: myLayerAmericanforceline,
myLayerHKforcepoint: myLayerHKforcepoint,
myLayerHKforceline: myLayerHKforceline
}
var TyphoonAllInfo = dataHandler(typhoonTestData)
var allpoints = TyphoonAllInfo.polylinePoints;
var polyline = L.polyline(allpoints, { color: "#00BFFF" }).addTo(map);
map.fitBounds(polyline.getBounds());
map.removeLayer(polyline);
var pointlayerImage = TyphoonAllInfo.pointlayerImage;
var radius = TyphoonAllInfo.radius;
var typhoonNumber = TyphoonAllInfo.typhoonNumber;
var typhoonName = TyphoonAllInfo.typhoonName;
var mainlandForecastList = TyphoonAllInfo.mainlandForecastList;
var mainlandForecastinfo = TyphoonAllInfo.mainlandForecastinfo;
var japanForecastList = TyphoonAllInfo.japanForecastList;
var japanForecastinfo = TyphoonAllInfo.japanForecastinfo;
var taiwanForecastList = TyphoonAllInfo.taiwanForecastList;
var taiwanForecastinfo = TyphoonAllInfo.taiwanForecastinfo;
var usaForecastList = TyphoonAllInfo.usaForecastList;
var usaForecastinfo = TyphoonAllInfo.usaForecastinfo;
var hkForecastList = TyphoonAllInfo.hkForecastList;
var hkForecastinfo = TyphoonAllInfo.hkForecastinfo;
animateDrawLine()
//动态绘制折线
function animateDrawLine() {
myLayerGroupline.clearLayers();
myLayerGrouppoint.clearLayers();
myLayerGroupmode.clearLayers();
myLayerchinaforceline.clearLayers();
myLayerchinaforcepoint.clearLayers();
myLayerjapanforcepoint.clearLayers();
myLayerjapanforceline.clearLayers();
myLayertaiwanforcepoint.clearLayers();
myLayertaiwanforceline.clearLayers();
myLayerAmericanforcepoint.clearLayers();
myLayerAmericanforceline.clearLayers();
myLayerHKforcepoint.clearLayers();
myLayerHKforceline.clearLayers();
// var marker
var markermode
var lineLayer
var pointLayer
var labellayer
var length = allpoints.length;
//定义用来存放递增元素的经纬度数据
var drawPoints = [];
var count = 0;
var typhoonIcon = L.icon({
iconUrl: 'img/typhoon.png',
iconSize: [28, 28],
// iconAnchor: [15, 15]
});
//添加台风编号
var typhoonIconfirst = L.icon({
iconUrl: 'img/blankImage.png',
iconSize: [1, 1]
});
labellayer = L.marker([radius[0].lat, radius[0].lng], {
icon: typhoonIconfirst,
title: "我是谁",
riseOnHover: true,
keyboard: true
}).bindTooltip(typhoonNumber + "-" + typhoonName, {
direction: 'right',
offset: [10, 0],
permanent: true,
opacity: "1",
className: "labelName"
}).openTooltip();
myLayerGrouppoint.addLayer(labellayer);
map.addLayer(myLayerGrouppoint);
//定时器100ms，动态的塞入坐标数据
timer = setInterval(
function() {
//循环台风路径中的每个点，设置定时器依次描绘
if (count < length) {
drawPoints.push(allpoints[count]);
count++;
//清除之前绘制的折线图层
if (lineLayer && count !== length) {
map.removeLayer(lineLayer);
lineLayer = null;
}
//清除之前的marker图层
if (markermode && count !== length) {
map.removeLayer(markermode);
markermode = null;
}
if (tyPrimitives.length != 0) {
romovecircle()
}
//最新数据点drawPoints绘制折线
lineLayer = L.polyline(drawPoints, { color: "#00BFFF" })
myLayerGroupline.addLayer(lineLayer);
map.addLayer(myLayerGroupline);
//根据最新的数据组最后一个绘制marker
if (count === length) {
map.removeLayer(markermode);
// drawForecastPointLine()
if (Agency.中国 == true)
drawForecastChinaPointLine()
if (Agency.中国台湾 == true)
drawForecastTaiWanPointLine()
if (Agency.日本 == true)
drawForecastJapanPointLine()
if (Agency.美国 == true)
drawForecastUSAPointLine()
if (Agency.中国香港 == true)
drawForecastHKPointLine()
drawSingleCircle(drawPoints[count - 1], count - 1)
pointLayer = L.marker(drawPoints[count - 1], { icon: pointlayerImage[count - 1].icon });
myLayerGrouppoint.addLayer(pointLayer);
map.addLayer(myLayerGrouppoint);
//如果是路径最后一个点，自动弹出信息框
markermode = L.marker(drawPoints[length - 1], {
icon: L.divIcon({
className: "dIcon",
html: `<div class="live"><img src="img/typhoon.png"></div>`,
iconSize: [15, 15]
})
}).bindPopup(
getTyphoonInfoHtml(radius[count - 1], "主点"), {
offset: [0, -120],
className: "typhoonInfo"
}
).closePopup();
myLayerGroupmode.addLayer(markermode);
map.addLayer(myLayerGroupmode);
} else {
drawSingleCircle(drawPoints[count - 1], count)
pointLayer = L.marker(drawPoints[count - 1], {
icon: pointlayerImage[count - 1].icon,
title: "我是谁",
riseOnHover: true,
keyboard: true
}).bindPopup(
getTyphoonInfoHtml(radius[count - 1], "主点"), {
offset: [0, -120],
className: "typhoonInfo"
}
).closePopup();
myLayerGrouppoint.addLayer(pointLayer);
map.addLayer(myLayerGrouppoint);
//取已绘制点数组中最后一个点，放置台风标志
markermode = L.marker(drawPoints[count - 1], {
icon: typhoonIcon
});
myLayerGroupmode.addLayer(markermode);
map.addLayer(myLayerGroupmode);
}
} else {
//取完数据后清除定时器
clearInterval(timer);
}
}, 50);
}
//返回台风中样式html
function getTyphoonInfoHtml(info, Pointtype) {
var html = ``;
if (Pointtype == "主点") {
var radius7 = info.radius7.split('|')
var radius10 = info.radius10.split('|')
var radius12 = info.radius12.split('|')
html = ` <div class="typhone_info">
<div class="flex info_title">
<h3>${info.number}-${info.name}</h3>
</div>
<ul class="info_list">
<li>
<span>过去时间</span>
<p>${info.time}</p>
</li>
<li>
<span>中心位置</span>
<p>${info.lng}°E，${info.lat}°N</p>
</li>
<li>
<span>最大风力</span>
<p>${info.strong}</p>
</li>
<li>
<span>最大风速</span>
<p>${info.speed!=""?info.speed:"0"} 米/秒</p>
</li>
<li>
<span>中心气压</span>
<p>${info.pressure!=""?info.pressure:"0"} 百帕</p>
</li>
<li class="info_forecast">
<span>移动速度</span>
<p>${info.speed!=""?info.speed:"0"}公里/小时</p>
</li>
<li class="info_forecast">
<span>移动方向</span>
<p>${info.movedirection}</p>
</li>
</ul>
<ul class="typhoon_circle">
<li class="circle_item">
<div class="circle_flag"><span>7</span>级风圈 (km)</div>
<ol class="circle_detail flex">
<li><span>${radius7[0] ? radius7[0] : '--'}</span><p>东北</p></li>
<li><span>${radius7[1] ? radius7[1] : '--'}</span><p>东南</p></li>
<li><span>${radius7[2] ? radius7[2] : '--'}</span><p>西北</p></li>
<li><span>${radius7[3] ? radius7[3] : '--'}</span><p>西南</p></li>
</ol>
</li>
<li class="circle_item">
<div class="circle_flag"><span>10</span>级风圈 (km)</div>
<ol class="circle_detail flex">
<li><span>${radius10[0] ? radius10[0] : '--'}</span><p>东北</p></li>
<li><span>${radius10[1] ? radius10[1] : '--'}</span><p>东南</p></li>
<li><span>${radius10[2] ? radius10[2] : '--'}</span><p>西北</p></li>
<li><span>${radius10[3] ? radius10[3] : '--'}</span><p>西南</p></li>
</ol>
</li>
<li class="circle_item">
<div class="circle_flag"><span>12</span>级风圈 (km)</div>
<ol class="circle_detail flex">
<li><span>${radius12[0] ? radius12[0] : '--'}</span><p>东北</p></li>
<li><span>${radius12[1] ? radius12[1] : '--'}</span><p>东南</p></li>
<li><span>${radius12[2] ? radius12[2] : '--'}</span><p>西北</p></li>
<li><span>${radius12[3] ? radius12[3] : '--'}</span><p>西南</p></li>
</ol>
</li>
</ul>
</div>`;
} else {
html = `<div class="typhone_info">
<div class="flex info_title">
<h3>${info.number}-${info.name}</h3>
</div>
<ul class="info_list">
<li class="info_organ">
<span>预报机构</span>
<p>${info.tm}</p>
</li>
<li>
<span>预计时间</span>
<p>${info.time}</p>
</li>
<li>
<span>中心位置</span>
<p>${info.lng}°E，${info.lat}°N</p>
</li>
<li>
<span>最大风力</span>
<p>${info.strong}</p>
</li>
<li>
<span>最大风速</span>
<p>${info.speed!=""?info.speed:"0"} 米/秒</p>
</li>
<li>
<span>中心气压</span>
<p>${info.pressure!=""?info.pressure:"0"} 百帕</p>
</li>
</ul>
</div>`;
}
return html;
}
//清除单个风圈
function romovecircle() {
for (var j = 0; j < tyPrimitives.length; j++) {
map.removeLayer(tyPrimitives[j]);
}
tyPrimitives = [];
}
//绘制中国预测点和线
function drawForecastChinaPointLine() {
var chinaforceline = L.polyline(mainlandForecastList, { weight: 2, className: 'mainlandtestSvg', opacity: 0.5 });
myLayerchinaforceline.addLayer(chinaforceline);
map.addLayer(myLayerchinaforceline);
mainlandForecastList.forEach((item, index) => {
if (index != 0) {
var strong = mainlandForecastinfo[index].strong;
var Image = TyphoonImageRank(strong)
var forcePointImage = L.icon({
iconUrl: Image,
iconSize: [8, 8]
});
var mainlandforcePoint = L.marker(item, { icon: forcePointImage }).bindPopup(
getTyphoonInfoHtml(mainlandForecastinfo[index], "预测点")
, {
offset: [0, -30],
className: "typhoonForecastInfo"
}
).closePopup()
myLayerchinaforcepoint.addLayer(mainlandforcePoint);
map.addLayer(myLayerchinaforcepoint);
}
});
}
//绘制日本预测点和线
function drawForecastJapanPointLine() {
var japanforceline = L.polyline(japanForecastList, { weight: 2, className: 'japantestSvg', opacity: 0.5 });
myLayerjapanforceline.addLayer(japanforceline);
map.addLayer(myLayerjapanforceline);
japanForecastList.forEach((item, index) => {
if (index != 0) {
var strong = japanForecastinfo[index].strong;
var Image = TyphoonImageRank(strong)
var forcePointImage = L.icon({
iconUrl: Image,
iconSize: [8, 8]
});
var japanPoint = L.marker(item, { icon: forcePointImage }).bindPopup(
getTyphoonInfoHtml(japanForecastinfo[index], "预测点"), {
offset: [0, -30],
className: "typhoonForecastInfo"
}
).closePopup();
myLayerjapanforcepoint.addLayer(japanPoint);
map.addLayer(myLayerjapanforcepoint);
}
});
}
function drawForecastUSAPointLine() {
var Americanforceline = L.polyline(usaForecastList, { weight: 2, className: 'usatestSvg', opacity: 0.5 });
myLayerAmericanforceline.addLayer(Americanforceline);
map.addLayer(myLayerAmericanforceline);
usaForecastList.forEach((item, index) => {
if (index != 0) {
var strong = usaForecastinfo[index].strong;
var Image = TyphoonImageRank(strong)
var forcePointImage = L.icon({
iconUrl: Image,
iconSize: [8, 8]
});
var usaPoint = L.marker(item, { icon: forcePointImage }).bindPopup(
getTyphoonInfoHtml(usaForecastinfo[index], "预测点")
, {
offset: [0, -30],
className: "typhoonForecastInfo"
}
).closePopup();
myLayerAmericanforcepoint.addLayer(usaPoint);
map.addLayer(myLayerAmericanforcepoint);
}
});
}
function drawForecastTaiWanPointLine() {
var taiwanforceline = L.polyline(taiwanForecastList, { weight: 2, className: 'taiwantestSvg', opacity: 0.5 });
myLayertaiwanforceline.addLayer(taiwanforceline);
map.addLayer(myLayertaiwanforceline);
taiwanForecastList.forEach((item, index) => {
if (index != 0) {
var strong = taiwanForecastinfo[index].strong;
var Image = TyphoonImageRank(strong)
var forcePointImage = L.icon({
iconUrl: Image,
iconSize: [8, 8]
});
var taiwanPoint = L.marker(item, { icon: forcePointImage }).bindPopup(
getTyphoonInfoHtml(taiwanForecastinfo[index], "预测点")
, {
offset: [0, -30],
className: "typhoonForecastInfo"
}
).closePopup();
myLayertaiwanforcepoint.addLayer(taiwanPoint);
map.addLayer(myLayertaiwanforcepoint);
}
});
}
function drawForecastHKPointLine() {
var HKforceline = L.polyline(hkForecastList, { weight: 2, className: 'HKtestSvg', opacity: 0.5 });
myLayerHKforceline.addLayer(HKforceline);
map.addLayer(myLayerHKforceline);
hkForecastList.forEach((item, index) => {
if (index != 0) {
var strong = hkForecastinfo[index].strong;
var Image = TyphoonImageRank(strong)
var forcePointImage = L.icon({
iconUrl: Image,
iconSize: [8, 8]
});
var HKPoint = L.marker(item, { icon: forcePointImage }).bindPopup(
getTyphoonInfoHtml(hkForecastinfo[index], "预测点")
, {
offset: [0, -30],
className: "typhoonForecastInfo"
}
).closePopup();
myLayerHKforcepoint.addLayer(HKPoint);
map.addLayer(myLayerHKforcepoint);
}
});
}
//绘制单个风圈（7，10，12级）
function drawSingleCircle(latlng, count) {
var radius7 = radius[count].radius7;
var radius10 = radius[count].radius10;
var radius12 = radius[count].radius12;
var radius7 = radius7.split('|')
var radius10 = radius10.split('|')
var radius12 = radius12.split('|')
//绘制七级风圈
if (radius7.length > 1) {
var radiusNorthEast7 = radius7[0] / 100
var radiusSouthEast7 = radius7[1] / 100
var radiusNorthWast7 = radius7[2] / 100
var radiusSouthWest7 = radius7[3] / 100
var primitiveFill = new setvisible(latlng, radiusNorthEast7, "NorthEast", "green")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusSouthEast7, "SouthEast", "green")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusNorthWast7, "NorthWest", "green")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusSouthWest7, "SouthWest", "green")
tyPrimitives.push(primitiveFill);
}
//绘制十级风圈
if (radius10.length > 1) {
var radiusNorthEast10 = radius10[0] / 100
var radiusSouthEast10 = radius10[1] / 100
var radiusNorthWast10 = radius10[2] / 100
var radiusSouthWest10 = radius10[3] / 100
primitiveFill = new setvisible(latlng, radiusNorthEast10, "NorthEast", "pink")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusSouthEast10, "SouthEast", "pink")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusNorthWast10, "NorthWest", "pink")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusSouthWest10, "SouthWest", "pink")
tyPrimitives.push(primitiveFill);
}
if (radius12.length > 1) {
//绘制十二级风圈
var radiusNorthEast12 = radius12[0] / 100
var radiusSouthEast12 = radius12[1] / 100
var radiusNorthWast12 = radius12[2] / 100
var radiusSouthWest12 = radius12[3] / 100
primitiveFill = new setvisible(latlng, radiusNorthEast12, "NorthEast", "red")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusSouthEast12, "SouthEast", "red")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusNorthWast12, "NorthWest", "red")
tyPrimitives.push(primitiveFill);
primitiveFill = new setvisible(latlng, radiusSouthWest12, "SouthWest", "red")
tyPrimitives.push(primitiveFill);
}
}
//绘制台风风圈方法
var setvisible = function(latlng, semiMinorAxis, anglex, color) {
var anglexdirection = {
NorthEast: [0, 90],
SouthEast: [90, 180],
SouthWest: [180, 270],
NorthWest: [270, 360]
};
var points3 = getPoints(latlng, semiMinorAxis, anglexdirection[anglex][0], anglexdirection[anglex][1], 1000);
var primitiveFill = new L.polygon(points3, {
color: color,
fillColor: color,
fillOpacity: 0.4,
opacity: 0.4,
weight: 1,
smoothFactor: 0,
stroke: false,
}).addTo(map);
return primitiveFill;
function getPoints(center, radius, startAngle, endAngle, pointNum) {
var sin;
var cos;
var x;
var y;
var angle;
var points = new Array();
points.push(center);
for (var i = 0; i <= pointNum; i++) {
angle = startAngle + (endAngle - startAngle) * i / pointNum;
sin = Math.sin(angle * Math.PI / 180);
cos = Math.cos(angle * Math.PI / 180);
y = center[0] + radius * cos;
x = center[1] + radius * sin;
points[i] = [y, x];
}
var point = points;
point.push(center);
return point;
}
}
typhoon.deleteTyphoon = function() {
clearInterval(timer);
romovecircle()
myLayerGroupline.clearLayers();
myLayerGrouppoint.clearLayers();
myLayerGroupmode.clearLayers();
myLayerchinaforceline.clearLayers();
myLayerjapanforceline.clearLayers();
myLayertaiwanforceline.clearLayers();
myLayerAmericanforceline.clearLayers();
myLayerchinaforcepoint.clearLayers();
myLayertaiwanforcepoint.clearLayers();
myLayerAmericanforcepoint.clearLayers();
myLayerjapanforcepoint.clearLayers();
myLayerHKforcepoint.clearLayers();
myLayerHKforceline.clearLayers();
}
/**
* 预测路线是否显示
*/
typhoon.forecastingAgencyIsShow = function(agency, isShow) {
switch (agency) {
case '中国':
if (isShow === true) {
drawForecastChinaPointLine()
} else {
myLayerchinaforceline.clearLayers();
myLayerchinaforcepoint.clearLayers();
}
break
case '日本':
if (isShow === true) {
drawForecastJapanPointLine()
} else {
myLayerjapanforceline.clearLayers();
myLayerjapanforcepoint.clearLayers();
}
break
case '美国':
if (isShow === true) {
drawForecastUSAPointLine()
} else {
myLayerAmericanforcepoint.clearLayers();
myLayerAmericanforceline.clearLayers();
}
break
case '中国台湾':
if (isShow === true) {
drawForecastTaiWanPointLine()
} else {
myLayertaiwanforceline.clearLayers();
myLayertaiwanforcepoint.clearLayers();
}
break
case '中国香港':
if (isShow === true) {
drawForecastHKPointLine()
} else {
myLayerHKforcepoint.clearLayers();
myLayerHKforceline.clearLayers();
}
break
}
}
/**
* 是否重播
*/
typhoon.Replay = function(AgencyIsShow) {
Agency = AgencyIsShow;
this.deleteTyphoon();
animateDrawLine()
}
return typhoon;
}
上面就是台风路径全部代码啦，稍微配置一下就可以用啦
里面台风fengazhuang
6.以下就是台风效果啦
版权声明：本文为zhuyugang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。