console
var imgMapLayer0 = L.tileLayer(`http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=faed44eb8716fbc8bc9978d8e44ab7b4`, {
});
let lat = 39.254588032219964;
let lng = 121.13662719726564;
var map = L.map('map', {
preferCanvas: true,
center: [lat, 121.13662719726564],
zoomControl: true,
attributionControl: false,
doubleClickZoom: false,
editable: true
}).setView(L.latLng(lat, lng), 18)
imgMapLayer0.addTo(map)
map.on('click', function (e) {
console.log("Latitude: " + e.latlng.lat + ", Longitude: " + e.latlng.lng);
});
function getShip(lat, lng, degrees) {
var tmp1 = L.GeometryUtil.destination(L.latLng(lat, lng), 0 + degrees, 40)
var tmp2 = L.GeometryUtil.destination(L.latLng(lat, lng), 90 + degrees, 10)
var tmp3 = L.GeometryUtil.destination(L.latLng(lat, lng), 180 + degrees, 20)
var tmp4 = L.GeometryUtil.destination(L.latLng(lat, lng), 270 + degrees, 10)
console.log(tmp2);
var polygon = L.polygon([
[tmp1.lat, tmp1.lng],
[tmp2.lat, tmp2.lng],
[tmp3.lat, tmp3.lng],
[tmp4.lat, tmp4.lng],
], { color: 'red', fillColor: "red" });
return polygon;
}
class Ship {
constructor(lat, lng, degrees) {
var tmp1 = L.GeometryUtil.destination(L.latLng(lat, lng), 0 + degrees, 40)
var tmp2 = L.GeometryUtil.destination(L.latLng(lat, lng), 90 + degrees, 10)
var tmp3 = L.GeometryUtil.destination(L.latLng(lat, lng), 180 + degrees, 20)
var tmp4 = L.GeometryUtil.destination(L.latLng(lat, lng), 270 + degrees, 10)
console.log(tmp2);
var polygon = L.polygon([
[tmp1.lat, tmp1.lng],
[tmp2.lat, tmp2.lng],
[tmp3.lat, tmp3.lng],
[tmp4.lat, tmp4.lng],
], { color: 'red', fillColor: "red" });
this.polygon = polygon;
}
addTo(map) {
this.polygon.addTo(map);
}
update(lat, lng, degrees) {
var tmp1 = L.GeometryUtil.destination(L.latLng(lat, lng), 0 + degrees, 40)
var tmp2 = L.GeometryUtil.destination(L.latLng(lat, lng), 90 + degrees, 10)
var tmp3 = L.GeometryUtil.destination(L.latLng(lat, lng), 180 + degrees, 20)
var tmp4 = L.GeometryUtil.destination(L.latLng(lat, lng), 270 + degrees, 10)
console.log(tmp2);
var latLngs = [
[tmp1.lat, tmp1.lng],
[tmp2.lat, tmp2.lng],
[tmp3.lat, tmp3.lng],
[tmp4.lat, tmp4.lng],
];
this.polygon.setLatLngs(latLngs);
}
}
var ships = [];
var ship = new Ship(lat, lng, 90);
ships.push(ship);
ship.addTo(map);
ship = new Ship(lat, lng, 0);
ship.update(lat, lng, 10);
ships.push(ship);
ship.addTo(map);
var t = 0;
function animate() {
ships.forEach(ship => {
ship.update(lat + t, lng + t, t);
})
requestAnimationFrame(animate);
t += 0.000001;
}
animate();
<div id="map" > leaflet map</div>
#map{
width: 100%;height:100%;position:absolute
}