Question

我正在使用leafleat和heatmap.js API（新的2.x版本）。设置半径值时出现问题。我正在尝试执行一些内核密度的带宽选择方法并获得不利的结果。有没有合理的方法根据数据的空间分布特征计算半径？

问题是如何动态计算适当的半径或其他参数来生成平滑的热图，即使分布非常稀疏？

以下是我的演示示例：

 <script>
    window.onload = function () {
        var baseLayer = L.tileLayer(
                'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: 'Copyright &copy; 2015',
                    maxZoom: 22,
                    minZoom: 10
                }
        );
        var cfg = {
            "blur": .85,
            "maxOpacity": .75,
            "minOpacity": 0.02,
            // scales the radius based on map zoom
            "scaleRadius": true,
            // if set to false the heatmap uses the global maximum for colorization
            // if activated: uses the data maximum within the current map boundaries
            //   (there will always be a red spot with useLocalExtremas true)
            "useLocalExtrema": true,
            // which field name in your data represents the latitude - default "lat"
            latField: 'lat',
            // which field name in your data represents the longitude - default "lng"
            lngField: 'lng',
            // which field name in your data represents the data value - default "value"
            valueField: 'count'
            ,
            gradient: {
                0.0: "rgba(000,000,255,0)",
                0.1: "rgba(000,000,255,1)",
                0.2: "rgba(000,255,000,1)",
                0.5: "rgba(000,255,000,1)",
                0.8: "rgba(255,255,000,1)",
                1.0: "rgba(255,000,000,1)"
            }
        };
        /*  legend code */
        // we want to display the gradient, so we have to draw it
        var legendCanvas = document.createElement('canvas');
        legendCanvas.width = 100;
        legendCanvas.height = 10;
        var legendCtx = legendCanvas.getContext('2d');
        var gradientCfg = {};
        var heatmapLayer = new HeatmapOverlay(cfg);
        var southWest = L.latLng(15.78, 73.5577),
                northEast = L.latLng(53.56086, 134.7739),
                bounds = L.latLngBounds(southWest, northEast);
        var map = new L.Map('map_l', {
            center: new L.LatLng(36.105215, 120.384428),
            zoom: 11,
            maxBounds: bounds,
            layers: [baseLayer, heatmapLayer]
        });

        function getRandomArbitrary(min, max) {
            return Math.random() * (max - min) + min;
        }

        // generate 1000 datapoints
        // randomly generate extremas
        var t = [];
        var iii;
        for (iii = 0; iii < 1000; iii++) {
            var xx = getRandomArbitrary(119.5, 120.5);
            var yy = getRandomArbitrary(36, 36.2);
            var cc = getRandomArbitrary(1, 1000);
            // btw, we can set a radius on a point basis
            var rr = getRandomArbitrary(0.001, 0.005);
            // add to dataset
            t.push({lng: xx, lat: yy, count: cc, radius: rr});
        }
        heatmapLayer.setData({min: 1, max: 1000, data: t});
    };
</script>

如何根据数据动态计算heatmap.js的半径

0 个答案: