i have Leaflet map with coordinates finder, the coordinates mend contains Heading point. im trying to rotate my icon marker to the Heading point. the code: (live at: .html)
<script src=".6.4/leaflet.js" type="text/javascript"></script>
<script src=".11.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href=".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('/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
noWrap: true
}).addTo(map);
var roticon = L.icon({
iconUrl: "/[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>
i found this: .PolylineDecorator/blob/master/src/L.RotatedMarker.js
i was working on it about 5 hours but i could not match it to my code.
this it the coordinates mend: x=2196.170 y=39.880 z=1895.350, Heading: 0.624
The "Heading" should be the rotate.
How can i match it to my code?
i have Leaflet map with coordinates finder, the coordinates mend contains Heading point. im trying to rotate my icon marker to the Heading point. the code: (live at: http://84.95.7.35/~hzcoil/index2.html)
<script src="http://cdn.leafletjs./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./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./images/newmap/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
noWrap: true
}).addTo(map);
var roticon = L.icon({
iconUrl: "https://www.mapbox./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>
i found this: https://github./bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js
i was working on it about 5 hours but i could not match it to my code.
this it the coordinates mend: x=2196.170 y=39.880 z=1895.350, Heading: 0.624
The "Heading" should be the rotate.
How can i match it to my code?
Share Improve this question edited Jan 26, 2015 at 16:19 Gabriele Petrioli 196k34 gold badges271 silver badges328 bronze badges asked Jan 26, 2015 at 15:45 Edan NosEdan Nos 651 silver badge5 bronze badges 1- You could try to use transform: translate(595px, 243px) rotateZ(190deg) – Blauharley Commented Jan 26, 2015 at 16:13
1 Answer
Reset to default 5Your example page does not include the RotatedMarker extension.
Once you include it you can call it by using the rotatedMarker method for creating the marker and passing the angle in the options object (it must be in degrees, not radians)
var goto = L.rotatedMarker( coords(e[0], e[2]), {
icon:roticon,
angle:+e[3]*180/Math.PI // convert to degrees
}).addTo(map);
Demo at http://plnkr.co/edit/QioXRLA8PYnrlb2ZH7kr?p=preview
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742295804a4417091.html
评论列表（0条）