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功能更丰富!

相关文章
|
自然语言处理 小程序 PHP
分享66个PHP源码,总有一款适合您
分享66个PHP源码,总有一款适合您
497 0
|
8天前
|
JavaScript API iOS开发
DeepSeek Harness下载、安装、配置一篇搞定(2026整理,送常用插件)
DeepSeek Harness(DSH)是DeepSeek于2026年开源的MIT协议AI Agent框架,支持插件化组装模型、工具、沙箱与UI,兼容主流大模型。本文提供免Node.js的桌面端安装包(Win/macOS),含详细图文教程及热门插件推荐。
3603 34
|
7天前
|
Linux 开发工具 iOS开发
Codex保姆级教程(下载+安装+登录+使用,含所有版本,2026最新)
Codex是OpenAI推出的开源AI编程智能体,本地运行,可理解整个代码库,支持自然语言指令改代码、执行命令、跑测试、修Bug,兼容Win/macOS/Linux。(239字)
3078 10
|
3天前
|
云安全 人工智能 安全
|
8天前
|
iOS开发 Docker MacOS
【2026实测】Docker Desktop下载、安装、汉化、配置教程(附官网安装包)
Docker Desktop 是 Docker 官方推出的桌面容器管理工具,集成引擎、CLI、图形界面与 Kubernetes,支持 Win/macOS/Linux。2026 最新版 4.88.1 强化 ARM 原生运行、镜像加速及资源可视化,附中文汉化与国内镜像配置指南。
1648 6
|
9天前
|
安全 算法 定位技术
《高性价比人生指南》完整原版:普通人用最少的资源,过好这一生的底层逻辑~How To Live Better
📖《高性价比人生指南》是一份基于实证、拒绝焦虑的生存手册,倡导以“人生时薪”为视角,重新计算时间、金钱与精力的成本与收益。它不承诺逆袭,只教人算清账:省下的钱若耗掉时间便亏;买体验比买物品更值;睡眠是最高杠杆的健康投资;关系贵在情绪价值而非表面热络;学习重在改变行为而非自我安慰。核心理念:用低成本、高回报的微小行动,换取长期的选择权——不是成为谁,而是掌控自己人生的主动权。
2008 4
|
云安全 安全 网络安全
|
21天前
|
人工智能 API 开发工具
DeepSeek Harness 神插件:白嫖 13 家大厂模型
`dsh-our-free-model` 是 DeepSeek Harness 神级插件:零配置、零API Key、零账号,聚合13家大厂免费模型(含DeepSeek V4.1 Flash、Kimi K3等),支持本地网关、用量看板与自动降级,真正实现“白嫖即用”。
3813 55