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.

實作原理

熱力圖實作過程就是通過簡單的數學變化，将離散的點資訊映射到最終圖像上的過程。從地圖上看熱力圖，都是一個個離散點資訊，引入地圖元件腳本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功能更豐富！