cesium 热力图

最新推荐文章于 2024-06-12 10:03:15 发布

铭keny

最新推荐文章于 2024-06-12 10:03:15 发布

阅读量238

点赞数

分类专栏： cesium gis heatmap

本文链接：https://blog.csdn.net/qq_34200979/article/details/113260299

版权

cesium 同时被 3 个专栏收录

10 篇文章 2 订阅

订阅专栏

gis

9 篇文章 0 订阅

订阅专栏

heatmap

1 篇文章 0 订阅

订阅专栏

cesium 热力图

引入CesiumHeatmap

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Hello World!</title>
		<script src="../Build/Cesium/Cesium.js"></script>
		<script src="CesiumHeatmap.js"></script>
		<style>
			@import url(../Build/Cesium/Widgets/widgets.css);
			html,
			body,
			#cesiumContainer {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="cesiumContainer"></div>
		<script>
			var viewer = new Cesium.Viewer("cesiumContainer");
			// 视图区域
			var bounds = {
				west: -109.0,
				south: 30.0,
				east: -80.0,
				north: 50.0
			};
			// 初始化CesiumHeatmap
			var heatMap = CesiumHeatmap.create(
				viewer, 
				bounds, 
				{ // heatmap相应参数
					backgroundColor: "rgba(0,0,0,0)",
					radius: 50,
					maxOpacity: .5,
					minOpacity: 0,
					blur: .75
				}
			);
			// 添加数据 最小值，最大值，数据集
			heatMap.setWGS84Data(0, 100, [{x: -97.6433525165054, y: 45.61443064377248, value: 99.409122369106317}]);
			viewer.zoomTo(viewer.entities);
		</script>
	</body>
</html>

铭keny

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
cesium 热力图

引入CesiumHeatmap.js<!DOCTYPE html><html lang="en"> <head> <title>Hello World!</title> <script src="../Build/Cesium/Cesium.js"></script> <script src="CesiumHeatmap.js"></script> <style>
复制链接

扫一扫