热图是地理区域以特殊突出显示形式的图形表示。通过颜色的变化程度，可以直观地反映热点分布、区域聚集等数据信息。地图中的热力图是将地图和热力图结合起来，实现热力图在地图中的显示。热力图分析的本质——点数据分析。一般来说，点模式分析可以用来描述任何类型的事件数据，因为每个事件都可以抽象为空间中的一个位置点。利用点数据分析隐藏在数据背后的规律。通过分析，可以将点数据转化为点信息，更好地理解空间点的过程，准确发现隐藏在空间点背后的规律。热图中点的聚合和分布为分析提供了无限可能。ThingJS可以快速在地图上添加热图图层，左侧面板可以调整热图的各种参数。热力图的实现过程是将离散的点信息通过简单的数学变化映射到最终图像的过程。从地图上看热力图，都是离散的点信息，引入地图组件脚本地图作为最终热力图会影响的区域。所有的离散点Map叠加生成灰度图。离散点密度越高，灰度图像中的像素值越高，即图像越亮。完整代码如下：varapp=newTHING.App();app.background=[0,0,0];//引用地图组件脚本THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'],function(){varmap=app.create({type:'Map',style:{night:false},attribution:'HighGerman'});vartileLayer1=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();vargradientObj={'General':{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)'},'blue':{0:'rgb(8,104,172)',0.33:'rgb(67,162,202)',0.66:'rgb(100,200,200)',1.0:'rgb(186,228,188)'}};varpanel=newTHING.widget.Panel({titleText:'HeatmapSettings',hasTitle:true,width:250});varconfig={mosaic:false,needsUpdate:true,mosaicSize:5,radius:11、minOpacity:0.2,maxOpacity:0.8,gradient:'General',};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('heatradius').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('MaxOpacity').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',['regular','yellow','blue']).on('change',function(v){app.query('.HeatMapLayer')[0].renderer.gradient=gradientObj[v];});//创建热图数据源的格式与FeatureLayer相同//valueField表示用于生成热图字段的权重，如果不传则所有点权重相同，如果传则读取该字段的值从数据的属性作为权值函数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(){varlayer=app.create({type:'HeatMapLayer',dataSource:data,//数据源geojson格式valueField:config.valueField,//weightfieldneedsUpdate:config.needsUpdate,//是否重绘热图随相机变化renderer:{radius:config.radius,//影响半径minOpacity:config.minOpacity,//最小透明度maxOpacity:config.maxOpacity,//最大透明度mosaic:config.mosaic,//是否使用马赛克效果mosaicSize:config.mosaicSize,//马赛克效果的像素值渐变：gradientObj[config.gradient]//色带},});map.addLayer（图层）；}});}});}
