ThingJS让你更聪明实现“热力图”可视化

最新推荐文章于 2021-12-25 02:48:52 发布

ThingJS_小锘

最新推荐文章于 2021-12-25 02:48:52 发布

阅读量1.6k

点赞数

分类专栏： ThingJS 3D可视化物联网文章标签： javascript

本文链接：https://blog.csdn.net/ThingJS/article/details/108783238

版权

热力图是一种展示地理位置分布和密度的技术，常用在地图API中。ThingJS提供简单的方法在3D场景中实现热力图，通过TileLayer缓存地图服务加速渲染，并使用HeatMapLayer来创建热力图。离散点信息经过数学变换映射到图像，点密度高的区域显示为亮色。使用valueField设置权重，生成灰度图后再映射到彩色图像。借助ThingJS，3D数据可视化变得简单易行。

摘要由CSDN通过智能技术生成

热力图是用不同颜色的区块叠加在地图上实时描述人群分布、密度和变化趋势的一个技术。ThingJS让你更聪明实现数据可视化，3D不来试一试？

热力图是地理位置可视化的一种表现方式，能够使得比平均发生概率更高的区域能够浮现出来，例如高犯罪区、高交通事故区、高仓库区域。

百度地图和高德地图的JavaScript API都提供了热力图的绘制方法，都是将热力图作为新的图层，叠加到地图上。注意热力图数据源的格式与FeatureLayer（要素图层）相同，都是json数据格式。

首先引用地图组件脚本，创建TileLayer并作为图块图层添加到地图。TileLayer是ThingJS API公开的缓存地图服务，平铺的图层被缓存后，渲染速度更快，发布后使用提供的url地址就可以在代码中调用并在地图上显示和编辑。

// 引用地图组件脚本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {

  var map = app.create({
    type: 'Map',
    style: {
      night: false
    },
    attribution: 'Google'
  });
  var tileLayer1 = app.create({
    type: 'TileLayer',
    id: 'tileLayer1',
    url: 'http://mt0.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}'
  });
  map.baseLayers.add(tileLayer1);

接下来就设置今天的主角“热力图”࿰