如何根据需要在传单上覆盖栅格图像？

我正在使用lat &长输入坐标，用户在输入中接收到的图像是用leaflet.js可视化的。正如我这样做，我在背景中计算热图（例如，选定坐标周围5公里范围内的人口密度图）。如何根据需要在传单上覆盖栅格图像？

如何覆盖热图到我的地图？

以下是我到目前为止：生成地图的html文件以及由我的背景计算创建的.js文件，其中存储了所选坐标，某些多边形或兴趣点以及我希望存储/到我为该地区生成的栅格地图。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Testmap</title> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="http://d3js.org/topojson.v1.min.js"></script> 
    <style> 
    @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css); 
    #overlay{ 
     fill:None; 
     stroke:#ff00ff; 
     stroke-width:4px; 
    } 
    </style> 
</head> 
<body> 
    <div id="map" style="width: 960px; height: 600px"></div> 
    <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js" 
    </script> 
    <script src="rois.js"></script> 
    <script> 
    var toolserver = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png'); 
    var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'myMap'}).addTo(map); 
    var baseLayers = {"stamen": stamen, "toolserver-mapnik":toolserver}; 

    var geojson = L.geoJson(rois, { 
     onEachFeature: onEachFeature 
    }).addTo(map) 

    var overlays = { 
     "geoJson": geojson 
    }; 

    function onEachFeature(feature, layer){ 
    if (feature.properties) { 
     layer.bindPopup("<b>" + feature.properties.street + "</b> is " + feature.properties.length + "km long."); 
    } 
    } 

    var svgContainer= d3.select(map.getPanes().overlayPane).append("svg"); 
    var group= svgContainer.append("g").attr("class", "leaflet-zoom-hide"); 
    var path = d3.geo.path().projection(project); 
    function project(point) { 
    var latlng = new L.LatLng(point[1], point[0]); 
    var layerPoint = map.latLngToLayerPoint(latlng); 
    return [layerPoint.x, layerPoint.y]; 
    } 

    </script> 
</body> 
</html>

文件rois.js是由我的程序在后台生成，其中包含选定的坐标和一些多边形要在地图上绘制。我想了解如何在这里包含栅格信息。

var map = L.map('map').setView([52.500,13.385], 13); 
var rois = [{ 
    "type": "FeatureCollection",                   
    "features": [{ 
    "type": "Feature", 
    "id": 1, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [[[13.370, 52.491], [13.400, 52.491], [13.400, 52.509],[13.370, 52.509],[13.370, 52.491]]] 
    } 
    }, 
    { "type": "Feature", 
    "id": 2, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [[[13.415, 52.496], [13.425, 52.505], [13.435, 52.496], [13.415, 52.496]]] 
    } 
    }] 
}];

感谢 FP

来源

2016-05-13 Effe Pelosa