大数据立体多边形.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=uVo9NXxwYrugBN7lGxWWY0K3MsPw8Nc9"></script>
     <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
     <script src="https://mapv.baidu.com/build/mapv.js"></script>
     <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
     <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>
   <style>
        html,body,#map_container{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        .anchorBL,.BMap_cpyCtrl{
            display: none;
        }
    </style>
</head>
<body>
    <div id="map_container">

    </div>
    <script>
        
        var map = initMap({
			tilt: 80,
			heading: -45.3,
			center: [106.540547,29.564858],
			zoom: 17
    });
		initData();
		function initData() {
			fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json')
				.then(res => res.json())
				.then(res => {
					var data = res;
					var polygons = [];
        	var len = data.length;
        	for (var i = 0; i < len; i++) {
            var line = data[i];
            var polygon = [];
            var pt = [line[1] * 512, line[2] * 512];
            for (var j = 3; j < line.length; j += 2) {
							pt[0] += line[j] / 100 / 2;
							pt[1] += line[j + 1] / 100 / 2;
							polygon.push([pt[0], pt[1]]);
            }
            polygons.push({
							geometry: {
								type: 'Polygon',
								coordinates: [polygon]
							},
							properties: {
								height: line[0] / 2
							}
            });
        	}
					setData(polygons);
				});
		}
		function setData(data) {
			console.log(data);
			var view = new mapvgl.View({
        map: map
    	});

			var shaperLayer = new mapvgl.ShapeLayer({
				color: 'rgb(0, 255, 255)',
    		blend: 'lighter',
    		// style: 'normal',
				// style: 'gradual',
				style: 'windowAnimation',
				opacity: 1.0, // 透明度
				riseTime: 2000, // 楼房升起动画
			});

			view.addLayer(shaperLayer);
			shaperLayer.setData(data);
		}

    </script>
</body>
</html>