Heatmap.js Leaflet Heatmap

Heatmap.js Leaflet Heatmap

本文关键字：Heatmap Leaflet js      更新时间：2023-09-26

Im正在尝试通过传单插件实现传单的热图//www.patrick-wied.at/staticc/heatmapjs/plugin-Leaflet-layer.html，

但由于某种原因，它忽略了我的"值"，所以所有数据点都有相同的颜色

 window.onload = function() {

        var baseLayer = L.tileLayer(
          'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png',{
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
            maxZoom: 20
          }
        );
        var cfg = {
          // radius should be small ONLY if scaleRadius is true (or small radius is intended)
          "radius": 0.00007,
          minOpacity: 0.5,
          maxOpacity: 1, 
          // 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": false,
          // 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"
          value: 'sig',
          blur:0,
            gradient: {
                // enter n keys between 0 and 1 here
                // for gradient color customization
                '1': 'red',
                '.3': 'yellow',
                '0.9': 'green'
              },
        };

        var heatmapLayer = new HeatmapOverlay(cfg);
        var map = new L.Map('map-canvas', {
          center: new L.LatLng(52.400458, 13.052260),
          zoom: 14,
          layers: [baseLayer, heatmapLayer]
        });
        heatmapLayer.setData(testData);
        // make accessible for debugging
    layer = heatmapLayer;
    };

我的数据如下：

var testData = {
 data:[{lat:52.40486, lng:13.04916, sig:30}, {lat:52.40486, lng:13.04916, sig:70}, {lat:52.40496, lng:13.04894, sig:67}, {lat:52.40496, lng:13.04894, sig:72}, {lat:52.40486, lng:13.04916, sig:74}, {lat:52.40486, lng:13.04916, sig:78}, {lat:52.40493, lng:13.04925, sig:67},]}

你可以让它活下去http://www.frief.de/heatmap/test2.html

如果有人有一个想法，那就太好了，我只是愚蠢的

只是一个快速的建议。

你试过使用Vladimir Agafonkin（Leaflet.js的作者本人）的Leaflet.Heatmap插件吗。插件页面上似乎没有列出它。

我认为它更快，可能会是一个更好的解决方案：https://github.com/Leaflet/Leaflet.heathttp://mourner.github.io/simpleheat/demo/

我认为这不起作用，因为您的代码在这里是错误的：

    <div class="wrapper">
      <div class="heatmap" id="map-canvas">
      </div>
    </div>
</script> <----THIS     <script src="src/heatmap.js"></script>
<script src="src/leaflet-heatmap.js"></script>

打开链接，你说是一个演示页面和检查代码。修复这个孤立的</script标记，看看它现在是否工作。

我知道这是旧的，但我刚刚遇到了这个问题，下面是我解决它的方法。在图书馆"；pa7_laflet_hm.min.js"；有一部分它设置了最小值/最大值，并硬编码为1和0

this._data = []; 
this._max = 1; 
this._min = 0;

显然，这会根据该值控制斑点的强度，并且只有当useLocalExtrema设置为false时，这一点才会被覆盖，这将始终将其设置为最高可见斑点。

如果您不希望总是根据可见区域检查最高值，您可以将this._max值更改为更高的值，或者甚至可以将其设置为配置中的值，以显示

this._data = []; 
this._max = (this.cfg.max ? this.cfg.max : 1); 
this._min = (this.cfg.min ? this.cfg.min : 0);

这样你就可以得到一个更传统的功能热图

相关文章：