ThingJS:如何高效开发热力图,和甲方更加亲密?

简介: 热力图实际上它等同于我们常说的密度图,ThingJS让你高效开发热力图,和甲方更加亲密。

热力图实际上它等同于我们常说的密度图,ThingJS让你高效开发热力图,和甲方更加亲密。

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

百度地图和高德地图的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);

接下来就设置今天的主角“热力图”,官方图层命名HeatMayLayer.
1.jpg

实现原理

热力图实现过程就是通过简单的数学变化,将离散的点信息映射到最终图像上的过程。从地图上看热力图,都是一个个离散点信息,引入地图组件脚本map,作为最终热力图像产生影响的区域。
将所有离散点Map进行叠加,产生一幅灰度图像。离散点密度越高的地方,灰度图中像素点数值越高,即图像越亮。valueField代表用来生成热力图使用的权重字段,不传的话所有点的权重相同,如果传,则从数据的properties中读取该字段的值作为权重值。
最后将生成的灰度图映射到彩色图像上,官方映射关系设置如下:

官方示例(部分)如下:

   $.ajax({
     type: 'GET',
     url: 'https://www.thingjs.com/uearth/res/beijing-POIs-3211.geojson',
     dataType: 'json',
     success: function (data) {
       app.camera.earthFlyTo({
         time: 2000,
         lonlat: [116.44474497103292, 39.9118522313402],
         height: 5000,
         pitch:80,
         complete: function () {
           var layer = app.create({
             type: 'HeatMapLayer',
             dataSource: data, //数据源 geojson格式
             valueField: config.valueField, //权重字段
             needsUpdate: config.needsUpdate, //是否随相机的变化重新绘制热力图
             renderer: {
               radius: config.radius, // 影响半径
               minOpacity: config.minOpacity,//最小值的透明度
               maxOpacity: config.maxOpacity,//最大值的透明度
               mosaic: config.mosaic,//是否使用马赛克效果
               mosaicSize: config.mosaicSize,//马赛克效果的像素值
               gradient: gradientObj[config.gradient] //色带
             },
           });
           map.addLayer(layer);
         }
       });
     }
   });
 }
});

ThingJS让你的项目成本更低、3D功能更丰富!

相关文章
|
2月前
|
测试技术 定位技术 项目管理
一图搞懂,全流程项目管理实践地图,驱动:市场-研发-售后
为了实现市场运营、产品研发与售后服务的有效协作,YesDev项目管理工具提供了一个全面的解决方案。它覆盖从项目成单到交付的全过程,通过清晰地划分市场运营、产品研发和售后服务三个主要阶段,加上组织管理作为基础设施,形成3+1的管理体系。 YesDev提供了一套从市场到售后的全流程管理方案,帮助企业实现跨部门高效协作。
|
2月前
|
数据可视化 前端开发
这套可视化大屏,看似很复杂,其实。。
这套可视化大屏,看似很复杂,其实。。
|
5月前
|
新零售 供应链 搜索推荐
一条线公排互助系统开发|方案设计|功能板块
智能零售是一种基于物联网技术、人工智能技术等高科技手段的零售模式
|
5月前
如何使用敏捷相关知识管理好自己的装修过程?
如何使用敏捷相关知识管理好自己的装修过程?
如何使用敏捷相关知识管理好自己的装修过程?
|
敏捷开发 数据可视化 安全
敏捷工具-需求管理工具推荐
最专业的敏捷需求管理工具推荐
|
数据可视化
【数据可视化】预制菜行业分析(二)——发展驱动因素
近年来,预制菜开始从大型连锁餐饮企业的中央厨房渗透到外卖餐饮平台,并逐渐从 B 端走向 C 端。消费者购买后只需要简单加工即可食用,省去了食材采购、处理步骤,具有便捷、高效、口味保持度高的特点。
|
敏捷开发 数据可视化 测试技术
照亮问题——效能提升从可视化交付过程开始| 学习笔记
快速学习照亮问题——效能提升从可视化交付过程开始
照亮问题——效能提升从可视化交付过程开始| 学习笔记
|
开发框架 数据可视化 Java
使用云巧工坊编写业务流程并可视化
软件产品都面临业务需求、流程快速变化的现状,往往之前设计绘制的业务流程在几个月之后就会失效的问题,如果按照一定语法开发的代码可以实时正确反应业务流程就解决了业务流程保鲜的问题。yunqiao-boot-starter-flow 就是解决这一问题的开发框架。
310 0
|
前端开发 安全 vr&ar
提升生产力,7 款好用的原型图工具推荐给你
目前有很多 UI 设计工具可以帮助您设计用户界面,码匠这里分享 7 款好用的原型图工具。
659 0
提升生产力,7 款好用的原型图工具推荐给你
|
人工智能 自然语言处理 测试技术
热饭的测开成果盘点第十九期:移动端自动化智能平台
本期介绍的是移动端app智能架构平台,效果和上期一样,也是直接根据用例 来直接执行,它的初衷是可以简单的对我们测试环境几千条用例全部自动执行的框架。在具体稳定和速度上可能不如原始写法,但是对付这种上千条的大需求,是有奇效的。
热饭的测开成果盘点第十九期:移动端自动化智能平台