网站首页

全国天气实况温度气压降水风速地图标注等值面绘制风流场洋流场显示

可视化
大数据
gis
访问量：89
2024-10-12 08:59:22.0
无极低码 ：https://wheart.cn

全国天气实况温度气压降水风速地图标注等值面绘制风流场洋流场显示

实现效果

​编辑

b41ee5170ebea62630c46adf2c0adb7f.jpeg

全国气象实况实时温度降水气压风速风场洋流地图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
最新文章