请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 521|回复: 0

[分享] ThingJS:若何高效开辟3D热力图(麋集恐惧症慎入)

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-9-24 20:59:00 | 显示全部楼层 |阅读模式

热力图现实上它同即是我们常说的密度图,ThingJS让你高效开辟热力图,和甲方加倍密切。

热力图是地理位置可视化的一种表示方式,可以使得比均匀发生几率更高的地区可以显现出来,例如高犯罪区、高交通变乱区、高仓库地区。

百度舆图和高德舆图的JavaScript API都供给了热力图的绘制方式,都是将热力图作为新的图层,叠加到舆图上。留意热力图数据源的格式与FeatureLayer(要素图层)不异,都是json数据格式。

首先援用舆图组件剧本,建立TileLayer并作为图块图层增加到舆图。TileLayer是ThingJS API公然的缓存舆图办事,平铺的图层被缓存后,衬着速度更快,公布后利用供给的url地址便可以在代码中挪用并在舆图上显现和编辑。

  1. // 援用舆图组件剧本
  2. THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
  3. var map = app.create({
  4. type: 'Map',
  5. style: {
  6. night: false
  7. },
  8. attribution: 'Google'
  9. });
  10. var tileLayer1 = app.create({
  11. type: 'TileLayer',
  12. id: 'tileLayer1',
  13. url: 'http://mt0.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}'
  14. });
  15. map.baseLayers.add(tileLayer1);
复制代码


接下来就设备明天的配角“热力图”,官方图层命名HeatMayLayer.

ThingJS:若何高效开辟3D热力图(麋集恐惧症慎入)

实现道理

热力图实现进程就是经过简单的数学变化,将离散的点信息映照到终极图像上的进程。从舆图上看热力图,都是一个个离散点信息,引入舆图组件剧本map,作为终极热力图像发生影响的地区。

将一切离散点Map停止叠加,发生一幅灰度图像。离散点密度越高的地方,灰度图中像素点数值越高,即图像越亮。valueField代表用来天生热力牟利用的权重字段,不传的话一切点的权重不异,假如传,则从数据的properties中读取该字段的值作为权重值。

最初将天生的灰度图映照到彩色图像上,官方映照关系设备以下:

官方示例(部分)以下:

  1. function drawGeoHeatMap() {
  2. $.ajax({
  3. type: 'GET',
  4. url: 'https://www.thingjs.com/uearth/res/beijing-POIs-3211.geojson',
  5. dataType: 'json',
  6. success: function (data) {
  7. app.camera.earthFlyTo({
  8. time: 2000,
  9. lonlat: [116.44474497103292, 39.9118522313402],
  10. height: 5000,
  11. pitch:80,
  12. complete: function () {
  13. var layer = app.create({
  14. type: 'HeatMapLayer',
  15. dataSource: data, //数据源 geojson格式
  16. valueField: config.valueField, //权重字段
  17. needsUpdate: config.needsUpdate, //能否随相机的变化重新绘制热力图
  18. renderer: {
  19. radius: config.radius, // 影响半径
  20. minOpacity: config.minOpacity,//最小值的通明度
  21. maxOpacity: config.maxOpacity,//最大值的通明度
  22. mosaic: config.mosaic,//能否利用马赛克结果
  23. mosaicSize: config.mosaicSize,//马赛克结果的像素值
  24. gradient: gradientObj[config.gradient] //色带
  25. },
  26. });
  27. map.addLayer(layer);
  28. }
  29. });
  30. }
  31. });
  32. }
  33. });
复制代码


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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则