如何根據需要在傳單上覆蓋柵格圖像？

我正在使用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