iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >基于Cesium实现加载显示热力图
  • 344
分享到

基于Cesium实现加载显示热力图

2024-04-02 19:04:59 344人浏览 薄情痞子
摘要

目录CesiumHeatmap编写案例我是一个小白,到目前为止对于3D方面的东西不是特别的懂,所以说,对于cesium使用的并不是特别的好,可以说根本不会吧,所以说也是在一点一点摸索

我是一个小白,到目前为止对于3D方面的东西不是特别的懂,所以说,对于cesium使用的并不是特别的好,可以说根本不会吧,所以说也是在一点一点摸索,一点一点学习的过程中,所以说有些博文写的可能不是准确的,只是用来记录一下学习过程,错了别喷我啊!!

CesiumHeatmap

首先嘞,绘制热力图需要有一个工具,就是使用 CesiumHeatmap 这个工具,然后呢,下面是他的一个GitHub的地址。

CesiumHeatmap 【时空门~ 嗖~】

下载下来放到项目里面就可以了。

我把他放到了这里面嘞。

然后在项目里面引入一下。

<script src="./CesiumHeatmap/CesiumHeatmap.js"></script>

编写案例

  // 测试热力图
  function addHeatMap() {
    let bounds = {
      west: 106.243911,
      east: 106.270811,
      south: 29.244545,
      north: 29.289995,
    };
    let heatMap = CesiumHeatmap.create(
      viewer, // your cesium viewer
      bounds, // bounds for heatmap layer
      {
        // heatmap.js options Go here
        // maxOpacity: 0.3
        gradient: {  // the gradient used if not given in the heatmap options object
	  '.3': '#d9e7fc',
	  '.65': '#2a7aed',
	  '.8': '#fbd801',
	  '.95': '#18c3a1'
	},
      },
    );
    let data = [
      { x: 106.254153, y: 29.2883939, value: 76 },
      { x: 106.2654284, y: 29.2854935, value: 63 },
      { x: 106.265005, y: 29.284573, value: 1 },
      { x: 106.264001, y: 29.283456, value: 21 },
      { x: 106.263219, y: 29.282181, value: 28 },
      { x: 106.262788, y: 29.279673, value: 41 },
      { x: 106.2632087, y: 29.2742665, value: 75 },
      { x: 106.2505158, y: 29.28138, value: 76 },
      { x: 106.2531094, y: 29.2833591, value: 100 },
      { x: 106.2531093, y: 29.2844560, value: 80 },
      { x: 106.253293, y: 29.284826, value: 1 },
      { x: 106.250099, y: 29.285638, value: 21 },
      { x: 106.2469149, y: 29.2864109, value: 28 },
      { x: 106.254119, y: 29.276274, value: 41 },
    ];
    let valueMin = 0;
    let valueMax = 50;
    heatMap.setWGS84Data(valueMin, valueMax, data);
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(106.254153, 29.2742665, 2e3),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: 0.0,
      },
    });
  }

效果就是这个样子。

以上就是基于Cesium实现加载显示热力图的详细内容,更多关于Cesium显示热力图的资料请关注编程网其它相关文章!

--结束END--

本文标题: 基于Cesium实现加载显示热力图

本文链接: https://www.lsjlt.com/news/152279.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 基于Cesium实现加载显示热力图
    目录CesiumHeatmap编写案例我是一个小白,到目前为止对于3D方面的东西不是特别的懂,所以说,对于cesium使用的并不是特别的好,可以说根本不会吧,所以说也是在一点一点摸索...
    99+
    2024-04-02
  • 基于Cesium如何实现加载显示热力图
    这篇“基于Cesium如何实现加载显示热力图”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“基于Cesium如何实现加载显示热...
    99+
    2023-07-02
  • 基于Python如何实现配置热加载
    本篇内容介绍了“基于Python如何实现配置热加载”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!背景由于最近工作需求,需要在已有项目添加一个...
    99+
    2023-07-02
  • 基于Python实现配置热加载的方法详解
    目录背景如何实现使用多进程实现配置热加载使用signal信号量来实现热加载采用multiprocessing.Event 来实现配置热加载结语背景 由于最近工作需求,需要在...
    99+
    2024-04-02
  • 基于Cesium实现拖拽3D模型的示例代码
    目录添加基站模型拖拽这个地方是想实现一个什么效果呢?就是使用 cesium 在地图上添加一个3D模型,然后实现拖拽效果。 添加基站模型 然后这篇博文介绍的主要不是添加模型,但是也简单...
    99+
    2024-04-02
  • vue中如何实现图片加载与显示默认图片
    这篇文章主要为大家展示了“vue中如何实现图片加载与显示默认图片”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中如何实现图片加载与显示默认图片”这篇文章吧...
    99+
    2024-04-02
  • Android中怎么实现图片压缩并加载显示
    这篇文章将为大家详细讲解有关Android中怎么实现图片压缩并加载显示,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。解析:图片压缩的关键就是options.inSampleSize ...
    99+
    2023-05-30
    android
  • 基于JS实现点击图片在弹出层显示大图效果
    Javascript是个好东西。 Jquery是基于这个好东西的一个强大的库。 今天要实现的功能是基于这两个玩意儿的。 点击图片,在弹出层显示原图。 大概效果是这样的: 上代码: ...
    99+
    2022-11-13
    JS弹出层显示大图 JS 显示大图 JS 大图
  • 怎么用vue代码实现图片加载与显示默认图片
    这篇文章主要讲解了“怎么用vue代码实现图片加载与显示默认图片”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用vue代码实现图片加载与显示默认图片”吧!HTML:<div ...
    99+
    2023-07-04
  • 基于SpringBoot实现图片上传及图片回显
    目录数据库脚本框架搭建pom.xml 依赖配置文件实体类DAOService文件上传添加页面控制器列表页面运行测试问题全局异常处理1. @ControllerAdvice + @Ex...
    99+
    2024-04-02
  • 基于OpenCv与JVM如何实现加载保存图像功能
    今天给大家介绍一下基于OpenCv与JVM如何实现加载保存图像功能。,文章的内容小编觉得不错,现在给大家分享一下,觉得有需要的朋友可以了解一下,希望对大家有所帮助,下面跟着小编的思路一起来阅读吧。加载图片openCv有一个名imread的简...
    99+
    2023-06-26
  • 基于OpenCv与JVM实现加载保存图像功能(JAVA 图像处理)
    目录加载图片保存图片加载图片 openCv有一个名imread的简单函数,用于从文件中读取图像 imread 函数位于Imgcodecs类的同名包中。 加载图片代码 import ...
    99+
    2024-04-02
  • 基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注
    目录官方案例绘制矩形绘制多边形绘制椭圆绘制圆形绘制立方体绘制椭圆柱体绘制多边柱体绘制圆柱体立体串串好难形容 又平面又立体的板板“回”字绘制立方体,扭转一定角度...
    99+
    2024-04-02
  • Android基于Glide v4.x如何实现图片加载进度监听
    这篇文章主要介绍Android基于Glide v4.x如何实现图片加载进度监听,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Glide是一款优秀的图片加载框架,简单的配置便可以使用起来,为开发者省下了很多的功夫。不过...
    99+
    2023-05-30
    glide android
  • Vue实现多图添加显示和删除
    本文实例为大家分享了Vue实现多图添加显示和删除的具体代码,供大家参考,具体内容如下 效果图: 首先给一个input[type="file"],然后隐藏掉,当点击加号所在的区域时,...
    99+
    2024-04-02
  • 基于vue2如何实现上拉加载功能
    这篇文章主要为大家展示了“基于vue2如何实现上拉加载功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“基于vue2如何实现上拉加载功能”这篇文章吧。具体内容如...
    99+
    2024-04-02
  • 基于Springboot+vue如何实现图片上传至数据库并显示
    这篇文章主要讲解了“基于Springboot+vue如何实现图片上传至数据库并显示”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于Springboot+vue如何实现图片上传至数据库并显示...
    99+
    2023-07-06
  • vue基于vant实现上拉加载下拉刷新的示例代码
    前言 普遍存在于各种app中的上拉加载下拉刷新功能大家都不陌生吧,一般来说,在数据量比较大的情况下,为了更快的渲染和给用户更好的观感体验,我们会将数据做分页处理,让其批量加载,这样一...
    99+
    2024-04-02
  • 基于Flutter实现风车加载组件的制作
    目录前言接口定义实现思路风车绘制旋转效果代码实现WindmillIndicator定义旋转速度设定风车叶片绘制风车组件运行效果总结前言 Flutter 官方提供了诸如 Circula...
    99+
    2024-04-02
  • 基于Vue+Openlayer实现动态加载geojson的方法
    加载1个或多个要素 <template> <div id="map" style="width: 100vw; height: 100vh"><...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作