文章/答案/技术大牛

发布

问自定义热图leaflet插件
EN

Stack Overflow用户

提问于 2016-05-23 21:16:20

回答 1查看 936关注 0票数 0

在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

heatmap

plugins

leaflet

回答 1

Stack Overflow用户

发布于 2016-05-23 22:55:46

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

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

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

如果你看了源代码...

<!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数据转换成这种格式，一切都会正常工作的！

Cesare

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37392057

复制

相似问题

问自定义热图leaflet插件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自定义热图leaflet插件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自定义热图leaflet插件
EN