SOURCE

console 命令行工具 X clear

                    
>
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`, {
    // maxZoom : 18,
    // minZoom : 1 ,
    // tileSize : 256,
    // zoomOffset : 1
});
let lat = 39.254588032219964;
let lng = 121.13662719726564;
var map = L.map('map', {
    preferCanvas: true,
    center: [lat, 121.13662719726564],
    // crs : L.CRS.EPSG4326,
    // layers : [basemap0 , basemap1],
    zoomControl: true,
    attributionControl: false,
    doubleClickZoom: false,
    editable: true
}).setView(L.latLng(lat, lng), 18)
imgMapLayer0.addTo(map)
// 添加点击事件监听
map.on('click', function (e) {
    // e.latlng 包含了点击位置的经纬度
    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);
//console.log = function () { }
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
}

本项目引用的自定义外部资源