<!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 setWeather() {
|
// sun-晴天 ,rain-雨天,snow-雪天
|
map.setWeather('rain') // 晴天
|
}
|
|
// 时间特效
|
function setTime() {
|
// morning-早晨,noon-中午,evening-傍晚,night-夜晚,darkWorld-暗色场景
|
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: 1, // 缩放
|
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: "http://www.terra-it.cn/images/tubiao/indexLogo.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(50, -100) // 弹窗位置，右：x正，下：y正
|
}
|
}
|
|
var poi = map.createBillboard(param);
|
poi.show(true); // 显示
|
|
var enable = true; // 是/否开启回调
|
poi.EnableBillboardCallBack(enable, function (data) {
|
console.info(data);
|
});
|
|
// 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: "http://www.terra-it.cn/images/tubiao/indexLogo.png",
|
text: "",
|
scale: 20,
|
clickedScale: 1,
|
flash: false,
|
canClick: true
|
});
|
});
|
|
var pois = map.create3DBillboard(points);
|
pois.forEach(function (poi) {
|
poi.show(true);
|
// poi.show(false); // 隐藏
|
// poi.removeFromMap(); // 移除
|
});
|
}
|
|
// 添加线路
|
function createPolyline() {
|
var testPoints = [
|
new TUVector3(77053.6953125, 150984.859375, 0),
|
new TUVector3(16167.91015625, 151470.453125, 0),
|
new TUVector3(14827.0908203125, 100942.328125, 0),
|
new TUVector3(71444.015625, 104834.4375, 0),
|
new TUVector3(67891.890625, 57269.85546875, 0),
|
new TUVector3(13084.04296875, 56401.7734375, 0),
|
new TUVector3(11550.640625, -13705.76953125, 0),
|
new TUVector3(7773.74560546875, -103738.140625, 0),
|
];
|
|
//绘制路径
|
var pathObj = map.createPolyline({
|
data: testPoints,
|
pathWidth: 3000,
|
type: 0,//0高亮线 1三角 2箭头
|
pathColor: "cyan",
|
});
|
|
var roll = 0, pitch = -45, yaw = 0, distance = 1000;
|
var callBack = function () { console.log("flyTo"); }
|
var time = 3; // 3s
|
|
map.flyTo(116.51446997, 39.772785555, 1000, roll, pitch, yaw, distance, callBack, time);
|
}
|
|
// 添加区域
|
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 createCircleArea() {
|
var param = {
|
location: new TUVector3(0, 0, 0), // 中心点
|
radius: 15000,
|
type: 2, // 0上浮横格，1实色，2箭头，3三角
|
color: "#ff0000",
|
height: 15000, // 默认5000
|
brightness: 10 // 默认10
|
}
|
var circle = map.createCircleArea(param);
|
// circle.removeFromMap(); // 移除
|
}
|
|
// 围栏
|
function createAreaBoundary() {
|
var param = {
|
type: 0, // 0上浮横格，1实色，2箭头，3三角
|
height: 5000, // 默认5000
|
color: "#ff0000", // 默认白色
|
brightness: 10, // 默认10
|
data: [ // 围栏点位数组
|
new TUVector3(-129.99, -7.41, 0),
|
new TUVector3(-131.00, -134.96, 0),
|
new TUVector3(113.83, -128.26, 0),
|
new TUVector3(123.84, -550.99, 0)
|
]
|
}
|
var bound = map.createAreaBoundary(param);
|
// bound.removeFromMap(); // 移除
|
}
|
|
// 高度量测
|
function getMeasureHeight() {
|
var obj = map.getMeasureHeight(function (e) { // 回调
|
alert(JSON.stringify(e));
|
obj.deleteObject(); // 移除
|
});
|
}
|
|
// 折线距离量测
|
function getDistanceHorizontal() {
|
var obj = map.getDistanceHorizontal(function (e) { // 回调
|
alert(JSON.stringify(e));
|
obj.deleteObject(); // 移除
|
});
|
}
|
|
// 平面面积量测
|
function getPlaneArea() {
|
var obj = map.getPlaneArea(function (e) { // 回调
|
alert(JSON.stringify(e));
|
obj.deleteObject(); // 移除
|
});
|
}
|
|
// 拾取坐标
|
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();
|
}
|
|
</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="setWeather();">天气特效</button> -->
|
<button onclick="setTime();">时间特效</button>
|
<button onclick="createLabel();">文字标签</button>
|
<button onclick="createBillboard();">POI点</button>
|
<button onclick="create3DBillboard();">3DPOI点</button>
|
<!-- <button onclick="createPolyline();">添加线路</button> -->
|
<button onclick="createAreaData();">添加区域</button>
|
<button onclick="createCircleArea();">光圈</button>
|
<button onclick="createAreaBoundary();">围栏</button>
|
<!-- <button onclick="getMeasureHeight();">高度量测</button>
|
<button onclick="getDistanceHorizontal();">折线距离量测</button>
|
<button onclick="getPlaneArea();">平面面积量测</button> -->
|
<button onclick="pickPosition();">获取镜头坐标</button>
|
<button onclick="pickObject();">拾取对象</button>
|
<button onclick="objclear();">清除</button>
|
</div>
|
</body>
|
|
</html>
|
