Wie überlagert man ein Rasterbild auf Broschüren?

Ich verwende einen Breitengrad & lange Koordinaten, die ich in der Eingabe vom Benutzer erhalte, um eine Karte mit leaflet.js zu visualisieren. Während ich das tue, berechne ich eine Heatmap im Hintergrund (z. B. Populationsdichtekarte in dem 5 km breiten Gebiet, das die gewählten Koordinaten umgibt).Wie überlagert man ein Rasterbild auf Broschüren?

Wie übertrage ich die Heatmap auf meine Karte?

Hier ist, was ich bis jetzt: eine HTML-Datei, um die Karte zu generieren, und eine JS-Datei durch meine Hintergrund Berechnungen, wo ich die gewählten Koordinaten, einige Polygone oder Interesse, und wo ich hoffe zu speichern/zeigen zu der Rasterkarte, die ich für diese Region erzeuge.

<!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>

Die Datei rois.js wird durch mein Programm im Hintergrund generiert und enthält die gewählten Koordinaten und einige Polygone auf der Karte gezeichnet werden. Ich würde gerne verstehen, wie ich Raster-Informationen hier einfügen kann.

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]]] 
    } 
    }] 
}];

Dank FP

Quelle

2016-05-13 Effe Pelosa