无极低码 :https://wheart.cn
全国天气实况温度气压降水风速地图标注等值面绘制风流场洋流场显示
实现效果
编辑

全国气象实况实时温度降水气压风速风场洋流地图GIS可视化效果
类似的网站编辑
编辑
1.地图初始化
1.1图层定义
gadeomap = L.tileLayer(
'//webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}&<ype={s}', {
subdomains: "0123456789",
preferCanvas: true,
maxZoom: 21,
minZoom: 5,
}),
gaodeyingxiang = L.layerGroup([L.tileLayer(
'//webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
subdomains: "1234",
preferCanvas: true
})]),
google = L.tileLayer('https://wayback.maptiles.arcgis.com/arcgis/rest/services/world_imagery/wmts/1.0.0/default028mm/mapserver/tile/45441/{z}/{y}/{x}', {
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
}),
map1 = L.tileLayer("https://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}", {
subdomains: '1',
name: '街道'
}),
PurplishBlue = L.tileLayer("https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}", {
subdomains: '1',
maxZoom: 23,
minZoom: 5,
}),
arcgisSat = L.tileLayer("//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
subdomains: '1',
}),
/* 影像 */
tiandiyingxiang = L.tileLayer("http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0", {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
});
var baiduLayer = L.tileLayer('//maponline3.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=sl&v=083&udt=20240805&scaler=1&showtext=1', {
maxZoom: 18,
subdomains: [0, 1, 2, 3]
});
1.2设置图层组
var baseLayers = {
"高德地图": gadeomap,
'高德影像': gaodeyingxiang,
"arcgis历史影像": google,
"arcgis街道": map1,
"arcgis地形": PurplishBlue,
"arcgis影像图": arcgisSat,
"腾讯地图": tiandiyingxiang
};
1.3设置地图参数,初始化地图
L.control.layers(baseLayers).addTo(map);
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '缩小'
}).addTo(map);
1.4为地图添加图层
var map = L.map("map", {
/* crs: baiduCRS, */
center: [36.068402, 103.840524],
zoom: 8,
layers: [arcgisSat],
zoomControl: false,
});
1.5自定义地图缩放控件名称
L.control.layers(baseLayers).addTo(map);
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '缩小'
}).addTo(map);
2.加载洋流动画
2.1定义洋流控制参数
var palywind = false,
palywindOC = false,
velocityLayerOC
2.2加载洋流数据
$.getJSON("xxx.json", function(data) {
velocityLayerOC = L.velocityLayer({
displayValues: true,
displayOptions: {
velocityType: "洋流",
displayPosition: "bottomleft",
displayEmptyString: "No water data",
color: "#EEE",
angleConvention: "CNN",
speedUnit: "m/s"
},
data: data,
maxVelocity: 10,
velocityScale: 0.1,
colorScale: ["rgb(171,204,254)", "rgb(85,152,253)", "rgb(2,102,253)", "rgb(2,68,166)",
"rgb(1,37,90)"
],
particleAge: 100,
particleMultiplier: 1 / 20,
lineWidth: 1,
frameRate: 60
});
});
2.3添加html控件
var popup = L.popup();
function onMapClick(e) {
var htmlOut = "",
html = "";
if (velocityLayerOC._windy != null) {
gridValue = velocityLayerOC._windy.interpolatePoint(e.latlng.lng, e.latlng.lat);
if (gridValue && !isNaN(gridValue[0]) && !isNaN(gridValue[1]) && gridValue[2]) {
html = "<br/><span style='color:#000'><strong>" + velocityLayerOC.options
.displayOptions.velocityType + " 方向: </strong>" + _wwpwind.windDend(_wwpwind.vectorToDegrees(gridValue[0],
gridValue[1], velocityLayerOC.options.displayOptions.angleConvention).toFixed(2)) + "°" +
", <strong>" + velocityLayerOC
.options.displayOptions.velocityType + " 速度: </strong>" + _wwpwind.vectorToSpeed(gridValue[0], gridValue[
1],
velocityLayerOC.options.displayOptions.speedUnit).toFixed(2) + velocityLayerOC.options.displayOptions
.speedUnit + "</span>";
popup.setLatLng(e.latlng)
.setContent("当前位置:" + html)
.openOn(map);
}
}
3.加载风场动画
3.1定义风场控制参数
var velocityLayerOC, velocityLayerWD, tempLayer, palyLayer, humLayer, windsLayer;
var palywind = false,
palywindOC = false,
palyTem = false,
palyRain, palyHum, palyWinds;
3.2加载风场数据
$.getJSON("xx.json", function(json) {
velocityLayerWD = L.velocityLayer({
displayValues: true,
displayOptions: {
velocityType: "风场",
displayPosition: "bottomleft",
displayEmptyString: "No wind data",
angleConvention: "CNN",
color: "#EEE",
speedUnit: "m/s"
},
data: json,
maxVelocity: 10,
velocityScale: 0.01,
colorScale: ["rgb(248,176,112)", "rgb(242,122,13)", "rgb(252,28,10)"],
frameRate: 60
});
});
3.3添加html控件
if (velocityLayerWD._windy != null) {
gridValue1 = velocityLayerWD._windy.interpolatePoint(e.latlng.lng, e.latlng.lat);
if (gridValue1 && !isNaN(gridValue1[0]) && !isNaN(gridValue1[1]) && gridValue1[2]) {
html += "<br/><span style='color:#000'><strong>" + velocityLayerWD.options
.displayOptions.velocityType + " 方向: </strong>" + _wwpwind.windDend(_wwpwind.vectorToDegrees(gridValue1[
0],
gridValue1[1], velocityLayerWD.options.displayOptions.angleConvention).toFixed(2)) + "°" +
", <strong>" + velocityLayerWD
.options.displayOptions.velocityType + " 速度: </strong>" + _wwpwind.vectorToSpeed(gridValue1[0],
gridValue1[1],
velocityLayerWD.options.displayOptions.speedUnit).toFixed(2) + velocityLayerWD.options.displayOptions
.speedUnit + "</span>";
popup.setLatLng(e.latlng)
.setContent("当前位置:" + html)
.openOn(map);
}
}
4.地图标注pop显示风力值
4.1为点击地图的事件 增加popup
map.on('click', onMapClick);
5.获取等值面站点数据
5.1获取全国6要素站点数据
ajax({
method: 'GET',
url: '获取数据',
async: true,
success: function(response) {
var rs = JSON.parse(response).data;
//解析数据
}
})
5.2数据解析
var list = rs.contours;
var m;
var ls = [];
var a;
for (var i = 0; i < list.length; i++) {
a = list[i];
m = {
rain: a[12],
temp: a[19],
ws: a[7],
wd: a[6],
pressure: a[8],
pname: a[27],
lat: a[2],
lng: a[1]
};
comdata.push(m);
5.3自定义标注点
var myIcon = L.divIcon({
html: "<div style='" + ((m.rain > 0 && m.rain != 9999) > 0 ? "background:blue;width:55px;border-radius:15px'" : "'") + ">" + ((m.rain > 0 && m.rain != 9999) ? m.rain + "mm" : m.temp + "℃") + "</div>",
className: getClassName("rain"),
});
5.2添加鼠标滑过事件
divm.on('mouseover', function(e) {
this.openPopup();
});
5.3自定义标注点样式
function getClassName(x) {
switch (x) {
case "rain":
return 'my-div-icon';
case "temp":
return 'leaflet-div-icon';
case "hum":
return 'leaflet-div-icon';
case "pressure":
return 'leaflet-div-icon';
case "wind":
return 'leaflet-div-icon';
}
};
6.显示聚合标注点
6.1创建一个自定义聚合图层
var clusterLayer = L.markerClusterGroup({
iconCreateFunction: function(cluster) {
var markers = cluster.getAllChildMarkers();
},
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
maxClusterRadius: 30,
disableClusteringAtZoom: 18
});
6.2获取每个标记点的属性值
/* 获取每个标记点的属性值 */
var values = markers.map(function(marker) {
return marker.options.value;
});
6.3创建自定义聚合标记图标
/* 创建自定义聚合标记图标 */
return L.divIcon({
html: '<div class="cluster-marker">' + values + '</div>',
className: 'cluster',
iconSize: L.point(40, 40)
});
6.4添加聚合点图层
clusterLayer.addLayers(ls);
map.addLayer(clusterLayer);
7.实现等值面显示
7.1定义等值面控制参数
var velocityLayerOC, velocityLayerWD, tempLayer, palyLayer, humLayer, windsLayer;
var palywind = false,
palywindOC = false,
palyTem = false,
palyRain, palyHum, palyWinds;
7.2定义控制等值面图层方法
温度、降水、风速、气压
document.addEventListener("DOMContentLoaded", function() {
var btnList = document.querySelector('.btnList');
btnList.addEventListener('click', function(event) {
var clickedLi = event.target.closest('li');
if (clickedLi) {
switch (clickedLi.dataset.type) {
case 'radar':
showRadar();
break;
case 'cloudy':
showCloudy();
break;
case 'windSite':
showWind();
break;
case 'ocSite':
showOC();
break;
case 'rain':
showRain();
break;
case 'temp':
showTemp();
break;
case 'humidity':
showHum();
break;
case 'wind':
showWinds();
break;
}
}
});
});
7.3定义清除图层方法
function clearAll() {
if (palyTem) map.removeLayer(tempLayer);
if (palyRain) map.removeLayer(rainLayer);
if (palyHum) map.removeLayer(humLayer);
if (palyWinds) map.removeLayer(windsLayer);
}
7.4数据计算和处理
calculateMinMax()
7.5等值面参数初始化
initRain();
initTemp();
initHum();
initWinS();
无极低码 :https://wheart.cn
-
2024-10-12 08:59:22.0
可视化,大数据,gis
-
2024-08-29 08:44:47.0
GIS,leafletjs,js,地图,可视化,百度,高德
-
2024-08-26 11:41:05.0
三维,模型,glft,无极低码
-
2024-04-20 08:51:41.0
echart,js,可视化,前端,流动关系图
-
2024-04-04 13:09:31.0
编程,程序,js,教程,程序员,入门教程
-
2024-02-17 21:55:21.0
layui,前端,js,cascader
-
2023-11-26 22:38:27.0
layui,js,前端,树,字典
-
2023-07-28 23:56:45.0
gis,前端,可视化,风场,洋流,天气
-
2023-07-16 15:42:34.0
JavaScript,入门教程表单处理swiper
-
2023-07-05 22:52:01.0
js,javascript,正则表达式,form表单验证
-
2023-07-03 18:03:43.0
原型设计,可视化,axure模板,产品设计
-
2023-07-02 22:43:01.0
mdui,分页,html,js
-
2023-07-01 10:59:29.0
layui,前端,js
-
2023-06-29 21:55:58.0
项目计划,里程碑计划,工期计算,项目工时估算
-
2023-05-28 19:55:56.0
可视化,GIS,大数据,热力图,动态地图,三维,百度地图特效,高德地图,地图动画
-
2023-05-14 18:08:23.0
大屏,gis,前端,可视化,免费
-
2023-05-07 15:22:23.0
语音合成,前端,JavaScript,html
-
2023-05-07 14:58:59.0
js,html,JavaScript,vue
-
2023-04-27 21:10:07.0
JavaScript,图片上传
-
2023-04-26 13:17:56.0
html,Javascript,css,面试,前端
-
2023-04-21 22:21:03.0
wangeditor,富文本,代码,highlight.js
-
2023-04-13 21:21:26.0
GIS,可视化,百度地图
-
2023-03-26 20:12:31.0
base64,js,前端,加密,解密,jquery
-
2023-03-26 18:52:41.0
JS,加密,前端,加解密
-
2023-03-22 19:45:58.0
js,前端,乱码,jquery,移动端,web,全栈
-
2022-12-15 16:45:16.0
大数据,气象数据,天气数据,历史天气,最新数据
-
2023-03-12 21:01:30.0
免费,云服务,ECS,腾讯云,云主机
-
2023-03-12 21:59:56.0
大数据,gis绘图,乡镇边界,数据可视化,地图
-
2023-01-15 16:32:02.0
可视化,大数据,大屏,图标,新冠病毒,前端,特效
-
2023-01-11 16:32:02.0
可视化,大数据,大屏,图标,新冠病毒,前端,特效
-
2022-12-15 16:45:16.0
大数据,小程序,编程,免费
-
2022-12-15 16:45:16.0
大数据,小程序,编程,免费