自定义热图传单插件答案

【问题标题】：custom heatmap leaflet plugin自定义热图传单插件
【发布时间】：2016-05-23 13:16:20
【问题描述】：

在 index.html 中，我想添加两个热图，用户可以通过菜单右上角的复选框看到。菜单通过这样的代码显示其他内容

layerControl.addOverlay(geojson, "H2OpenMap");

在页面的这一部分（第 383 行到第 397 行）

$.getJSON('api.php', {'wells': '1'}, function(remoteData){
  var geojson = L.geoJson(remoteData, {
      pointToLayer: function (feature, latlng) {
        var icon = chooseIcon(feature['properties']);
        var marker = L.marker(latlng, {icon: new h2icon( {iconUrl: icon} )} );
        var markerText = buildPopup(feature, true, latlng);
        marker.bindPopup(markerText);
        return marker;
    }
  }).addTo(map);

layerControl.addOverlay(geojson, "H2OpenMap");

map.fitBounds(geojson.getBounds(), {'padding': [10,10]});
});

第一热应该使用之前相同代码中的数据，选择者

if(feature['drinking_water'] == 'yes' ) {...
    }

第二次加热应该使用之前相同代码中的数据，由选择

if(feature['drinking_water'] == 'no' ) {...
    }

目标是有两个热图，一个是干净的水资源，另一个是不干净的水资源，都可以通过比例按钮选择。

我发现这段代码看起来不错，但我无法为他提供数据以用于创建热图.....

//--------------------https://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html-----------//
$.getJSON('api.php', {'wells': '1'}, function(remoteData){
  var geojson = L.geoJson(remoteData, {
      pointToLayer: function (feature, latlng) {
        var heatData = L.marker(latlng);
        console.log(heatData);
        //var heatData = L.marker([{lat: new latlng(lat), lng: new latlng(lng)}]);
    }})});

/*var testData = {
  max: 8,
  data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
};*/

var cleanWater = heatData;// mettere in un array solo la posizione degli elementi che rispettano la seguente condizione: feature['drinking_water'] == 'yes'
var cfg = {
  // radius should be small ONLY if scaleRadius is true (or small radius is intended)
  // if scaleRadius is false it will be the constant radius used in pixels
  "radius": 2,
  "maxOpacity": .8, 
  // 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'
};

var heatmapLayer = new HeatmapOverlay(cfg);

var map = new L.Map('map-canvas', {
  center: new L.LatLng(25.6586, -80.3568),
  zoom: 4,
  layers: [baseLayer, heatmapLayer]
});

heatmapLayer.setData(cleanWater);

//------------------------//--------------------//--------------------//--------------------//--------------------*/

在根项目中，它是包含完整代码的以下文件： https://github.com/H2OpenMap/map/blob/master/index_heat_test.html

【问题讨论】：

标签： plugins leaflet heatmap

【解决方案1】：

为了简化你的问题，我试着向你推荐这个例子......

http://bl.ocks.org/d3noob/raw/8973028/

这是一个实现 Leaflet 热图的简单代码。

如果你看到源代码...

<!DOCTYPE html>
 <html>
  <head>
   <title>Simple Leaflet Map with Heatmap </title>
   <meta charset="utf-8" />
   <link 
    rel="stylesheet" 
    href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
   />
 </head>
  <body>
   <div id="map" style="width: 600px; height: 400px"></div>

   <script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
   </script>

   <script
     src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js">
   </script>
   <script src="2013-earthquake.js"></script>
   <script>

    var map = L.map('map').setView([-41.5546,174.146], 10);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
    }).addTo(map);

    var heat = L.heatLayer(quakePoints,{
        radius: 20,
        blur: 15, 
        maxZoom: 17,
    }).addTo(map);

   </script>
  </body>

....您会发现数据是使用坐标数组模拟的，您可以在此处看到...

http://bl.ocks.org/d3noob/raw/8973028/2013-earthquake.js

我认为你必须以这种格式转换你的 geojson 数据，一切都会奏效！

切萨雷

【讨论】：