Cesium进阶学习三、热力图

于 2024-10-08 10:56:03 发布
阅读量3 收藏
点赞数
分类专栏： Cesium进阶学习 文章标签： 学习 java 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43700915/article/details/142753905
版权

一、简介
热力图是一种用颜色来表示数据密度或强度的图表。它通过将数据映射到不同的颜色，以展示数据的分布和变化情况。热力图通常用于显示大量数据的空间分布或趋势，帮助用户快速理解数据的模式和关系。
在这里插入图片描述

热力图的设计原理是基于人眼对颜色的敏感度，不同颜色的明暗程度可以传达不同的数据密度或强度。一般来说，较亮的颜色（如红色或黄色）表示高密度或高强度的数据，而较暗的颜色（如蓝色或绿色）表示低密度或低强度的数据。
在这里插入图片描述

热力图能反映哪些信息：
a、数据密度：热力图可以显示数据的分布密度，通过颜色的明暗程度来表示不同区域或点的数据密集程度。较亮的颜色表示高密度，较暗的颜色表示低密度。
b、数据强度：热力图可以显示数据的强度或权重。通过颜色的明暗程度来表示数据的强弱程度。较亮的颜色表示高强度，较暗的颜色表示低强度。
c、空间分布：热力图可以展示数据在空间上的分布情况。通过在地图或图表上显示颜色的分布，可以清晰地看到数据的空间分布模式和趋势。
在这里插入图片描述

二、热力图数据构成

热力图数据一般是具有经纬度信息和属性信息的一系列点集合。 经纬度用于展示空间分布趋势，属性信息用于展示强度。以高德地图 热力图开发示例 的数据为例，（北京部分“公园”数据）
在这里插入图片描述

数据格式：

let heatmapData = [{
        "lng": 116.191031,
        "lat": 39.988585,
        "count": 10
    }, {
        "lng": 116.389275,
        "lat": 39.925818,
        "count": 11
    }, {
        "lng": 116.287444,
        "lat": 39.810742,
        "count": 12
    }, {
        "lng": 116.481707,
        "lat": 39.940089,
        "count": 13
    },
    ...
]

三、如何绘制热力图

绘制热力图，我们一般使用热力图插件来进行绘制，这里使用heatmap.js这个插件，该插件被很多前端地图库采用，如Leaflet、GMAPS、Openlayers。该插件已经具备强大的热力图绘制功能，绘制热力图已不是难点，难点在于以下两点：
a、坐标转换
b、如何将绘制的结果正确地显示到Cesium上

1、坐标转换
heatmap.js使用的是屏幕坐标，即原点在屏幕左上角，往右为x轴正方向，往下为y轴正方向。我们拿到的热力图数据一般是包含经纬度信息和属性信息的点集合，这里选择高德地图api开发热力图示例中的数据进行测试 高德热力图

let heatmapData = [{
    "lng": 116.191031,
    "lat": 39.988585,
    "count": 10
}, {
    "lng": 116.389275,
    "lat": 39.925818,
    "count": 11
},
...
];

第一步，我们先获取热力图数据的范围大小

 let xMin = 180, yMin = 90, xMax = 0, yMax = 0;

//获取热力图数据的矩形范围

 heatmapData.forEach(data => {
     xMin = Math.min(data.lng, xMin);
     yMin = Math.min(data.lat, yMin);
     xMax = Math.max(data.lng, xMax);
     yMax = Math.max(data.lat, yMax);
 })

有了范围，我们就可以定义绘制热力图画布的大小,以下代码获取了热力图数据矩形范围的长和宽

//热力图数据矩形范围的长和宽

let w = xMax - xMin;
 let h = yMax - yMin;

第二步，定义画布大小，我们根据上面的宽度和高度定义用于绘制热力图画布的像素宽高

//定义用于绘制热力图画布的宽高

 let canvasWidth = w * 500;
 let canvasHeight = h * 500;

第三步、映射经纬度坐标到画布坐标有了热力图数据的经纬度范围和绘制热力图画布的宽高，我们就可以通过映射关系将热力图数据的经纬度坐标转为画布上的像素坐标了

//将经纬度数据坐标转换到画布的坐标系上

 let convertData = [];
 heatmapData.forEach(data => {
     let x = (data.lng - xMin) / w * canvasWidth;
     let y = -(data.lat - yMax) / h * canvasHeight;
     convertData.push({
         x: x,
         y: y,
         value: data.count
     })
 })

因为经纬度坐标和屏幕坐标的z轴方向是反的，所以在代码中我们将每个经纬度转到范围矩形的左上角，此时y值为负的，我们做个取反操作，这样就能正确表示为屏幕坐标了。
在这里插入图片描述

坐标数据转换成功后，我们通过heatmap.js将热力图数据绘制出来，完整代码如下：
//创建热力图对象

let heatmapInstance = h337.create({
    container: document.querySelector('#map3dContainer'),
    radius: 25, //给定半径
    maxOpacity: 0.8,
    minOpacity: 0,
});
let heatmapData = [{
    "lng": 116.191031,
    "lat": 39.988585,
    "count": 10
},
...
];
let xMin = 180, yMin = 90, xMax = 0, yMax = 0;

//获取热力图数据的矩形范围

heatmapData.forEach(data => {
    xMin = Math.min(data.lng, xMin);
    yMin = Math.min(data.lat, yMin);
    xMax = Math.max(data.lng, xMax);
    yMax = Math.max(data.lat, yMax);
})

//热力图数据矩形范围的长和宽
let w = xMax - xMin;
let h = yMax - yMin;
//定义用于绘制热力图画布的宽高
let canvasWidth = w * 500;
let canvasHeight = h * 500;
//将经纬度数据坐标转换到画布的坐标系上
let convertData = [];
heatmapData.forEach(data => {
    let x = (data.lng - xMin) / w * canvasWidth;
    let y = -(data.lat - yMax) / h * canvasHeight;
    convertData.push({
        x: x,
        y: y,
        value: data.count
    })
})
heatmapInstance.setData({
    data: convertData,
    max:100
});

在这里插入图片描述

对比高度网站上的热力图，结果一致
在这里插入图片描述

二、使用绘制结果
Cesium支持纹理贴图，我们可以将绘制的结果作为一张纹理贴到Cesium的Entity或Primtive上，我们创建一个Entity，Entity的几何体选择Rectangle，至于这里为什么要选择Rectangle，那是因为Rectangle刚好是需要一个矩形范围的坐标，Rectangle指定左下右上的坐标后它的纹理坐标刚好匹配左下右上的顺序，通过代码测试一下。

1、创建一个矩形对象

new Cesium.Rectangle(west, south, east, north)

2、创建Entity，选择几何体为rectangle，并将绘制结果作为材质设置给几何对象

let rect=new Cesium.Rectangle(Cesium.Math.toRadians(xMin), Cesium.Math.toRadians(yMin), Cesium.Math.toRadians(xMax), Cesium.Math.toRadians(yMax));
 viewer.entities.add({
     rectangle:{
         coordinates:rect,
         material:heatmapInstance._renderer.canvas
     }
 })

在这里插入图片描述

至此我们已经成功将热力图显示到cesium上，我们将对应的点位添加到场景中，看看结果是否正确。
在这里插入图片描述

完整代码：

let heatmapData = [{
    "lng": 116.191031,
    "lat": 39.988585,
    "count": 10
},
...
];
let xMin = 180, yMin = 90, xMax = 0, yMax = 0;
//获取热力图数据的矩形范围
heatmapData.forEach(data => {
    xMin = Math.min(data.lng, xMin);
    yMin = Math.min(data.lat, yMin);
    xMax = Math.max(data.lng, xMax);
    yMax = Math.max(data.lat, yMax);
})
//热力图数据矩形范围的长和宽
let w = xMax - xMin;
let h = yMax - yMin;
//定义用于绘制热力图画布的宽高
let canvasWidth = w * 500;
let canvasHeight = h * 500;
//将经纬度数据坐标转换到画布的坐标系上
let convertData = [];
heatmapData.forEach(data => {
    let x = (data.lng - xMin) / w * canvasWidth;
    let y = -(data.lat - yMax) / h * canvasHeight;
    convertData.push({
        x: x,
        y: y,
        value: data.count
    })
})

let container=document.createElement("div");
container.style.height=canvasHeight+"px";
container.style.width=canvasWidth+"px";
document.body.append(container);
let heatmapInstance = h337.create({
    container: container,
    radius: 25, //给定半径
    maxOpacity: 0.8,
    minOpacity: 0,
});
heatmapInstance.setData({
    data: convertData,
    max:100
});

let rect=new Cesium.Rectangle(Cesium.Math.toRadians(xMin), Cesium.Math.toRadians(yMin), Cesium.Math.toRadians(xMax), esium.Math.toRadians(yMax));
viewer.entities.add({
    rectangle:{
        coordinates:rect,
        material:heatmapInstance._renderer.canvas
    }
})

三、绘制3D立体曲面热力图

在上面学习中，我们已经成功绘制了热力图，并正确显示在Cesium中，这一节我们来看看如何实现3D立体曲面热力图，3D立体曲面热力图在视觉效果上比二维热力图更好。

在这里插入图片描述

3D立体曲面热力图的实现思路是在二维热力图的基础上，在顶点着色器中根据热力值修改顶点，要在顶点着色器中修改顶点，我们有以下两种方式可以实现：
a、自定义DrawCommand，需要完全自定义绘制命令
b、使用Primitive，在Primtive的顶点着色器中修改输出值

我们学习力Primitive的相关知识，本次进阶学习只展示相关的知识去实现，所以采用第二种方式。在Primitie相关章节，我们已经知道如何在着色器中获取模型坐标，如果您还没看，那么先去学习一下再回来。我们先通过Primitive创建一个几何图形，这里还是选择 Rectangle：

let rect = new Cesium.Rectangle(Cesium.Math.toRadians(xMin), Cesium.Math.toRadians(yMin), Cesium.Math.toRadians(xMax), Cesium.Math.toRadians(yMax));
 const rectangle = new Cesium.RectangleGeometry({
     rectangle: rect,
     height: 10000.0,
 });
 const geometry = Cesium.RectangleGeometry.createGeometry(rectangle);
 viewer.scene.primitives.add(new Cesium.Primitive({
     geometryInstances: new Cesium.GeometryInstance({
         geometry: geometry
     }),
     appearance: new Cesium.EllipsoidSurfaceAppearance({
         material: Cesium.Material.fromType('Checkerboard')
     })
 }));

在这里插入图片描述

然后我们将热力图绘制结果像在Entity中那样作为材质赋给Primitive

viewer.scene.primitives.add(new Cesium.Primitive({
     geometryInstances: new Cesium.GeometryInstance({
         geometry: geometry
     }),
     appearance: new Cesium.MaterialAppearance({
         material: new Cesium.Material({
             fabric: {
                 type: 'Image',
                 uniforms: {
                    image:heatmapInstance._renderer.canvas赋值
                 }
             }
         })
     })
 }));

在这里插入图片描述

最后，我们更改下顶点着色器

vertexShaderSource: `
 in vec3 position3DHigh;
 in vec3 position3DLow;
 in vec2 st;
 in float batchId;
 uniform sampler2D image_0; 
 out vec3 v_positionEC;
 in vec3 normal;
 out vec3 v_normalEC;
 out vec2 v_st; 
 void main(){
     vec4 p = czm_computePosition();
     vec3 v_positionMC = position3DHigh + position3DLow;
     v_normalEC = czm_normal * normal;   
     v_positionEC = (czm_modelViewRelativeToEye * p).xyz;
     v_st = st; 
     vec4 color = texture(image_0, v_st); 
     vec3 upDir = normalize(v_positionMC.xyz); 
     p += vec4(color.r *upDir * 1000., 0.0); 
     gl_Position = czm_modelViewProjectionRelativeToEye * p; 
 }`

在顶点着色器中，我们通过纹理坐标将当前像素的纹理值获取出来，因为热力图热力值越大说明红色值越大，所以该处我们直接采用红色值为热力值，我们将要输出的坐标按上方向加上红色值，因为红色值数值比较小，所以我们乘上一个固定值，这样顶点就会在原来的基础上被抬高，运行代码发现结果和我们预想的并不一样。
在这里插入图片描述

出现上面的情况，是因为为了保证渲染性能，Cesium并没有对Rectangle进行足够的细分，可能此时的Rectanlge就几何顶点，所以达不到预期效果。我们可以通过构造Reatngle时传入细分的参数。

 const rectangle = new Cesium.RectangleGeometry({
    rectangle: rect,
    height: 1000.0,
    granularity: 0.00005,
 });

granularity弧度值，表示两个经度之间的间隔，Cesium会根据该值将Rectangle内部划分为很多小的网格，这样就有足够多的顶点数据了，该值越大显示效果越好，不过预示着性能更低。最后的效果如下：
在这里插入图片描述

完整代码：

let heatmapData = [{
    "lng": 116.191031,
    "lat": 39.988585,
    "count": 10
}...];
let xMin = 180, yMin = 90, xMax = 0, yMax = 0;
//获取热力图数据的矩形范围
heatmapData.forEach(data => {
    xMin = Math.min(data.lng, xMin);
    yMin = Math.min(data.lat, yMin);
    xMax = Math.max(data.lng, xMax);
    yMax = Math.max(data.lat, yMax);
})
//热力图数据矩形范围的长和宽
let w = xMax - xMin;
let h = yMax - yMin;

//定义用于绘制热力图画布的宽高
let canvasWidth = w * 500;
let canvasHeight = h * 500;
//将经纬度数据坐标转换到画布的坐标系上
let convertData = [];
heatmapData.forEach(data => {
    let x = (data.lng - xMin) / w * canvasWidth;
    let y = -(data.lat - yMax) / h * canvasHeight;
    convertData.push({
        x: x,
        y: y,
        value: data.count
    })
})

let container = document.createElement("div");
container.style.height = canvasHeight + "px";
container.style.width = canvasWidth + "px";
document.body.append(container);
let heatmapInstance = h337.create({
    container: container,
    radius: 10, //给定半径
    maxOpacity: 1,
    minOpacity: 0,
});
heatmapInstance.setData({
    data: convertData,
    max: 100
});

let rect = new Cesium.Rectangle(Cesium.Math.toRadians(xMin), Cesium.Math.toRadians(yMin), Cesium.Math.toRadians(xMax),esium.Math.toRadians(yMax));
const rectangle = new Cesium.RectangleGeometry({
    rectangle: rect,
    height: 1000.0,
    granularity: 0.00005,
});
const geometry = Cesium.RectangleGeometry.createGeometry(rectangle);
viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
        geometry: geometry
    }),
    appearance: new Cesium.MaterialAppearance({
        material: new Cesium.Material({
            fabric: {
                type: 'Image',
                uniforms: {
                    image: heatmapInstance._renderer.canvas
                }
            }  
        }),

        vertexShaderSource: `
        in vec3 position3DHigh;
        in vec3 position3DLow;
        in vec2 st;
        in float batchId;
        uniform sampler2D image_0; 
        out vec3 v_positionEC;
        in vec3 normal;
        out vec3 v_normalEC;
        out vec2 v_st; 
        void main(){
            vec4 p = czm_computePosition();
            vec3 v_positionMC = position3DHigh + position3DLow;
            v_normalEC = czm_normal * normal;   
            v_positionEC = (czm_modelViewRelativeToEye * p).xyz;
            v_st = st; 
            vec4 color = texture(image_0, v_st); 
            vec3 upDir = normalize(v_positionMC.xyz); 
            p += vec4(color.r *upDir * 1000., 0.0); 
            gl_Position = czm_modelViewProjectionRelativeToEye * p; 
        }`
    })
}));

四、最后补充下Rectangle细分

图形渲染中只认识三角形，并没有什么矩形、多边形，所以一个图形会被扯分为多个三角形，而一个矩形，最简单的就是由两个三角形组成，每个三角形3个顶点，那么此时有6个顶点。
在这里插入图片描述

而Cesium中的矩形几何考虑了地球曲率的影响，所以一个矩形不一定是由两个三角形组成，可能会扯分为多个三角形。我们可以在创建完geometry对象后，从对象中获取顶点数据查看一个Rectangle是如何分为多个三角形的。

let vs = geometry.attributes.position.values;//顶点数组
    let positions = [];
    for (let i = 0; i < vs.length - 2; i+=3) {
        let c = {
            x: vs[i],
            y: vs[i + 1],
            z: vs[i + 2],
        }
        positions.push(c);
    }

    let indices = geometry.indices;//索引
    for (let i = 0; i < indices.length - 2;i+=3) {
        const element = indices[i];
        viewer.entities.add({
            polygon:{
                hierarchy: new Cesium.PolygonHierarchy([
                    positions[indices[i]],
                    positions[indices[i+1]],
                    positions[indices[i+2]]
                ]),
                material: Cesium.Color.fromRandom(),
            }
        })
    }

在这里插入图片描述

当我们设置细分参数后，我们看看结果。至此热力图的知识功能基本上掌握

 const rectangle = new Cesium.RectangleGeometry({
        rectangle: rect,
        height: 10000.0,
        granularity: 0.0005,
 });

在这里插入图片描述

Cesium进阶学习
关注
专栏目录
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3262
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-29 875
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
Cesium系列教程-进阶篇
xt3d的博客
05-23 504
本篇教程适合具有一定Cesium基础的开发者，涉及到GLSL语言，所以也需要基础的着色器编写能力。相信通过此篇教程一定能提升您的Cesium开发能力。Cesium系列教程-进阶篇。
Cesium开发入门篇 | 01Cesium介绍
暮紫月升
01-24 8968
01Cesium是什么我们打开Cesium(https://cesium.com)官网，能够很清晰的看到官方赋予Cesium的使命，即构建世界一流的3D地理空间应用程序。那Cesium到底是个什么东东呢？Cesium是一个跨平台、跨浏览器的展示三维地球和地图的javascript库Cesium使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGLCesium是基于Apache2.0许可的开源程序，它可以免费的用于商业和非商业用途02Cesium支持的数据格式影像数据：Bin
Cesium开发手册
Winn的程序世界
07-02 2956
Cesium开发手册 Cesium介绍 功能 支持数据格式 Cesium知识体系 Cesium在项目中的定位 Cesium学习路线 Cesium进阶之路 （3大方向） Cesium周边 AGI Cesium.com Cesium.github Cesium介绍 Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产...
Cesium初学笔记总结
m0_37755995的博客
03-16 4238
Cesium初学笔记总结 Cesium基本了解
关于Cesium
qq_28930785的博客
05-05 449
官方网站（Cesium: The Platform for 3D Geospatial），Cesium is the foundational open platform for software applications designed to unleash the power of 3D location data.
第一篇：Cesium
越努力越幸运！
04-23 1395
作为一名GISer，肯定对Cesium是熟悉的，网络上也有各种学习资源，我只是想把我遇到的问题，学到的东西分享给大家！
WebGIS工程师进阶训练营
qq_41134073的博客
05-11 564
SuperMap WebGIS 训练营笔记
87.（cesium篇）cesium热力图（贴地形）.rar
06-27
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“87.（cesium篇）cesium热力图（贴地形）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium 动态热力图 根据相机高度实时刷新热力图
04-10
在本项目中，我们主要探讨的是如何在Cesium中实现动态热力图，并...通过深入学习和实践，你可以掌握在Web应用中创建动态热力图的关键技术和技巧，这对于在地理信息展示或数据分析领域工作的人来说是一项宝贵的技能。
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
Cesium淹没分析（带热力图）
03-13
Cesium的淹没分析和热力图功能仅仅是GIS应用的一个实例，深入学习GIS理论可以拓展更多的应用场景。 综上所述，"Cesium淹没分析（带热力图）"涵盖了Cesium库的使用、地形数据处理、淹没模型构建、热力图生成以及...
10.2学习
2401_87363162的博客
10-02 1147
​ Spring AOP就是基于动态代理的，如果要代理的对象，实现了某个接⼝，那么Spring AOP会使⽤JDKProxy，去创建代理对象，⽽对于没有实现接⼝的对象，就⽆法使⽤ JDK Proxy 去进⾏代理了，这时候Spring AOP会使⽤基于asm框架字节流的Cglib动态代理 ，这时候Spring AOP会使⽤ Cglib ⽣成⼀个被代理对象的⼦类来作为代理。每个线程中都有一个自己的ThreadLocalMap类对象，可以将线程自己的对象保持到其中，各管各的，线程可以正确的访问到自己的对象。
Go基础学习10-原子并发包sync.atomic的使用：CSA、Swap、atomic.Value......
FLJS_T的博客
10-02 977
原子操作sync.atomic以及原子变量atomic.Value详细介绍。go中原生的支持原子操作的函数支持的变量类型int32、int64、uint32、uint64、uintptr，以及unsafe包中的Pointer。对于上述原子操作类型中的每一个，可以支持的数据类型有：==int32、int64、uint32、uint64、uintptr，以及unsafe包中的Pointer。但是否sync.Mutex变量能够保证操作的原子性。atomic.Value类型是开箱即用的，我们声明一个该类型的变量
6.824 Lab 2C 学习记录
kingsill的博客
09-29 328
最后10s，开始的时候，恢复网络，插入一个数据，等待这个数据被提交，如果超过这10s就报错。2C的test中的unreliable figure8算是给博主的迎头一棒，需要根据raft论文的figure8进行解决，leader。根据前任及博主自己的经验，unreliable figure8的除了上述这一点以外，需要对。博主由于之前的不严谨，给自己留下了很大的改进困难，最后不得不重构代码。进行一定的设计，可以参考课程里老师提出的意见。一下为博主的github仓库，需要的可以参考。有一定的考验，那么就需要对。
【DirectX sdk 学习使用】
qq_41610493的博客
10-01 372
设置包含目录：打开你的项目属性，导航到VC++目录，然后在包含目录中添加DirectX SDK的Include文件夹路径。设置库目录：同样在VC++目录中，在库目录中添加DirectX SDK的Lib文件夹路径。运行安装程序：下载完成后，找到下载的安装程序（通常是一个.exe文件），双击运行。选择安装路径：选择你希望安装DirectX SDK的路径，或者使用默认路径。如果你有任何问题或需要进一步的指导，请随时告诉我。接受许可协议：在安装向导中，阅读并接受许可协议。完成安装：点击“安装”按钮，等待安装完成。
操作系统 | 学习笔记 | 王道 | 4.1 文件系统基础
最新发布
m0_74795952的博客
10-07 518
定义文件是以计算机硬盘为载体的存储在计算机上的信息集合，在用户进行的输入、输出中，以文件位基本单位。文件管理系统是实现的文件的访问、修改和保存，对文件维护管理的系统。文件的组成文件的结构数据项记录：是一组相关的数据项的集合，用于描述一个对象在某方面的属性。文件：是指由创建者所定义的、具有文件名的一组相关元素的集合，分为有结构文件和无结构文件两种。
cesium是如何实现热力图的
05-16
Cesium是一种用于创建3D地图和地球可视化应用程序的JavaScript库。它提供了许多功能，包括用于创建热力图的API。 Cesium中的热力图是通过将数据点与权重值关联来创建的。这些权重值可以是任何数字，例如温度、人口密度等。Cesium会将这些数据点绘制到地球表面上，并使用颜色映射来表示权重值。这样，就可以看出哪些地区具有更高的权重值，从而创建热力图。 具体实现步骤如下： 1.将数据点转换为Cesium中的Cartesian3坐标系。 2.使用Cesium的Entity API创建一个实体对象，并将其添加到场景中。 3.将实体对象的位置设置为数据点的Cartesian3坐标。 4.将实体对象的材质设置为热力图的颜色映射，这可以通过创建一个渐变贴图来实现。 5.根据数据点的权重值设置实体对象的缩放比例，以便更好地显示热力图。 通过这些步骤，就可以使用Cesium创建热力图了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cesium进阶学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值