ArcGIS API for Javascript 4.X扩展heatmap.js实现热力图

ArcGIS API for Javascript 4.X扩展heatmap.js实现热力图

虽然ArcGIS API for Javascript 4.X中已经提供了热力图对应的渲染器HeatmapRenderer,但是在实际应用中,很多时候我们不想依赖于Server服务,而是通过业务数据与前端来实现热力图的快速渲染。前段时间有朋友问到类似的问题,所以小编想到了一个网页热力图神器——heatmap.js

heatmap.js官网地址https://www.patrick-wied.at/static/heatmapjs/
heatmap.js官方文档https://www.patrick-wied.at/static/heatmapjs/docs.html

本篇是要介绍基于ArcGIS API for Javascript 4.X集成heatmap.js实现三维地图上的热力图渲染,效果如下图所示:
在这里插入图片描述
在这里插入图片描述

1、版本说明

  • ArcGIS API for Javascript 4.10
  • heatmap.js v2.0.5

2、实现思路

二者集成的关键在于坐标转换,heatmap.js的数据是一个基于屏幕坐标的对象,如下所示,x和y为屏幕横纵轴坐标,value为对应点的权重值。需要注意的是:这些坐标点的属性必须为整数

var dataPoint = {
    
 	 x: 5, // 屏幕横纵坐标 
 	 y: 5, // 屏幕纵轴坐标
  	 value: 100 // value值
};

我们一般用到的数据往往是经纬度或者平面坐标,本篇以经纬度为例,坐标系为WGS84坐标系【wkid:4326】,通过SceneView对象的toScreen()方法将原始数据转换成平均坐标,然后实例化heatmapInstance,并添加转换后的数据进行渲染。下面是坐标转换的核心代码:

 /*转换数据*/
convertHeatmapData: function (data) {
   
    var heatPluginData = {
   
        max: this.MaxValue(data),
        data: [] //空数据
    };
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值