使用百度地图api做一个降雨的分布量的代码
时间: 2024-02-14 09:09:29 浏览: 146
这里给出一个简单的示例代码,演示如何使用百度地图API实现降雨分布量的展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>降雨分布量展示</title>
<style type="text/css">
#container {
height: 600px;
width: 800px;
margin: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- 引入百度地图API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
<script type="text/javascript">
// 初始化地图
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 添加降雨数据
var data = [
{"lng":116.404,"lat":39.915,"value":10},
{"lng":116.418,"lat":39.921,"value":20},
{"lng":116.397,"lat":39.915,"value":30},
{"lng":116.387,"lat":39.925,"value":40},
{"lng":116.401,"lat":39.918,"value":50},
{"lng":116.412,"lat":39.922,"value":60},
{"lng":116.421,"lat":39.903,"value":70},
{"lng":116.413,"lat":39.908,"value":80},
{"lng":116.401,"lat":39.918,"value":90},
{"lng":116.382,"lat":39.901,"value":100},
{"lng":116.402,"lat":39.901,"value":110},
{"lng":116.414,"lat":39.914,"value":120},
{"lng":116.422,"lat":39.917,"value":130},
{"lng":116.441,"lat":39.921,"value":140},
{"lng":116.427,"lat":39.915,"value":150},
{"lng":116.409,"lat":39.923,"value":160},
{"lng":116.418,"lat":39.936,"value":170},
{"lng":116.438,"lat":39.921,"value":180},
{"lng":116.414,"lat":39.941,"value":190},
{"lng":116.444,"lat":39.915,"value":200},
];
// 绘制降雨数据
for (var i=0; i<data.length; i++) {
var point = new BMap.Point(data[i].lng, data[i].lat);
var color = getColor(data[i].value); // 根据降雨量获取颜色
var circle = new BMap.Circle(point, 1000, {strokeWeight:0,fillColor:color,fillOpacity:0.5});
map.addOverlay(circle);
}
// 获取颜色
function getColor(value) {
var colors = ["#00FF00", "#FFFF00", "#FFA500", "#FF0000"]; // 颜色分级
if (value < 50) {
return colors[0];
} else if (value < 100) {
return colors[1];
} else if (value < 150) {
return colors[2];
} else {
return colors[3];
}
}
</script>
</body>
</html>
在上述代码中,我们首先在页面中添加一个div元素,用于显示地图。然后引入百度地图API,并在页面加载完成后初始化地图。接着,我们添加了一些降雨数据,并使用百度地图API中的Circle功能绘制了圆形覆盖物,用不同的颜色表示不同的降雨量。最后,我们定义了一个函数,根据降雨量的大小返回不同的颜色,以实现颜色分级。
相关推荐
















