关于javascript:在地图上创建热力图的方法

热力求，是以非凡高亮的模式显示在天文区域的图示。通过色彩变动水平，能够直观反馈出热点散布，区域汇集等数据信息。地图中的热力求就是把地图和热力求进行联合，实现在地图中进行热力求的显示。
热力求剖析的实质——点数据分析。一般来说，点模式分析能够用来形容任何类型的事件数据, 因为每一事件都能够抽象化为空间上的一个地位点。通过点数据来剖析暗藏在数据背地的法则。通过剖析，能够使点数据变为点信息，能够更好地了解空间点过程，能够精确地发现暗藏在空间点背地的法则。热力求中点汇集散布，为剖析提供了有限可能。

ThingJS 可能疾速实现在地图中增加热力求图层，左侧面板可对热力求各种参数进行调整。
热力求实现过程就是通过简略的数学变动，将离散的点信息映射到最终图像上的过程。从地图上看热力求，都是一个个离散点信息，引入地图组件脚本 map，作为最终热力图像产生影响的区域。将所有离散点 Map 进行叠加，产生一幅灰度图像。离散点密度越高的中央，灰度图中像素点数值越高，即图像越亮。

残缺代码如下：

var app = new THING.App();
 app.background = [0, 0, 0];
 
 // 援用地图组件脚本
 THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
 
 var map = app.create({
 type: 'Map',
 style: {night: false},
 attribution: '高德'
 });
 
 var tileLayer1 = app.create({
 type: 'TileLayer',
 id: 'tileLayer1',
 url: 'https://webst0{1,2,3,4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
 });
 map.baseLayers.add(tileLayer1);
 drawGeoHeatMap();
 
 var gradientObj = {'惯例': { 0: 'rgb(0,0,255)', 0.33: 'rgb(0,255,0)', 0.66: 'rgb(255,255,0)', 1.0: 'rgb(255,0,0)' }
 , '黄色': {0: 'rgb(255,237,160)', 0.33: 'rgb(254,217,118)', 0.66: 'rgb(227,26,28)', 1.0: 'rgb(189,0,38)' }
 , '蓝色': {0: 'rgb(8,104,172)', 0.33: 'rgb(67,162,202)', 0.66: 'rgb(100,200,200)', 1.0: 'rgb(186,228,188)' }
 };
 var panel = new THING.widget.Panel({
 titleText: '热力求设置',
 hasTitle: true,
 width: 250
 });
 
 var config = {
 mosaic: false,
  needsUpdate: true,
 mosaicSize: 5,
 radius: 11,
 minOpacity: 0.2,
 maxOpacity: 0.8,
 gradient: '惯例',
 };
 
 panel.addBoolean(config, 'mosaic').caption('开启马赛克').onChange(v => {app.query('.HeatMapLayer')[0].renderer.mosaic = v;
 });
 panel.addBoolean(config, 'needsUpdate').caption('随相机变动更新').onChange(v => {app.query('.HeatMapLayer')[0].needsUpdate = v;
 });
 panel.addNumberSlider(config, 'radius').caption('热度半径').min(1).max(50).isChangeValue(true).on('change', function (v) {app.query('.HeatMapLayer')[0].renderer.radius = v;
 });
 panel.addNumberSlider(config, 'minOpacity').caption('最小值透明度').step(0.01).min(0).max(1.0).isChangeValue(true).on('change', function (v) {app.query('.HeatMapLayer')[0].renderer.minOpacity = v;
 });
 panel.addNumberSlider(config, 'maxOpacity').caption('最大值透明度').step(0.01).min(0).max(1.0).isChangeValue(true).on('change', function (v) {app.query('.HeatMapLayer')[0].renderer.maxOpacity = v;
 });
 panel.addRadio(config, 'gradient', ['惯例', '黄色', '蓝色']).on('change', function (v) {app.query('.HeatMapLayer')[0].renderer.gradient = gradientObj[v];
 });
 
 // 创立热力求 数据源的格局与 FeatureLayer 雷同
 //valueField 代表用来生成热力求应用的权重字段, 不传的话所有点的权重雷同, 如果传则从数据的 properties 中读取该字段的值作为权重值
 function drawGeoHeatMap() {
 $.ajax({
 type: 'GET',
 url: 'https://www.thingjs.com/uearth/res/beijing-POIs-3211.geojson',
 dataType: 'json',
 success: function (data) {
 
 // 摄像机航行到某地位
 app.camera.flyTo({'position': [2180781.194387175, 4091480.6054394436, 4392164.618219831],
 'target': [2175757.1660447326, 4092209.551760269, 4381641.899891754],
 'time': 2000,
 '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);
 }
 });
 }
 });
 }