tedp
Version:
terra dp init
120 lines (98 loc) • 3.23 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;
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{
height:25px;
line-height:25px;
cursor: pointer;
padding: 2px 5px;
box-sizing: border-box;
margin-right:10px;
}
</style>
</head>
<body>
<!--地图容器-->
<div id="mapContainer"></div>
<div class="control-box">
<input type="button" class="control-button" value="创建柱图" onclick="createColumn2()" >
<input type="button" class="control-button" value="显示" onclick="showColumns(true)" >
<input type="button" class="control-button" value="隐藏" onclick="showColumns(false)" >
<input type="button" class="control-button" value="移除效果" onclick="removeEffect()" >
</div>
<script type="text/javascript">
var map = TUMap.createMap({
//地图容器
id:"mapContainer",
//UE4服务地址 必须设置 当前示例以地址栏地址 为服务地址 ，用户需要替换为自己的服务地址
url:window.parent.window.exampleServerUrl ,//"http://localhost:81/",
onInit:function(){
createColumn2();
}
}) ;
//柱图数组
var columnObjects = [] ;
//根据坐标定位柱图
function createColumn2(){
//如果地图没初始化完不进行操作
if(!map.inited)
return ;
//如果有删除效果
removeEffect();
//循环添加柱
for (let i = 0; i < 5; i++) {
columnObjects.push(map.createStatisticCylinder({
type:1,
location:new TUVector3(Math.random()*20000,Math.random()*20000,10000 ),
value : 10+Math.random()*50,
uintHeight: 1000,//单位高度，一个单位value值代表的厘米数 默认100
radius: 3000, //柱子半径，默认500
brightness:10,
color:"#00ff00",
warnColor:"#ff0000",
warnValue:20,
}));
}
map.focusOn(new TUVector3(-272,752,451), new TURotator(10, -29, -70),91919);
}
//显示隐藏热力图
function showColumns(value) {
columnObjects.forEach(function(item){
item.show(value) ;
})
}
//移除效果
function removeEffect(){
columnObjects.forEach(function(item){
item.removeFromMap();
})
}
</script>
</body>
</html>