在地图上添加热力图

热力图（heatmap）是一种通过颜色值把原本抽象、独立的数据展示在地图上的地图表达。热力图可以更直观地展示不同区域（位置）的热度，如景点热度（百度热力图）、海洋盐度、区域影响力等。

SupeMap的JavaScript API提供了热力图图层HeatMapLayer，使用该类可以快速制作热力图。

Step1 初始化地图

制作热力图的第一步，需要初始化地图，并检查浏览器的兼容性。本例使用World地图为底图。

var map, layer, heatMapLayer,
    url = "http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World",
    value = "VZ88xbrMEMpGv4yiisTojgVq",
    name = "key";
SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "key");

function init(){
    //检查浏览器兼容性
    if(!document.createElement('canvas').getContext) {
        alert('您的浏览器不支持 canvas，请升级');
        return;
    }
    //初始化地图，添加基本控件
    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        })]
    });
    map.addControl(new SuperMap.Control.MousePosition());
……
}

分别初始化地图底图和热力图图层：

    //初始化地图底图
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
    //初始化热力图图层HeatMapLayer
    heatMapLayer = new SuperMap.Layer.HeatMapLayer(
            "heatMap",
            {
                "radius":45,
                "featureWeight":"value",
                "featureRadius":"geoRadius"
            }
    );
    layer.events.on({"layerInitialized": addLayer});

Step2 制作热力图

本例根据传入的热点半径heatradius和根据热点数量heatNums随机生成的热力点heatPoints制作热点图。

如果想要根据固定点制作热点图，则直接将点的坐标位置赋值给heatPoints数组即可。

//生成热力图上的热点
function createHeatPoints(){
    clearHeatPoints();
    var heatPoints = [];
    var num = parseInt(document.getElementById('heatNums').value);
    var radius = parseInt(document.getElementById('heatradius').value);
    var unit = document.getElementById("radiusUnit").value,
            useGeoRadius = false;
    if("degree" == unit){
        useGeoRadius = true;
    }
    heatMapLayer.radius = radius;
    //根据设置的点的数量，随机生成热力点
    for(var i=0; i < num; i++){
        heatPoints[i] = new SuperMap.Feature.Vector(
                new SuperMap.Geometry.Point(
                        Math.random()*360 - 180,
                        Math.random()*180 - 90
                ),
                {
                    "value":Math.random()*9,
                    "geoRadius":useGeoRadius?radius:null
                }
        );
    }
    heatMapLayer.addFeatures(heatPoints);
}

Step3 把底图、热力图图层添加到地图上

//把底图、热力图图层添加到地图上，并设置地图默认的中心点坐标和比例尺级别
function addLayer() {
    map.addLayers([layer,heatMapLayer]);
    map.setCenter(new SuperMap.LonLat(0, 0), 0);
}

Step4 删除已有的热力图

function clearHeatPoints(){
    heatMapLayer.removeAllFeatures();
}

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

• 在线演示
• 源码编辑