<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.canvas {
position: absolute;
left: 10px;
top: 10px;
display: none;
}
#canvas-a {
top: 10px;
}
#canvas-b {
top: 120px;
}
.bmgl-widget-credits{display:none}
</style>
<title>part_test</title>
</head>
<body>
<canvas id="canvas-a" class="canvas" width="700" height="100"></canvas>
<canvas id="canvas-b" class="canvas" width="700" height="100"></canvas>
<div id='container'></div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.zhongkexingtu',requestRenderMode:false,});
//设置初始位置
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
});
//取消双击事件
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
var curCanvas = 'a';
var i = 0;
function drawCanvasImage(time, result) {
let canvas = document.getElementById("canvas-" + curCanvas);
let cwidth = 700;
let cheight = 100;
let ctx = canvas.getContext("2d");
let img = new Image();
img.src = "/bmgl/images/arrow.png";
ctx.clearRect(0, 0, cwidth, cheight);
img.onload = function () {
if (i <= cwidth) {
ctx.drawImage(img, i, 0);
} else
i = 0;
i += 3;
}
curCanvas = curCanvas === 'a' ? 'b' : 'a';
return canvas;
}
viewer.entities.add({
name: 'image',
rectangle: {
coordinates: bmgl.Rectangle.fromDegrees(-90.0, 30.0, -70.0, 35.0),
height:100000,
material: new bmgl.ImageMaterialProperty({
image: new bmgl.CallbackProperty(drawCanvasImage, false),
transparent: true
})
}
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
源码