|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>温度数据粒子效果可视化</title>
|
|
|
|
|
|
<!-- Leaflet CSS -->
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
|
|
|
|
|
<style>
|
|
|
body {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
font-family: Arial, sans-serif;
|
|
|
}
|
|
|
|
|
|
#map {
|
|
|
height: 100vh;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
#info {
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
right: 10px;
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
padding: 10px;
|
|
|
border-radius: 5px;
|
|
|
z-index: 1000;
|
|
|
max-width: 300px;
|
|
|
}
|
|
|
|
|
|
.legend {
|
|
|
background: white;
|
|
|
padding: 10px;
|
|
|
border-radius: 5px;
|
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
.legend-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.legend-color {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div id="map"></div>
|
|
|
<div id="info">
|
|
|
<h3>温度数据粒子效果</h3>
|
|
|
<p>粒子流动方向和速度表示温度梯度</p>
|
|
|
<div id="legend" class="legend"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Leaflet JS -->
|
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
|
|
|
|
|
<!-- 使用 CDN 版本的 leaflet-velocity.js -->
|
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet-velocity@1.0.0/dist/leaflet-velocity.min.js"></script>
|
|
|
|
|
|
<!-- 温度数据 -->
|
|
|
<script>
|
|
|
// 从本地JSON文件加载温度数据
|
|
|
fetch('/data/Atm_ATM_TEMP.json')
|
|
|
.then(response => response.json())
|
|
|
.then(data => {
|
|
|
// 验证数据格式
|
|
|
if (data.status === 10200 && data.message === "SUCCESS") {
|
|
|
window.tempData = data;
|
|
|
// 数据加载成功后初始化地图
|
|
|
initializeMap();
|
|
|
} else {
|
|
|
console.error('数据加载失败:', data.message);
|
|
|
}
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('加载温度数据时出错:', error);
|
|
|
});
|
|
|
|
|
|
// 初始化地图的函数
|
|
|
function initializeMap() {
|
|
|
// 初始化地图
|
|
|
const map = L.map('map').setView([45, 125], 4);
|
|
|
|
|
|
// 添加底图
|
|
|
L.tileLayer(
|
|
|
'http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=489fa3b53cd351877dcf69e9ed899a04',
|
|
|
{ attribution: '天地图地形', subdomains: [0, 1, 2, 3, 4, 5, 6, 7] },
|
|
|
).addTo(map);
|
|
|
|
|
|
// 创建温度图层（使用GeoJSON而不是velocity）
|
|
|
const tempLayer = L.geoJSON(tempData.data.jasonlistf, {
|
|
|
style: function(feature) {
|
|
|
return {
|
|
|
fillColor: feature.properties.fill,
|
|
|
color: feature.properties.stroke,
|
|
|
weight: feature.properties['stroke-width'],
|
|
|
opacity: feature.properties['stroke-opacity'],
|
|
|
fillOpacity: feature.properties['fill-opacity']
|
|
|
};
|
|
|
},
|
|
|
onEachFeature: function(feature, layer) {
|
|
|
// 可以添加弹出窗口显示温度信息
|
|
|
const tempRange = feature.properties.title;
|
|
|
layer.bindPopup(`温度范围: ${tempRange}°C`);
|
|
|
}
|
|
|
}).addTo(map);
|
|
|
|
|
|
// 创建图例
|
|
|
createLegend();
|
|
|
}
|
|
|
|
|
|
// 创建温度颜色映射
|
|
|
function createTempColorScale(colorlist) {
|
|
|
const colorScale = [];
|
|
|
|
|
|
colorlist.forEach(item => {
|
|
|
const temp = item[0];
|
|
|
const rgb = item[1];
|
|
|
colorScale.push(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
|
|
|
});
|
|
|
|
|
|
return colorScale;
|
|
|
}
|
|
|
|
|
|
// 创建图例
|
|
|
function createLegend() {
|
|
|
const legend = document.getElementById('legend');
|
|
|
const colorlist = tempData.data.colorlist;
|
|
|
|
|
|
// 简化图例，只显示部分温度值
|
|
|
for (let i = 0; i < colorlist.length; i += 4) {
|
|
|
const item = colorlist[i];
|
|
|
const temp = item[0];
|
|
|
const rgb = item[1];
|
|
|
|
|
|
const legendItem = document.createElement('div');
|
|
|
legendItem.className = 'legend-item';
|
|
|
|
|
|
const colorBox = document.createElement('div');
|
|
|
colorBox.className = 'legend-color';
|
|
|
colorBox.style.backgroundColor = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
|
|
|
|
|
|
const label = document.createElement('span');
|
|
|
label.textContent = `${temp}°C`;
|
|
|
|
|
|
legendItem.appendChild(colorBox);
|
|
|
legendItem.appendChild(label);
|
|
|
legend.appendChild(legendItem);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
