cgyy/bmap.html

## bmap.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            height: 500px;
            width: 100%;
        }
    </style>
    <script src="/js/lib/chroma.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KKrPGwCOgZBr9EZMshyZpRBM"></script>
    <title>1111</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

    class CanvasView {
        constructor(bmap) {
            let canvas = document.createElement("canvas");
            canvas.style.cssText = "position:absolute;left:0;top:0;";
            bmap.getPanes().labelPane.appendChild(canvas);
            let size = bmap.getSize();
            this.width = canvas.width = size.width;
            this.height = canvas.height = size.height;
            this.ctx = canvas.getContext("2d");

            this.bmap = bmap;
            this.vehicles = {};
        }

        loop() {
            this.ctx.clearRect(0, 0, this.width, this.height);
            this.ctx.globalCompositeOperation = "lighter";
            // console.log("loop")

            for (let entry of Object.entries(this.vehicles)) {
                let [id, vehicle] = entry;
                this._drawVehiclePoint(id, vehicle);
            }
            window.setTimeout(() => {
                this.loop()
            }, 100)
        }

        addVehiclePoint(bp0, bp1) {
            this.bmap.panTo(bp0);
            let vehicle = new VehicelPoint(bp0, bp1, this);
            this.vehicles[vehicle.id] = vehicle;

        }


        _drawVehiclePoint(id, vehicle) {
            vehicle.update(this.ctx);
        }

    }

    class VehicelPoint {
        constructor(bp0, bp1, canvas) {
            this.id = "_001";

            this.bp0 = bp0;
            this.bp1 = bp1;
            this.canvas = canvas;

            this.time = 5000;// 显示毫秒数
            this.length = 30;
            this.width = 16;
            this.color = 'blue';
            this.reset();
        }

        reset() {
            let p0 = this.canvas.bmap.pointToOverlayPixel(this.bp0);
            let x = ~~(p0.x);
            let y = ~~(p0.y);

            let p1 = this.canvas.bmap.pointToOverlayPixel(this.bp1);
            let x1 = ~~(p1.x);
            let y1 = ~~(p1.y);

            // console.log(x,y ,x1,y1)
            this.x0 = this.x = x;
            this.y0 = this.y = y;
            this.distance = this._getDistance(this.x0, this.y0, x1,y1);
            this.angle = Math.atan2(y1 - y, x1 - x);

            this.speed = 100 * this.distance / this.time; //播放帧间隔*速度
            console.log(this.speed)

        }

        update(ctx) {
            console.log("update")
            let currentDis = this._getDistance(this.x0, this.y0, this.x, this.y)
            if (currentDis >= this.distance) {
                delete this.canvas.vehicles[this.id]
                return;
            }

            if (this.distance > 0) {
                ctx.save();
                ctx.beginPath();
                this.x += this.speed * Math.cos(this.angle);
                this.y += this.speed * Math.sin(this.angle);

                ctx.translate(this.x, this.y);
                ctx.rotate((this.angle));
                let style = window.chroma.scale(['white', this.color])(0.8).hex();

                ctx.fillStyle = style;
                ctx.rect(0, 0, this.length, this.width);
                ctx.fill();
                ctx.restore();

                // 绘制文字说明
                ctx.save()
                ctx.fillStyle = "black";
                ctx.font = "10pt Arial";
                ctx.translate(this.x,this.y);
                ctx.rotate((Math.PI * this.angle));
                ctx.fillText('sb001', 0, 0);
                ctx.restore();

            }
        }

        _getDistance(x0, y0, x1, y1) {
            return Math.sqrt((x0 - x1) ** 2 + (y0 - y1) ** 2);
        }

    }


    function addMarker(bm, bp, label) {
        let marker = new BMap.Marker(bp);
        bm.addOverlay(marker);
        let bl = new BMap.Label(label, {offset: new BMap.Size(20, -10)});
        marker.setLabel(bl);
        return marker;
    }

    // 百度地图API功能
    let bmap = new BMap.Map("allmap", {enableMapClick: false});
    bmap.enableScrollWheelZoom();
    bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 19);
    bmap.addEventListener("click", (e) => {
        console.log(e.point)
    });


    let bp0 = new BMap.Point(116.401817, 39.915588);
    addMarker(bmap, bp0, "bp0")

    let bp1 = new BMap.Point(116.402895, 39.914682);
    addMarker(bmap, bp1, "bp1")

    let bp2 = new BMap.Point(116.404193, 39.915443);
    addMarker(bmap, bp2, "bp2")

    let canvas = new CanvasView(bmap);
    canvas.loop();

    window.setTimeout(() => {
        canvas.addVehiclePoint(bp0, bp2);
    },1000)


    bmap.addEventListener("zoomend", () => {
        for (let vehicle of Object.values(canvas.vehicles)) {
            vehicle.reset();
        }
    });

    bmap.addEventListener("moveend", () => {
        console.log("moveend")
        for (let vehicle of Object.values(canvas.vehicles)) {
            vehicle.reset();
        }
    });

</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<style type="text/css">
	body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
	}

	#allmap {
	height: 500px;
	width: 100%;
	}
	</style>
	<script src="/js/lib/chroma.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KKrPGwCOgZBr9EZMshyZpRBM"></script>
	<title>1111</title>
	</head>
	<body>
	<div id="allmap"></div>
	</body>
	</html>
	<script type="text/javascript">

	class CanvasView {
	constructor(bmap) {
	let canvas = document.createElement("canvas");
	canvas.style.cssText = "position:absolute;left:0;top:0;";
	bmap.getPanes().labelPane.appendChild(canvas);
	let size = bmap.getSize();
	this.width = canvas.width = size.width;
	this.height = canvas.height = size.height;
	this.ctx = canvas.getContext("2d");

	this.bmap = bmap;
	this.vehicles = {};
	}

	loop() {
	this.ctx.clearRect(0, 0, this.width, this.height);
	this.ctx.globalCompositeOperation = "lighter";
	// console.log("loop")

	for (let entry of Object.entries(this.vehicles)) {
	let [id, vehicle] = entry;
	this._drawVehiclePoint(id, vehicle);
	}
	window.setTimeout(() => {
	this.loop()
	}, 100)
	}

	addVehiclePoint(bp0, bp1) {
	this.bmap.panTo(bp0);
	let vehicle = new VehicelPoint(bp0, bp1, this);
	this.vehicles[vehicle.id] = vehicle;

	}


	_drawVehiclePoint(id, vehicle) {
	vehicle.update(this.ctx);
	}

	}

	class VehicelPoint {
	constructor(bp0, bp1, canvas) {
	this.id = "_001";

	this.bp0 = bp0;
	this.bp1 = bp1;
	this.canvas = canvas;

	this.time = 5000;// 显示毫秒数
	this.length = 30;
	this.width = 16;
	this.color = 'blue';
	this.reset();
	}

	reset() {
	let p0 = this.canvas.bmap.pointToOverlayPixel(this.bp0);
	let x = ~~(p0.x);
	let y = ~~(p0.y);

	let p1 = this.canvas.bmap.pointToOverlayPixel(this.bp1);
	let x1 = ~~(p1.x);
	let y1 = ~~(p1.y);

	// console.log(x,y ,x1,y1)
	this.x0 = this.x = x;
	this.y0 = this.y = y;
	this.distance = this._getDistance(this.x0, this.y0, x1,y1);
	this.angle = Math.atan2(y1 - y, x1 - x);

	this.speed = 100 * this.distance / this.time; //播放帧间隔*速度
	console.log(this.speed)

	}

	update(ctx) {
	console.log("update")
	let currentDis = this._getDistance(this.x0, this.y0, this.x, this.y)
	if (currentDis >= this.distance) {
	delete this.canvas.vehicles[this.id]
	return;
	}

	if (this.distance > 0) {
	ctx.save();
	ctx.beginPath();
	this.x += this.speed * Math.cos(this.angle);
	this.y += this.speed * Math.sin(this.angle);

	ctx.translate(this.x, this.y);
	ctx.rotate((this.angle));
	let style = window.chroma.scale(['white', this.color])(0.8).hex();

	ctx.fillStyle = style;
	ctx.rect(0, 0, this.length, this.width);
	ctx.fill();
	ctx.restore();

	// 绘制文字说明
	ctx.save()
	ctx.fillStyle = "black";
	ctx.font = "10pt Arial";
	ctx.translate(this.x,this.y);
	ctx.rotate((Math.PI * this.angle));
	ctx.fillText('sb001', 0, 0);
	ctx.restore();

	}
	}

	_getDistance(x0, y0, x1, y1) {
	return Math.sqrt((x0 - x1) 2 + (y0 - y1) 2);
	}

	}


	function addMarker(bm, bp, label) {
	let marker = new BMap.Marker(bp);
	bm.addOverlay(marker);
	let bl = new BMap.Label(label, {offset: new BMap.Size(20, -10)});
	marker.setLabel(bl);
	return marker;
	}

	// 百度地图API功能
	let bmap = new BMap.Map("allmap", {enableMapClick: false});
	bmap.enableScrollWheelZoom();
	bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 19);
	bmap.addEventListener("click", (e) => {
	console.log(e.point)
	});




	let bp0 = new BMap.Point(116.401817, 39.915588);
	addMarker(bmap, bp0, "bp0")

	let bp1 = new BMap.Point(116.402895, 39.914682);
	addMarker(bmap, bp1, "bp1")

	let bp2 = new BMap.Point(116.404193, 39.915443);
	addMarker(bmap, bp2, "bp2")

	let canvas = new CanvasView(bmap);
	canvas.loop();

	window.setTimeout(() => {
	canvas.addVehiclePoint(bp0, bp2);
	},1000)


	bmap.addEventListener("zoomend", () => {
	for (let vehicle of Object.values(canvas.vehicles)) {
	vehicle.reset();
	}
	});

	bmap.addEventListener("moveend", () => {
	console.log("moveend")
	for (let vehicle of Object.values(canvas.vehicles)) {
	vehicle.reset();
	}
	});

	</script>