Rotate Marker with leaflet

Ho una mappa Leaflet con finder coordinate, le coordinate enunciano contiene Heading point. Sto cercando di ruotare il mio indicatore di icona sul punto di intestazione. il codice: (live at: http://84.95.7.35/~hzcoil/index2.html)Rotate Marker with leaflet

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js" type="text/javascript"></script> 
<script src="http://84.95.7.35/~hzcoil/js/jquery-1.11.0.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 

<script> 
function init() { 

var latScaleVal = 8300; 
var longScaleVal = 8300; 
var latScale = latScaleVal/256; 
var longScale = longScaleVal/256; 
var fixLat = function(e) { 
if (e > 0) { 
e = -e 
} else { 
e = Math.abs(e) 
} 
return e 
}; 

var coords = function(e, t) { 
e = fixLat(e); 
var n = e/latScale + latScaleVal/2/latScale; 
var r = t/longScale + longScaleVal/2/longScale; 
return [-n, r] 
}; 


var mapMinZoom = 0; 
var mapMaxZoom = 6; 
var map = L.map('map', { 
    maxZoom: mapMaxZoom, 
    minZoom: mapMinZoom, 
    crs: L.CRS.Simple 
}).setView([0, 0], mapMaxZoom); 

var mapBounds = new L.LatLngBounds(
map.unproject([0, 8192], mapMaxZoom), 
map.unproject([8192, 0], mapMaxZoom)); 

map.fitBounds(mapBounds); 
L.tileLayer('http://www.h1z1maps.com/images/newmap/{z}/{x}/{y}.jpg', { 
    minZoom: mapMinZoom, maxZoom: mapMaxZoom, 
    bounds: mapBounds, 
    noWrap: true 
}).addTo(map); 


var roticon = L.icon({ 
iconUrl: "https://www.mapbox.com/maki/renders/[email protected]", 
className: 'RotatedMarker', 
iconSize: [50, 50], 
iconAnchor: [10, 21], 
popupAnchor: [5, -35] 
}); 


$("#findmyloc").on("submit", function() { 
try { 
var e = $("#locbox").val().match(/-?[0-9.0-9]+/g); 
$("#locbox").val(""); 
var goto = L.marker(coords(e[0], e[2], e[3]), {icon:roticon}).addTo(map); 
} catch (t) { 
console.log(t) 
} 
return false 
}); 

    } 
</script> 

<style> 
    html, body, #map { width:700px; height:500px; margin:0; padding:0; } 
</style> 


    </head> 
<body onload="init()"> 
<div id="map"></div> 

<form id="findmyloc"> 
<input id="locbox" type="text" value="x=2196.170 y=39.880 z=1895.350, Heading: 0.624" /> 
<input type="submit" class="search" value="submit" /> 
</form> 
</body>

ho trovato questo: https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js

stavo lavorando su di esso circa 5 ore, ma non ho potuto corrispondere al mio codice. questo è che le coordinate raccomandano: x=2196.170 y=39.880 z=1895.350, Heading: 0.624 Il "Titolo" dovrebbe essere la rotazione.

Come posso associarlo al mio codice?

fonte

2015-01-26 Edan Nos

Si può provare a utilizzare transform: translate (595px, 243px) rotateZ (190deg) – Blauharley

Nella pagina di esempio non è inclusa l'estensione RotatedMarker.

Una volta si include si può chiamare utilizzando il metodo rotatedMarker per la creazione del marcatore e passando l'angolo nelle opzioni oggetto (deve essere in gradi, non radianti)

var goto = L.rotatedMarker(coords(e[0], e[2]), { 
     icon:roticon, 
     angle:+e[3]*180/Math.PI // convert to degrees 
    }).addTo(map);

demo http://plnkr.co/edit/QioXRLA8PYnrlb2ZH7kr?p=preview

fonte

2015-01-26 16:18:35

Grazie mille! Mi hai aiutato molto :) –

risposta

Problemi correlati