cesium中实现热力图

实现效果：

原理：使用heatmap.js插件，先生成一个热力图，再在地图上创建一个盒子（如矩形），以纹理的形式把热力图填充到矩形中。

1、首先下载heatmap.js插件，自己随意写了一个热力图的方法，传入热力图所需参数max和data

// 创建热力图
function createHeatMap(max, data) {// 创建元素var heatDoc = document.createElement("div");heatDoc.setAttribute("style", "width:1000px;height:1000px;margin: 0px;display: none;");document.body.appendChild(heatDoc);// 创建热力图对象var heatmap = h337.create({container: heatDoc,radius: 20,maxOpacity: .5,minOpacity: 0,blur: .75,gradient: {'0.9':'red','0.8':'orange','0.7':'yellow','0.5':'blue','0.3':'green',},});// 添加数据heatmap.setData({max: max,data: data});return heatmap;
}

2、创建一个cesium视图对象

var viewer = new Cesium.Viewer("viewer");

3、在之前建的cesium视图中，创建一个矩形（也可是椭圆、正方形、多边形等），在矩形内以纹理的形式填充，自己随意封装了一个方法

// 创建正方形 绑定热力图
function createRectangle(viewer, coordinate, heatMap) {viewer.entities.add({name: 'Rotating rectangle with rotating texture coordinate',show: true,rectangle: {coordinates: Cesium.Rectangle.fromDegrees(coordinate[0], coordinate[1], coordinate[2], coordinate[3]),material: heatMap._renderer.canvas // 核心语句，填充热力图}});
}

4、随意生成多个点数据

// 生成len个随机数据
function getData(len) {//构建一些随机数据点var points = [];var max = 0;var width = 1000;var height = 1000;while (len--) {var val = Math.floor(Math.random() * 1000);max = Math.max(max, val);var point = {x: Math.floor(Math.random() * width),y: Math.floor(Math.random() * height),value: val};points.push(point);}return {max: max, data: points}
}

5、使用上述方法，则生成热力图

// 第一个热力图
var coordinate1 = [-109.0, 10.0, -80.0, 35.0];
var heatMap1 = createHeatMap(getData(1000).max, getData(1000).data);
creatRectangle(viewer, coordinate1, heatMap1);// 第二个热力图
var coordinate2 = [-109.0, 30.0, -80.0, 41.0];
var heatMap2 = createHeatMap(getData(3000).max, getData(3000).data);
creatRectangle(viewer, coordinate2, heatMap2);// 第三个热力图
var coordinate3 = [-109.0, 41.0, -80.0, 50.0];
var heatMap3 = createHeatMap(getData(5000).max, getData(5000).data);
creatRectangle(viewer, coordinate3, heatMap3);

cesium中实现热力图相关推荐

Cesium中实现立体热力图
Cesium中实现立体热力图热力图在Cesium中实现热力图网上有较为成熟的案例,可参考 CesiumHeatmap . 其原理是根据经纬度范围计算 canvas 大小,并将经纬度转化为 canv ...
Cesium 中两种添加 model 方法的区别
概述 Cesium 中包含两种添加 model 的方法,分别为: 通过 viewer.entities.add() 函数添加通过 viewer.scene.primitives.add() 函数添加 ...
Cesium中Clock控件及时间序列瓦片动态加载
前言前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
Cesium中的坐标系及转换
在我们开始学习Entity之前,我们首先需要先学习下Cesium中的坐标系,Cesium中有多个坐标系,在进行添加Entity时经常会使用到. 一.坐标系介绍我们先来列举下Cesium中的坐标系:W ...
Cesium中Homebutton改变默认跳转位置【转】
在Cesium中,Homebutton的默认跳转位置是美国,那么在开发中我们如何更改这个默认跳转位置呢,这就要更改一下源代码了: Camera.DEFAULT_VIEW_RECTANGLE = Rec ...
Cesium中的儒略日JulianDate
在天文和卫星轨道计算中,有关儒略日的计算是一个绕不开的话题.本章阐述下Cesium中有关儒略日的处理方法. 涉及到的时间系统,如UTC,TAI等,这里不再详细阐述,读者自行阅读专业书籍或者网上查询. ...
Cesium中绘制矩形，根据四角/对角坐标绘制矩形
Cesium中绘制矩形,根据四角/对角坐标绘制矩形 import store from '@/store/index' import * as Cesium from 'cesium'export d ...
Cesium中的相机—旋转矩阵
在学习坐标旋转的时候,一不小心就会把坐标系的旋转和矢量的旋转弄错,这里给出详细的两种旋转过程: 两种旋转矩阵的定义下面仅以绕Z轴旋转为例,给出两种旋转的过程定义. 坐标系旋转,点不变(见下左图) 两 ...
Cesium中添加entitie模型，实现贴地。
1.Cesium中添加entitie模型,实现贴地. 2. 添加模型 const createModel = (url) => {const entity = viewer.entities.a ...
Cesium中使用Sampler3D，3D纹理，实现体渲染
Cesium中使用Sampler3D,3D纹理,实现体渲染 Cesium目前(20221231)还不支持直接使用3D纹理,但是其实内部已经可以WebGL2,而且内置常量也有3DTexture.所以,可 ...

cesium中实现热力图

cesium中实现热力图相关推荐

最新文章

热门文章