<!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.scene.globe.depthTestAgainstTerrain=false;
//设置初始位置
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
});
//取消双击事件
viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
var rotation = bmgl.Math.toRadians(30);
var curCanvas = 'a';
function getRotationValue() {
rotation += 0.005;
return rotation;
}
function drawCanvas(time, result) {
let canvas = document.getElementById("canvas-" + curCanvas);
let context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = 'italic 40pt Calibri';
context.fillStyle = "blue";
context.fillText(bmgl.JulianDate.toDate(bmgl.JulianDate.now()).getTime(), 20, 100);
curCanvas = curCanvas === 'a' ? 'b' : 'a';
return canvas;
}
let i=0;
viewer.entities.add({
name: 'Rotating rectangle with rotating texture coordinate',
rectangle: {
extrudedHeight:0,
coordinates: new bmgl.CallbackProperty(function(){
i=i+0.01;
return bmgl.Rectangle.fromDegrees(-90.0, 30.0+i, -70.0, 35.0+i)
},false),
material: new bmgl.ImageMaterialProperty({
image: new bmgl.CallbackProperty(drawCanvas, false),
transparent: true
}),
rotation: new bmgl.CallbackProperty(getRotationValue, false),
stRotation: new bmgl.CallbackProperty(getRotationValue, false)
}
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
源码