tedp
Version:
terra dp init
134 lines (110 loc) • 3.68 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="createGrid()" >
<input type="button" class="control-button" value="移除效果" onclick="removeEffect()" >
<input type="checkbox" checked="true" onclick="showEffect(this.checked)">显示/隐藏
</div>
<script type="text/javascript">
var map = TUMap.createMap({
//地图容器
id:"mapContainer",
//UE4服务地址 必须设置 当前示例以地址栏地址 为服务地址 ，用户需要替换为自己的服务地址
url:window.parent.window.exampleServerUrl ,//"http://localhost:81/",
onInit:function(){
createGrid();
}
}) ;
//生成热力图
var heatGridObject ;
var columnNum = 5 ;//网格列数
var rowNum = 6 ;//网格行数
var testData = createTestData(columnNum,rowNum) ;//生成测试数据
//创建网格
function createGrid() {
//如果地图没初始化完不进行操作
if(!map.inited)
return ;
//如果有了删除重新创建
if(heatGridObject)
heatGridObject.removeFromMap();
//创建热力图
heatGridObject = map.createGrid({
bbox: new TUBounds(-250000, 250000, 250000, -250000),//区域范围
columnNumber : columnNum,//行数
rowNumber : rowNum,//列数
data: testData,//网格数据
});
//镜头移动点位
map.flyTo(0,0,500, 0, -40, 68);
//暗色效果做映衬效果更清晰
map.showEffect("darkWorld");
}
//范围内随机创建点
function createTestData( col ,row ){
var list = [];
var len = col * row ;
for(var i=0;i<len;i++){
list.push({
index : i , //下标
row1 : `第${i}个区域`, //标题
row2 : `占地面积：${Math.round(Math.random()*3000)/100}km²`, //描述信息1
row3 : `总人数：${Math.round(Math.random() * 100) + 100}`, //描述信息2
row4 : `在线人数：${Math.round(Math.random() * 100)}` //描述信息3
});
}
return list ;
}
//显示隐藏效果
function showEffect(value) {
if (heatGridObject)
heatGridObject.show(value);
}
//移除效果
function removeEffect(){
if (heatGridObject)
heatGridObject.removeFromMap();
}
</script>
</body>
</html>