115 lines
4.0 KiB
HTML
115 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
|
|
<title>动态风流场</title>
|
|
<link rel="stylesheet" href="2d/css/style.css">
|
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=nuWah68S1WieW2AEwiT8T3Ro&s=1"></script>
|
|
<script type="text/javascript" src="2d/mapstyle/gray.js"></script>
|
|
<script type="text/javascript" src="2d/data/wind-data.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map"></div>
|
|
<script type="text/javascript" src="2d/js/baidu-map-wind.js"></script>
|
|
<script type="text/javascript" src="2d/js/dat.gui.js"></script>
|
|
<script type="text/javascript">
|
|
var map = new BMap.Map('map', {
|
|
minZoom: 5
|
|
});
|
|
map.centerAndZoom(new BMap.Point(113.275995, 23.117055), 11);
|
|
map.enableScrollWheelZoom(true);
|
|
map.setMapStyle({
|
|
styleJson: styleJson
|
|
});
|
|
|
|
/************定义canvas图层************/
|
|
function WindOverLayer() { }
|
|
|
|
var rectPoints = [109.600899, 25.593504, 117.401353, 20.175226]; //左上、右下经纬度
|
|
|
|
WindOverLayer.prototype = new BMap.Overlay();
|
|
|
|
WindOverLayer.prototype.initialize = function () {
|
|
var canvas = document.createElement('canvas');
|
|
canvas.id = "windCanvas";
|
|
canvas.width = map.getSize().width;
|
|
canvas.height = map.getSize().height;
|
|
canvas.style.position = 'absolute';
|
|
canvas.style.top = 0;
|
|
canvas.style.left = 0;
|
|
map.getPanes().labelPane.appendChild(canvas);
|
|
|
|
this._canvas = canvas;
|
|
this._windy = new Windy({
|
|
map: map,
|
|
canvas: canvas,
|
|
data: windData
|
|
});
|
|
};
|
|
|
|
WindOverLayer.prototype.draw = function () {
|
|
var canvas = this._canvas;
|
|
var windy = this._windy;
|
|
var bounds = map.getBounds(); //返回当前视口的西南纬度/经度和东北纬度/经度
|
|
var sw = bounds.getSouthWest();
|
|
var ne = bounds.getNorthEast();
|
|
var py = map.pointToOverlayPixel(new BMap.Point(sw.lng, ne.lat)); //经纬度转成屏幕坐标
|
|
canvas.style.left = py.x + 'px';
|
|
canvas.style.top = py.y + 'px';
|
|
|
|
var points = this.invertLatLon(py); //所有站点经纬度转为canvas坐标
|
|
// var min = map.pointToOverlayPixel(new BMap.Point(rectPoints[0], rectPoints[1]));
|
|
// var max = map.pointToOverlayPixel(new BMap.Point(rectPoints[2], rectPoints[3]));
|
|
var min = map.pointToOverlayPixel(new BMap.Point(sw.lng, ne.lat));
|
|
var max = map.pointToOverlayPixel(new BMap.Point(ne.lng, sw.lat));
|
|
|
|
windy.start([
|
|
[min.x - py.x, min.y - py.y],
|
|
[max.x - py.x, max.y - py.y]
|
|
], points);
|
|
}
|
|
|
|
WindOverLayer.prototype.invertLatLon = function (py) {
|
|
var points = [];
|
|
windData.forEach(function (station) {
|
|
var px = map.pointToOverlayPixel(new BMap.Point(station[1], station[0]));
|
|
points.push({
|
|
x: px.x - py.x,
|
|
y: px.y - py.y,
|
|
angle: station[2],
|
|
speed: station[3]
|
|
});
|
|
});
|
|
return points;
|
|
}
|
|
|
|
var windLayer = new WindOverLayer()
|
|
map.addOverlay(windLayer);
|
|
|
|
var options = {
|
|
size: .8,
|
|
color: 'rgba(71,160,233,0.8)',
|
|
};
|
|
|
|
function finished() {
|
|
windLayer._windy.change(options);
|
|
};
|
|
|
|
var gui = new dat.GUI({
|
|
nameMap: {
|
|
size: '线条大小',
|
|
color: '线条颜色'
|
|
}
|
|
});
|
|
|
|
finished();
|
|
gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
|
|
gui.addColor(options, 'color').onChange(finished);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |