main

分支 (1)

管理

管理

main

cesium_pdf
/
8.9工具应用篇_热力图.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>工具应用篇_热力图</title>
	<script src="./Build/Cesium/Cesium.js"></script>
	<link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
	<!-- 引入JQuery -->
	<script src="./Build/js/jquery.min.js"></script>
	<!-- 引入CesiumHeatmap.js -->
	<script src="./Build/js/CesiumHeatmap.js"></script>

	<style>
		html,
		body,
		#cesiumContainer {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div id="cesiumContainer">
	</div>


	<script>
		Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
		var viewer = new Cesium.Viewer("cesiumContainer", {
			animation: false, //是否显示动画工具
			timeline: false,  //是否显示时间轴工具
			fullscreenButton: false,  //是否显示全屏按钮工具
			terrainProvider: Cesium.createWorldTerrain()

		});

		//定义热力图边界
		var bounds = {
			west: 114,
			east: 115,
			south: 30,
			north: 31
		};

		//定义最大最小热力值
		var valueMin = 0;
		var valueMax = 100;

		//定义热力图参数
		var params = {
			radius: 150,	//热点半径
			maxOpacity: 0.5,//最大不透明度
			minOpacity: 0,//最小不透明度
			blur: 0.75	//模糊尺寸
		}

		//创建热力图对象
		var heatMap = CesiumHeatmap.create(
			viewer,
			bounds,
			params
		);


		/* //拿数据
		window.onload = function () {
			var url = "矢量文件/json/heatmap.json" //json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径
			var request = new XMLHttpRequest();
			request.open("get", url); //设置请求方法与路径
			request.send();//发送请求但不发送数据到服务器
			request.onload = function () {//XHR对象获取到返回信息后执行
				if (request.status == 200) {//返回状态为200，即为数据获取成功
					var json = JSON.parse(request.responseText);
					for (var i = 0; i < json.length; i++) {
						var point = {
							x: json[i].x,
							y: json[i].y,
							value: json[i].value
						}
						points.push(point);
					}
					console.log('points', points);

					heatMap.setWGS84Data(valueMin, valueMax, points);
					console.log('成功');
				}
				else {
					console.log('读取失败');
				}
			}
		} */
		//发送ajax请求
		$.ajax({
			url: "矢量文件/json/heatmap.json", //json数据地址
			type: "GET",
			dataType: "json",
			success: function (data) {
				console.log('data', data);
				// 使用 heatMap 对象中的 setWGS84Data 方法创建热力图。
				//该方法需要传入 3 个参数：前两个参数用于设置热力值的最小值和最大值，第三个参数为要创建热力图的数据，也就是 AJAX 请求返回的数据
				heatMap.setWGS84Data(valueMin, valueMax, data);
			}
		})

		viewer.camera.flyTo({
			destination: Cesium.Cartesian3.fromDegrees(114.1977, 30.6533, 200000),
		})


	</script>
</body>

</html>