tedp
Version:
terra dp init
132 lines (107 loc) • 4.21 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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;
min-width: 100px;
min-height: 40px;
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-box>input{
height:25px;
line-height:25px;
cursor: pointer;
padding: 2px 5px;
box-sizing: border-box;
margin:0;
}
</style>
</head>
<body>
<!--地图容器-->
<div id="mapContainer"></div>
<div class="control-box">
<input type="button" value="创建点" onclick="createPoints()" >
<input type="button" value="开始框选" onclick="startSelect()" >
<input type="button" value="关闭框选" onclick="disSelect()" >
<input type="button" value="删除点" onclick="removePoints()" >
框选POI点进行操作
</div>
<script type="text/javascript">
var map = TUMap.createMap({
//地图容器
id:"mapContainer",
//UE4服务地址 必须设置 当前示例以地址栏地址 为服务地址 ，用户需要替换为自己的服务地址
url:window.parent.window.exampleServerUrl ,//"http://localhost:81/",
onInit:function(){
createPoints();
}
}) ;
//标签数组
var points = [ ] ;
var selectedPoints = null ;
//创建标签
function createPoints(){
var imgUrl = "http://www.terra-it.cn/images/tubiao/indexLogo.png";
var testPoints = [
{x:0,y:0,z:0},
{x:30000,y:30000,z:0,image :imgUrl, text:"点001",scale : 0.5},
{x:-30000,y:-30000,z:0,image :imgUrl, text:"点002",scale : 0.5},
{x:-30000,y:30000,z:0,image :imgUrl, text:"点003",scale : 0.5},
{x:30000,y:-30000,z:0,image :imgUrl, text:"点004",scale : 0.5},
{x:50000,y:50000,z:0,image :imgUrl, text:"点005",scale : 0.5},
{x:-50000,y:-50000,z:0,image :imgUrl, text:"点006",scale : 0.5},
{x:-30000,y:50000,z:0,image :imgUrl, text:"点007",scale : 0.5},
{x:50000,y:-50000,z:0,image :imgUrl, text:"点008",scale : 0.5},
] ;
testPoints.forEach(function(item){
points.push(map.createBillboard(item));
});
//移动下位置
map.focusOn(new TUVector3(278,-859,680) , new TURotator( 0, -40, 123) );
}
//开启
function startSelect() {
map.select(function (e) {
selectedPoints = e.selectedObj ;
//回调
alert(JSON.stringify(e));
})
}
//删除选中的标签
function removePoints(){
if(!selectedPoints)
return ;
for(let id of selectedPoints){
map.removeBillboard(id) ;
}
}
//结束
function disSelect(){
map.disSelect();
}
</script>
</body>
</html>