2013-10-29 11 views
5

Ich versuche, eine Karte basierend auf einem Bild, das 16384x16384 px ist, zu erstellen, aber ich möchte auch Marker an bestimmten Orten mit Pixel-Koordinaten dieses gegebenen Bildes hinzufügen.Wie Pixelkoordinaten in Broschüre projizieren?

Ich habe eine Fliesenschicht, ein Kartenelement und eingestellten maximale Grenzen, so dass ich nicht das Bildes bewege heraus kann, mit diesem Code:

var map = L.map('map', { 
     maxZoom: 6, 
     minZoom: 2, 
     crs: L.CRS.Simple 
    }).setView([0, 0], 2); 
    var southWest = map.unproject([0,16384], map.getMaxZoom()); 
    var northEast = map.unproject([16384,0], map.getMaxZoom()); 
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); 

    L.tileLayer('tiles/{z}/{x}/{y}.png', { 
     tms: true 
    }).addTo(map); 

Die Punkte i hinzufügen möchte die Karte in einer externen Datei als GeoJSON gespeichert sind, und sie sehen aus wie dieses http://www.de-egge.de/maps/terranigma/terraPoints.js

ich lade sie diesen Code-snippet mit:

var terraPoints = new L.geoJson(points, { 
     onEachFeature: function (feature, layer) { 
      layer.bindPopup(
       "<b>Ort: </b>" + feature.properties["points[, 1]"] 
      ); 
     } 
    }); 

    map.addLayer(terraPoints); 

Aber natürlich, sie nicht s wie hoch, weil die Referenzsysteme nicht übereinstimmen. Die Punkte verwenden Pixelkoordinaten, aber meine Karte verwendet geografische Koordinaten.

Gibt es eine Möglichkeit, die Punkte beim Laden zu "unprojizieren"?

Jede Hilfe wird sehr geschätzt und danke im Voraus!

Antwort

5
var geoJsonTest = new L.geoJson(geojsonFeature, { 
    coordsToLatLng: function (newcoords) { 
     return (map.unproject([newcoords[1], newcoords[0]], map.getMaxZoom())); 
    }, 
    pointToLayer: function (feature, coords) {  
     return L.circleMarker(coords, geojsonMarkerOptions); 
    } 
}); 

Dies ist, wie Sie verwenden, falls Sie es nicht Abbildung noch aus. Da die Koordinaten invertiert sind, habe ich sie in der Option geändert. Funktioniert perfekt für mich.

+0

Es funktioniert, danke. Ich musste nur die 'geojsonMarkerOptions' angeben – DeEgge

0

L.GeoJSON hat die coordsToLatLng(), die für die Zuordnung der Koordinaten nützlich sein sollte.

http://leafletjs.com/reference.html#geojson-coordstolatlng

+0

Vielen Dank für Ihr Feedback, aber ich bin verwirrt über die Verwendung der Methode. Wenn ich jede Koordinate durchlaufen habe, kann ich noch keine Markierung hinzufügen. Oder muss ich die Methode mit onEachFeature aufrufen? 'für (i in terraPoints) {latLng = coordsToLatLng (i.geometry.coordinates); L.marker (latLng) .addTo (Karte); } ' – DeEgge