<!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.04046434254622,
|
"y": 39.722702758997606,
|
"z": 0
|
}
|
var Wgs84ToLocal = map.transformWGS84ToLocal(coordinate.x, coordinate.y)
|
console.log('Wgs84ToLocal', Wgs84ToLocal)
|
var LocalToWGS84 = map.transformLocalToWGS84(Wgs84ToLocal.x, Wgs84ToLocal.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 v = {
|
z: 0,
|
pitch: -8.675049781799316,
|
roll: 0,
|
yaw: 60.92010498046875,
|
distance: 120112.3671875,
|
time: 3
|
};
|
var x = 116.48915493897739; y = 39.81061022857503; z = 5000;
|
var LocalToWGS84 = transToWGS84ToLocal(x, y)
|
|
var roll = 0, pitch = 0, yaw = 0, distance = 1000;
|
var callBack = function () { console.log("flyTo"); }
|
var time = 3; // 3s
|
|
map.flyTo(LocalToWGS84.x, LocalToWGS84.y, v.z, v.roll, v.pitch, v.yaw, v.distance, callBack, time);
|
}
|
|
function transToWGS84ToLocal(x, y) {
|
return map.transformWGS84ToLocal(x, y)
|
}
|
|
// 切换镜头
|
function setView() {
|
var v = {
|
x: -567870.625,
|
y: -964962.4375,
|
z: 0,
|
pitch: -8.675049781799316,
|
roll: 0,
|
yaw: 120.92010498046875,
|
distance: 120112.3671875,
|
time: 3
|
};
|
map.setView(v.x, v.y, v.z, v.roll, v.pitch, v.yaw, v.distance);
|
}
|
|
// 时间特效
|
var timeFlag = true;
|
function setTime() {
|
// morning-早晨,noon-中午,evening-傍晚,night-夜晚,darkWorld-暗色场景,12
|
if (timeFlag) {
|
map.setTime("evening");
|
} else {
|
map.setTime("noon");
|
}
|
timeFlag = !timeFlag
|
}
|
|
// 文字标签
|
var labelFlag = true;
|
var label_val = null;
|
function createLabel() {
|
var x = 116.48915493897739; y = 39.81061022857503; z = 5000;
|
var LocalToWGS84 = transToWGS84ToLocal(x, y)
|
if (labelFlag) {
|
var options = {
|
id: 1, // 唯一标识，不可重复，可不填
|
x: LocalToWGS84.x, // x轴ue4坐标
|
y: LocalToWGS84.y, // y轴ue4坐标
|
z: 0, // z轴ue4坐标
|
size: { width: 100, height: 100 }, // label的大小
|
text: '测试文字', // 显示的文字
|
scale: 0.5, // 缩放
|
type: 'Type1', // 类型 Default,Type1,Type2
|
backgroundColor: "#ffffff", // 背景色支持rgba
|
fillColor: "#00ff00", // 文字颜色
|
visibility: true // 默认是否显示
|
};
|
|
label_val = map.createLabel(options);
|
} else {
|
label_val.removeFromMap();
|
label_val = null;
|
}
|
labelFlag = !labelFlag;
|
}
|
|
// POI点
|
var poiFlag = true;
|
var poi_val = null;
|
function createBillboard() {
|
var x = 116.48815493897739; y = 39.81061022857503; z = 5000;
|
var LocalToWGS84 = transToWGS84ToLocal(x, y)
|
if (poiFlag) {
|
var param = {
|
x: LocalToWGS84.x, // x轴ue4坐标
|
y: LocalToWGS84.y, // 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(-45, -110) // 弹窗位置，右：x正，下：y正
|
}
|
}
|
poi_val = map.createBillboard(param);
|
poi_val.show(true); // 显示
|
} else {
|
poi_val.removeFromMap();
|
poi_val = null;
|
}
|
poiFlag = !poiFlag;
|
|
}
|
|
// 3DPOI点
|
var thPoiFlag = true;
|
var poi_3d_val = null
|
function create3DBillboard() {
|
if (thPoiFlag) {
|
var testPoints = [{ x: 116.49255493897739, y: 39.81451022857503, z: 4000 }];
|
var points = [];
|
testPoints.forEach(function (item) {
|
var LocalToWGS84 = transToWGS84ToLocal(item.x, item.y)
|
points.push({
|
x: LocalToWGS84.x,
|
y: LocalToWGS84.y,
|
z: item.z,
|
image: "123.png",
|
text: "",
|
scale: 80,
|
clickedScale: 1,
|
flash: false,
|
canClick: true
|
});
|
});
|
|
poi_3d_val = map.create3DBillboard(points);
|
poi_3d_val.forEach(function (poi) {
|
poi.show(true);
|
|
});
|
} else {
|
poi_3d_val.forEach(function (poi) {
|
poi.removeFromMap();
|
});
|
poi_3d_val = null
|
}
|
thPoiFlag = !thPoiFlag;
|
}
|
|
// 添加区域\
|
var areaFlag = true;
|
var area_val = null;
|
function createAreaData() {
|
if (areaFlag) {
|
var val = [
|
{ x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
|
{ x: 116.48505493897739, y: 39.81651022857503, z: 4000 },
|
{ x: 116.48905493897739, y: 39.81851022857503, z: 4000 },
|
{ x: 116.49255493897739, y: 39.81451022857503, z: 4000 },
|
|
{ x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
|
]
|
var data = [];
|
for (var i in val) {
|
var item = transToWGS84ToLocal(val[i].x, val[i].y)
|
data.push(
|
new TUVector3(item.x, item.y, 0)
|
)
|
}
|
area_val = map.createAreaData({
|
id: "fdfdfdfdfd",
|
data: data
|
});
|
} else {
|
area_val.removeFromMap();
|
area_val = null;
|
}
|
areaFlag = !areaFlag;
|
}
|
|
// 围栏
|
var boundflag = true;
|
var bound_val = null
|
function createAreaBoundary() {
|
if (boundflag) {
|
var val = [
|
{ x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
|
{ x: 116.48505493897739, y: 39.81651022857503, z: 4000 },
|
{ x: 116.48905493897739, y: 39.81851022857503, z: 4000 },
|
{ x: 116.49255493897739, y: 39.81451022857503, z: 4000 },
|
|
{ x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
|
]
|
var data = [];
|
for (var i in val) {
|
var item = transToWGS84ToLocal(val[i].x, val[i].y)
|
data.push(
|
new TUVector3(item.x, item.y, 0)
|
)
|
}
|
var param = {
|
type: 0, // 0上浮横格，1实色，2箭头，3三角
|
height: 5000, // 默认5000
|
color: "#ff0000", // 默认白色
|
brightness: 10, // 默认10
|
data: data
|
};
|
bound_val = map.createAreaBoundary(param);
|
|
|
} else {
|
bound_val.removeFromMap();
|
bound_val = null;
|
}
|
boundflag = !boundflag;
|
}
|
|
// 拾取坐标
|
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");
|
boundflag = true;
|
bound_val = null
|
areaFlag = true;
|
area_val = null;
|
thPoiFlag = true;
|
poi_3d_val = null;
|
poiFlag = true;
|
poi_val = null;
|
}
|
|
</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>
|
