tedp
Version:
terra dp init
124 lines (100 loc) • 2.94 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入地图 可以通过npm install tumap 直接安装包到工程 通过 import TUMap from "tumap" 引入-->
<script src="./dist/tumap.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#mapContainer{
position:absolute;
width:100%;
height:100%;
}
.control-box{
position:absolute;
right:10px;
top:5px;
background:rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.8);
border-radius: 6px;
overflow: hidden;
color:#fff;
font-size:13px;
padding: 5px;
box-sizing: border-box;
}
.control-button ,.close-button{
height:25px;
line-height:25px;
cursor: pointer;
padding: 2px 5px;
box-sizing: border-box;
}
.close-button{
position:absolute;
right:10px;
top:10px;
}
#imgBox{
position:absolute;
left:50px;
top:20px;
right:50px;
bottom:20px;
border:2px solid #ff0000;
background: #fff;
display: none;
}
#imgInner{
position:absolute;
width:100%;
height:100%;
overflow: auto;
}
</style>
</head>
<body>
<!--地图容器-->
<div id="mapContainer"></div>
<!--图片窗口-->
<div id="imgBox">
<div id="imgInner">
<img id="mapImg" >
</div>
<input class="close-button" type="button" value="关闭窗口" onclick="closeImg()" >
</div>
<div class="control-box">
<input class="control-button" type="button" value="截图" onclick="shotImage()" >
</div>
<script type="text/javascript">
//创建地图
var map = TUMap.createMap({
//地图容器 必须设置
id:"mapContainer",
//UE4服务地址 必须设置 当前示例以地址栏地址 为服务地址 ，用户需要替换为自己的服务地址
url:window.parent.window.exampleServerUrl ,//"http://localhost:81/",
}) ;
//截图
function shotImage(){
map.shotImage(function( img ){
showImg(img) ;
})
}
//显示图片
function showImg(value){
document.getElementById("mapImg").setAttribute("src",value);
document.getElementById("imgBox").style.display = "block" ;
}
//隐藏图片
function closeImg(){
document.getElementById("imgBox").style.display = "none" ;
document.getElementById("mapImg").setAttribute("src",null);
}
</script>
</body>
</html>