<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
<title>UE接口测试</title>
|
<meta http-equiv="Expires" content="0" />
|
<meta http-equiv="Cache" content="no-cache" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Cache-control" content="no-cache" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<script src="js/tumap.js"></script>
|
<style>
|
html,
|
body {
|
width: 100%;
|
height: 100%;
|
padding: 0;
|
margin: 0;
|
overflow: hidden;
|
font-size: 13px;
|
font-family: 微软雅黑;
|
}
|
|
#map {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
}
|
|
#container {
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
padding: 5px;
|
border-radius: 4px;
|
border: 1px solid rgba(128, 128, 128, 0.5);
|
color: #ffffff;
|
}
|
|
button {
|
background: transparent;
|
border: 1px solid #d0ffb8;
|
color: white;
|
border-radius: 2px;
|
margin: 3px;
|
cursor: pointer;
|
}
|
</style>
|
<script>
|
window.onload = function () {
|
window.map = new TUMap({
|
id: 'map', // div的id
|
url: 'http://192.168.20.39:91', // UE服务地址
|
//url: 'http://103.85.165.99:91',
|
onInit: function () { // 初始化完成事件
|
console.log("初始化完成");
|
}
|
})
|
}
|
|
// 坐标转化
|
function transform() {
|
var coordinate = { x: 117.038112825, y: 39.382696649 }
|
var Wgs84ToLocal = map.transformWGS84ToLocal(coordinate.x, coordinate.y)
|
console.log('Wgs84ToLocal', Wgs84ToLocal)
|
|
var LocalToWGS84 = map.transformLocalToWGS84(Wgs84ToLocal.x, coordinate.y)
|
console.log('LocalToWGS84', LocalToWGS84)
|
}
|
|
// 获取镜头信息
|
function getCamera() {
|
var location = map.camera.location; // 位置信息
|
var rotation = map.camera.rotation; // 角度信息
|
var distance = map.camera.distance; // 距离信息
|
console.log(location, rotation, distance);
|
}
|
|
// 飞行
|
function flyTo() {
|
var x = 117.038112825, y = 39.382696649, z = 5000;
|
var roll = 0, pitch = 0, yaw = 0, distance = 1000;
|
var callBack = function () { console.log("flyTo"); }
|
var time = 3; // 3s
|
|
map.flyTo(x, y, z, roll, pitch, yaw, distance, callBack, time);
|
}
|
|
// 切换镜头
|
function setView() {
|
var x = 117.038112825, y = 39.382696649, z = 5000;
|
var roll = 0, pitch = 0, yaw = 0, distance = 1000;
|
|
map.setView(x, y, z, roll, pitch, yaw, distance);
|
}
|
|
// 时间特效
|
function setTime() {
|
// morning-早晨,noon-中午,evening-傍晚,night-夜晚,darkWorld-暗色场景,12
|
map.setTime("evening");
|
}
|
|
// 文字标签
|
function createLabel() {
|
var options = {
|
id: 1, // 唯一标识，不可重复，可不填
|
x: 1000, // x轴ue4坐标
|
y: 1000, // y轴ue4坐标
|
z: 0, // z轴ue4坐标
|
size: { width: 480, height: 180 }, // label的大小
|
text: '测试文字', // 显示的文字
|
scale: 0.5, // 缩放
|
type: 'Type1', // 类型 Default,Type1,Type2
|
backgroundColor: "#ffffff", // 背景色支持rgba
|
fillColor: "#00ff00", // 文字颜色
|
visibility: true // 默认是否显示
|
};
|
|
var lbl = map.createLabel(options);
|
// lbl.show(true); // 显示
|
}
|
|
// POI点
|
function createBillboard() {
|
var param = {
|
x: 1000, // x轴ue4坐标
|
y: 1000, // y轴ue4坐标
|
z: 0, // z轴ue4坐标
|
image: "123.png", // 图片地址
|
scale: 0.5, // 缩放比例
|
clickedScale: 0.7, // 点击后比例
|
visibility: true, // 默认是否显示
|
alertWindow: { // 可选，点击弹窗
|
url: "http://192.168.20.89:12306/popupThree.html", // 弹窗地址
|
size: new TUVector2(180, 90), // 弹窗大小
|
offset: new TUVector2(90, -90) // 弹窗位置，右：x正，下：y正
|
}
|
}
|
|
var poi = map.createBillboard(param);
|
poi.show(true); // 显示
|
// poi.show(false); // 隐藏
|
// poi.removeFromMap(); // 移除
|
}
|
|
// 3DPOI点
|
function create3DBillboard() {
|
var testPoints = [{ "x": 10000, "y": 10000, "z": 4000 }];
|
var points = [];
|
testPoints.forEach(function (item) {
|
points.push({
|
x: item.x,
|
y: item.y,
|
z: item.z,
|
image: "123.png",
|
text: "",
|
scale: 120,
|
clickedScale: 1,
|
flash: false,
|
canClick: true
|
});
|
});
|
|
var pois = map.create3DBillboard(points);
|
pois.forEach(function (poi) {
|
poi.show(true);
|
// poi.show(false); // 隐藏
|
// poi.removeFromMap(); // 移除
|
});
|
}
|
|
// 添加区域
|
function createAreaData() {
|
var obj = map.createAreaData({
|
id: "fdfdfdfdfd",
|
data: [
|
new TUVector3(0, 0, 0),
|
new TUVector3(10000, 0, 0),
|
new TUVector3(10000, 10000, 0),
|
new TUVector3(0, 10000, 0)
|
]
|
});
|
// obj.removeFromMap(); // 移除
|
}
|
|
// 围栏
|
function createAreaBoundary() {
|
var param = {
|
type: 0, // 0上浮横格，1实色，2箭头，3三角
|
height: 5000, // 默认5000
|
color: "#ff0000", // 默认白色
|
brightness: 10, // 默认10
|
data: [ // 围栏点位数组
|
new TUVector3(0, 0, 0),
|
new TUVector3(100000, 0, 0),
|
new TUVector3(100000, 100000, 0),
|
new TUVector3(0, 100000, 0),
|
new TUVector3(0, 0, 0)
|
]
|
};
|
var bound = map.createAreaBoundary(param);
|
|
map.focusOn(new TUVector3(739, 303, 1040), new TURotator(0, -73, 147), 107737);
|
|
// bound.removeFromMap(); // 移除
|
}
|
|
// 拾取坐标
|
function pickPosition() {
|
var obj = map.transformLocalToWGS84(map.camera.location.x, map.camera.location.y);
|
alert(JSON.stringify(obj));
|
}
|
|
// 拾取对象
|
function pickObject() {
|
map.pickPosition(function (e) {
|
alert(JSON.stringify(e))
|
});
|
}
|
|
// 清除
|
function objclear() {
|
map.clearAllCovering();
|
map.setTime("noon"); // map.resetTime();
|
}
|
|
</script>
|
</head>
|
|
<body>
|
<div id="map"></div>
|
|
<div id="container">
|
<button onclick="transform();">坐标转换</button>
|
<button onclick="getCamera();">获取镜头信息</button>
|
<button onclick="flyTo();">飞行</button>
|
<button onclick="setView();">切换镜头</button>
|
<button onclick="setTime();">时间特效</button>
|
<button onclick="createLabel();">文字标签</button>
|
<button onclick="createBillboard();">POI点</button>
|
<button onclick="create3DBillboard();">3DPOI点</button>
|
<button onclick="createAreaData();">添加区域</button>
|
<button onclick="createAreaBoundary();">围栏</button>
|
<button onclick="pickPosition();">获取镜头坐标</button>
|
<button onclick="pickObject();">拾取对象</button>
|
<button onclick="objclear();">清除</button>
|
</div>
|
</body>
|
|
</html>
|
