帮我写一段温度投影到地图上的js程序
时间: 2024-06-06 08:08:18 浏览: 17
以下是一段简单的 JavaScript 程序,用于将温度投影到地图上:
```
// 创建地图
var map = L.map('map').setView([51.505, -0.09], 13);
// 添加地图图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(map);
// 添加温度图层
var temperatureLayer = L.layerGroup().addTo(map);
// 温度数据
var temperatureData = [
{lat: 51.505, lng: -0.09, temp: 20},
{lat: 51.51, lng: -0.1, temp: 18},
{lat: 51.505, lng: -0.08, temp: 22},
];
// 添加温度数据到图层
for (var i = 0; i < temperatureData.length; i++) {
var data = temperatureData[i];
var marker = L.circleMarker([data.lat, data.lng], {
radius: 10,
color: 'red',
fillColor: getColor(data.temp),
fillOpacity: 1,
}).bindPopup('Temperature: ' + data.temp + '°C').addTo(temperatureLayer);
}
// 根据温度获取颜色
function getColor(temp) {
if (temp <= 10) {
return 'blue';
} else if (temp > 10 && temp <= 20) {
return 'green';
} else if (temp > 20 && temp <= 30) {
return 'yellow';
} else {
return 'red';
}
}
```
这段程序使用了 Leaflet.js 库,创建了一个地图,并在地图上添加了一个温度图层。温度数据存储在 `temperatureData` 数组中,每个数据包括经纬度和温度值。程序通过循环遍历温度数据,并创建一个圆形标记(使用 `L.circleMarker` 方法),将其位置设置为经纬度,并根据温度值设置填充颜色(使用 `getColor` 方法)。标记绑定了一个弹出窗口,显示温度值。最后,将所有标记添加到温度图层中(使用 `addTo` 方法)。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)