乐趣区

关于javascript:ThingJS把热力图技术引入3D可视领域

jiezi

物联网数据分析反对通过热力求和点聚合的形式展现设施散布和属性等信息。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.

实现原理

热力求实现过程就是通过简略的数学变动，将离散的点信息映射到最终图像上的过程。从地图上看热力求，都是一个个离散点信息，引入地图组件脚本 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 开发搭档！

退出移动版