<!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/jquery.1.12.4.js"></script>
|
<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>
|
$(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("初始化完成");
|
}
|
})
|
});
|
|
// 转为WGS84坐标
|
function toWGS84() {
|
var trans = new TUTransForm({ x: 117.038112825, y: 39.382696649 });
|
trans.transformWGS84ToLocal();
|
trans.transformLocalToWGS84();
|
}
|
|
// 转为UE坐标
|
function toUECoord() {
|
|
}
|
|
// 获取镜头信息
|
function getCamera() {
|
var location = map.camera.location; // 位置信息
|
var rotation = map.camera.rotation; // 角度信息
|
var distance = map.camera.distance; // 距离信息
|
console.log(location, rotation, distance);
|
}
|
|
// 飞行
|
function flyTo() {
|
map.flyTo(x, y, z, roll, pitch, yaw, distance, callBack, time);
|
}
|
|
// 切换镜头
|
function setView() {
|
map.setView(x, y, z, roll, pitch, yaw, distance);
|
}
|
|
// 天气特效：sun-晴天 ,rain-雨天,snow-雪天
|
function setWeather() {
|
map.setWeather("snow");
|
}
|
|
// 时间特效：morning-早晨,noon-中午,evening-傍晚,night-夜晚,darkWorld-暗色场景
|
function setTime() {
|
map.setTime("night");
|
}
|
|
// 文字标签
|
function createLabel() {
|
var options = {
|
id: 1, //唯一标识，不可重复 可不填
|
x: 1000, //x轴ue4坐标
|
y: 1000, //y轴ue4坐标
|
z: 0,//z轴ue4坐标
|
vectorType: "WGS84",//坐标类型 2.1.5版本后可设置
|
size: { width: 480, height: 180 },//label的大小
|
text: '测试文字',//显示的文字
|
scale: 1,//缩放
|
type: 'Type1',//类型 Default,Type1,Type2
|
backgroundColor: "#ffffff",//背景色 支持rgba TUColor
|
fillColor: "#00ff00",//文字颜色
|
visibility: true//默认是否显示
|
};
|
|
var lbl = map.createLabel(options);
|
lbl.show(true); // 显示
|
|
// lbl.show(false); // 隐藏
|
// lbl.removeFromMap(); // 移除
|
// map.removeLabel(lbl.id); // 移除
|
}
|
|
// 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://localhost/testAlertWindow.html", // 弹窗地址
|
size: new Vector2(180, 90), // 弹窗大小
|
offset: new Vector2(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 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://localhost/testAlertWindow.html", // 弹窗地址
|
size: new Vector2(180, 90), // 弹窗大小
|
offset: new Vector2(50, -100) // 弹窗位置，右：x正，下：y正
|
}
|
}
|
|
var poi = map.create3DBillboard(param);
|
poi.show(true); // 显示
|
|
var enable = true; // 是/否开启回调
|
poi.Enable3DBillboardCallBack(enable, function (data) {
|
console.info(data);
|
});
|
|
// poi.show(false); // 隐藏
|
// poi.removeFromMap(); // 移除
|
}
|
|
// 添加线路
|
function createPolyline() {
|
var obj = map.createPolyline({
|
pathWidth: 1000, // 路径宽度
|
pathColor: "#00FF00", // 路径颜色
|
type: 1, // 线路类型: 0高亮 1三角 2箭头
|
data: [ // 路径点位数组，ue4坐标
|
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)
|
]
|
});
|
}
|
|
// 添加区域
|
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)
|
]
|
});
|
}
|
|
// 光圈
|
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() {
|
map.pickPosition(function (e) {
|
alert(JSON.stringify(e)); // e.objectName-内部编号，e.location-点位的ue4坐标
|
map.endPick(); // 取消拾取
|
});
|
}
|
|
// 拾取对象
|
function pickObject() {
|
map.execute("factory", "callEvent", { eventName: "ClickObjectCallBack", param: "1" }, function (e) {
|
console.log(e);
|
map.execute("factory", "callEvent", { eventName: "ClickObjectCallBack", param: "0" }, null); // 取消拾取
|
});
|
}
|
|
// 清除
|
function clear() {
|
map.resetWeather(); // 移除天气特效
|
map.resetTime(); // 移除时间特效
|
map.clearAllCovering(); // 清除所有覆盖物
|
}
|
</script>
|
</head>
|
<body>
|
<div id="map"></div>
|
|
<div id="container">
|
<button onclick="toWGS84();">转为WGS84坐标</button>
|
<button onclick="toUECoord();">转为UE坐标</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="clear();">清除</button>
|
</div>
|
</body>
|
</html>
|
