Rendern von geoJSON mit D3 und Leaflet mit imageOverlay

Question

Quick-Version: Ich habe Probleme beim Anzeigen eines d3-Elements auf einem statischen Bild von Leaflet angezeigt. Es funktioniert, wenn ich d3noobs (http://bl.ocks.org/d3noob/9211665) Beispiel verwende ... aber ich habe Probleme, es zu erweitern. Ich schätze, es liegt an der langen und langen Übersetzung oder der Projektion, aber ich bin mir nicht sicher, was ich ändern muss. Ich versuche, die GeoJSON in der Mitte des Bildes (mein Code auf JSFiddle: https://jsfiddle.net/g_at_work/qyhf0qz0/12/) anzuzeigen

Längere Version: Ich versuche d3noob Beispiel zu erweitern, so dass ich GeoJSON auf statische Bilder angezeigt werden können unter Verwendung von Flugblatt und D3 (eine Anforderung von meinem Chef leider). Ich konnte d3noobs Kachel-basiertes Beispiel reproduzieren, aber ich hatte Probleme mit der statischen Version.

Ich konnte das statische Bild anzeigen, aber ich konnte das blaue Rechteck auf dem Bild nicht anzeigen. Ich bin nicht sicher, was ich tun muss, um die Position des in JSON beschriebenen blauen Rechtecks ​​zu manipulieren.

Ich habe versucht, das Spiel mit den Koordinaten in der Project Funktion Einstellung aber kein Glück:

function projectPoint(x, y) { 
var point = map.latLngToLayerPoint(new L.LatLng(y, x)); 
this.stream.point(point.x, point.y); 
} 

In diesem Stadium muss ich denke, ich eine neue Projektion beschreiben, aber ich bin nicht sicher, was . Hier ist der Code, den ich das statische Bild anzuzeigen bin mit:

var map = new L.Map("map", {maxZoom:1,center: [0,0], zoom: 3,crs:L.CRS.Simple}); 
var southWest = map.unproject([0,882],map.getMaxZoom()); 
var northEast = map.unproject([1085,0],map.getMaxZoom()); 
var imageBounds = new L.LatLngBounds(southWest,northEast); 
L.imageOverlay('http://www.w3schools.com/css/trolltunga.jpg',imageBounds).addTo(map); 
map.fitBounds(imageBounds); 

Es wäre toll, wenn jemand eine Strategie für maniuplating die Position des Rechtecks ​​vorschlagen könnte (I bis d3 und Faltblatt neu bin) Dank einem Haufen G

Answer 1

so nach einiger Bastelei, dass ich fand eine neue Projektion mir zu schaffen konnte die Lage setzen und die Karte skalieren, so konnte ich es platzieren, wo ich sie gebraucht werden:

var center = d3.geo.centroid(geoShapeInstance); var scale = [800000]; var offset = [175, 1]; var projection = d3.geo.mercator().scale(scale).center(center).translate(offset); var path = d3.geo.path().projection(projection);

mit dem ‚Offset‘ Variable Hantieren mir erlaubt, die Lage zu setzen und mit der ‚Skala‘ Variable spielen erlaubt mir die Karte, um die Größe (Maßstab ist ein [x, x] Wert)

Hope this jemand hilft.