tedp
Version:
terra dp init
101 lines (90 loc) • 2.71 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指北针</title>
<script src="./dist/tumap.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#mapContainer{
position:absolute;
width:100%;
height:100%;
}
.canvasbox{
position: absolute;
z-index: 10;
right: 0;
top:28%;
width:100px;
height:100px;
}
.canvasbox canvas {
width:100%;
height:100%;
}
</style>
</head>
<body>
<!--地图容器-->
<div id="mapContainer"></div>
<div class="canvasbox">
<canvas id="canvas"></canvas>
</div>
<script>
var map = TUMap.createMap({
//地图容器
id:"mapContainer",
//UE4服务地址 必须设置 当前示例以地址栏地址 为服务地址 ，用户需要替换为自己的服务地址
url:window.parent.window.exampleServerUrl ,//"http://localhost:81/",
//初始化完成回调函数
onInit: function(){
let rotate = map.camera.rotation.yaw-270
compassRotate(rotate)
refreshCamera();
},
//镜头变化触发
onCameraChange: function(){
console.log("========角度=========",map.camera.rotation.yaw)
let rotate = map.camera.rotation.yaw-270
compassRotate(rotate)
}
}) ;
//指北针旋转
function compassRotate(rotate){
let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d')
let img = new Image()
img.src = 'images/compass_800.png'
img.onload = () => {
if (rotate < 0) {
rotate = 360 + rotate
}
rotate = rotate % 360
if (rotate > 45 && rotate < 135) { // 90 宽高颠倒
canvas.width = img.height
canvas.height = img.width
} else if (rotate > 225 && rotate < 315) { // 270 宽高颠倒
canvas.width = img.height
canvas.height = img.width
} else {
canvas.width = img.width
canvas.height = img.height
}
context.clearRect(0, 0, canvas.width, canvas.height)
context.translate(canvas.width / 2, canvas.height / 2)
context.rotate(rotate * Math.PI / 180)
context.translate(-canvas.width / 2, -canvas.height / 2)
context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2)
context.translate(canvas.width / 2, canvas.height / 2)
context.rotate(-rotate * Math.PI / 180)
context.translate(-canvas.width / 2, -canvas.height / 2)
context.restore()
}
}
</script>
</body>
</html>