<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>重大项目下钻</title>
|
<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;
|
}
|
</style>
|
<script src="UE/jquery.min.js"></script>
|
<script src="UE/tumap.js"></script>
|
<script src="UE/JSON/fencing.js"></script>
|
<script>
|
var UE = {
|
map: null,
|
|
isLocal: true, //判断是否为本地
|
|
urls1: 'http://127.0.0.1:96', //pw场景地址
|
|
urls2: 'http://103.25.37.69:90', // UE服务
|
|
jdApi: 'http://ldjsc.bda.gov.cn/', // 'http://ldjsc.bda.gov.cn/', // 京东接口Ip
|
|
xmUrl: 'sql/data/api/v2/execute/customResult/SA2022062217273604314673/data', // 项目打点
|
|
xqUrl: 'sql/data/api/v2/execute/customResult/SA2022062321434203297015/data', //项目详情
|
|
yqUrl: 'sql/data/api/v2/execute/customResult/SA2022062717005407633812/data', //园区打点
|
|
jhUrl: 'sql/data/api/v2/execute/customResult/SA2022062201154605321374/data', // 项目计划
|
|
yqxqUrl: 'sql/data/api/v2/execute/customResult/SA2022062717201508791458/data', // 园区详情
|
|
zdUrl: 'sql/data/api/v2/execute/customResult/SA2022063015292903464581/data', // 重点企业
|
|
jjqxqurl: 'sql/data/api/v2/execute/customResult/SA2022062719093505120637/data',//经济区详情
|
|
mainUrl: location.href.substring(0, location.href.lastIndexOf('/') + 1), // 本地访问地址
|
|
ueUrl: 'http://103.85.165.98:22306/', // 项目访问地址
|
//电子围栏偏移
|
// xOffset: 0.0045650793719939,
|
// yOffset: 0.035051231623049,
|
|
|
xOffset: -0.0038650793719939,
|
yOffset: 0.032551231623049,
|
|
|
|
// xOffset: -0.0039,
|
// yOffset: 0.0234,
|
//点位偏移
|
// xOffset: -0.0032850793719939,
|
// yOffset: 0.0278651231623049,
|
|
valData: null,
|
|
winXOffset: 22000, // 弹出窗口的X偏移量
|
|
poiHeight: 3000, // poi高度
|
|
labelheight: 5000, // label标签高度
|
|
arr: [], // poi数组，删除poi点用到
|
|
labels: [], // labels数组，删除labels使用
|
fencing: [],//电子围栏数据，删除电子围栏使用
|
|
lastIndex: null, // 切换图片下标
|
|
data: { key: 'TerraIT', industry_name: null, build_id: null }, // UE.test()，UE.locateLY(287)，UE.queryLY("新一代信息技术产业", 287)
|
|
modelFlag: 1,
|
|
dzwlFlag: 1,
|
|
// 初始位置
|
position: {
|
x: -567870.625,
|
y: -964962.4375,
|
z: 0,
|
pitch: -8.675049781799316,
|
roll: 0,
|
yaw: 60.92010498046875,
|
distance: 120112.3671875,
|
time: 3
|
},
|
|
// 初始化
|
init: function () {
|
var that = this
|
this.map = new TUMap({
|
id: 'map', // div的id
|
url: this.isLocal ? this.urls1 : this.urls2,
|
onInit: function () {
|
that.inited() // pw初始化完成
|
}
|
})
|
},
|
|
inited: function () {
|
var that = this
|
this.map.setTime('noon'); // this.map.setTime(12.0) // 中午
|
this.map.setWeather('sun'); // this.map.setWeather('sun') // 晴天
|
this.setView(this.position) // 起始位置
|
this.getDate()
|
// windows 监听message消息事件
|
window.addEventListener('message', function (e) { })
|
|
// 地图点击事件
|
this.map.pickPosition(function (e) {
|
if (e && e.category == 'billboard' && e.clickType == 1 && that.data.build_id != e.data.id) {
|
that.data.build_id = e.data.id
|
console.log('发送消息 => ', that.data)
|
that.locateGrave(e.data.id) //定位
|
}
|
})
|
|
},
|
getDate() {
|
|
var res = [ {x: 116.50078392, y:39.80111853}]
|
var points = [];
|
for (var i in res) {
|
var p = this.map.transformWGS84ToLocal(res[i].x+this.xOffset, res[i].y+this.yOffset)
|
this.map.createBillboard({
|
x: p.x,
|
y: p.y,
|
z: 1500,
|
image: this.mainUrl + 'UE/img/1.png',
|
scale: 0.5,
|
clickedScale: 0.5,
|
visibility: true,
|
flash: false,
|
canClick: true,
|
|
alertWindow: null
|
});
|
}
|
|
|
},
|
getMap: function (res, flag) {
|
this.modelFlag = res;
|
this.dzwlFlag = flag;
|
this.cls();//清除所有
|
this.queryXM() // 项目打点
|
},
|
|
cls: function () {
|
this.clsPosition() // 清除打点数据
|
this.clsTLabel() // 清除清除文本
|
this.clsfecing() // 清除电子围栏
|
},
|
|
clsfecing: function () {
|
if (!this.fencing.length) return
|
this.fencing.forEach(function (areaObject) {
|
areaObject.removeFromMap();
|
})
|
this.fencing.length = 0;
|
},
|
|
clsPosition: function () {
|
this.lastIndex = null
|
if (!this.arr.length) return;
|
|
this.arr.forEach(function (b) {
|
b.removeFromMap()
|
})
|
this.arr.length = 0
|
},
|
|
clsTLabel: function () {
|
if (!this.labels.length) return;
|
|
this.labels.forEach(function (label) {
|
label.removeFromMap();
|
})
|
this.labels.length = 0;
|
},
|
|
queryXM: function () {
|
if (this.modelFlag == null || isNaN(this.modelFlag)) return;
|
|
if (this.modelFlag == 3) { // 电子围栏
|
this.loadfencing();
|
return;
|
}
|
|
var urls = [this.xmUrl, this.yqUrl, this.zdUrl]; // 重点项目,园区打点,重点企业
|
var url = urls[this.modelFlag];
|
if (!url) return;
|
|
var that = this;
|
this.ajax(url, 'post', {}, 'json', null, function (rs) {
|
if (!rs || !rs.length) return;
|
that.loadXM(rs); // 加载项目打点数据
|
that.loadTable(rs)//加载项目label
|
})
|
},
|
|
locateGrave: function (build_id) {
|
var idx = this.findPOI(build_id);
|
if (idx == -1) return;
|
var poi = this.arr[idx];
|
this.map.focusOn(
|
new TUVector3(poi.ue4x + this.winXOffset, poi.ue4y + 1000, this.poiHeight),
|
new TURotator(0, -53, 0)
|
);
|
|
this.changeImg(build_id); // 切换图片
|
},
|
|
changeImg: function (id) {
|
if (this.modelFlag === 0) {
|
var param = JSON.stringify({ id: res })
|
var vals = this.getIdMessage(param, this.jhUrl);
|
var arr = [];
|
for (var i = 0, c = vals.length; i < c; i++) {
|
arr.push({ 'm': vals[i].month, 'd': vals[i].proj_desc, 's': vals[i].state, 'c': vals[i].content });
|
}
|
this.valData = arr;
|
} else if (this.modelFlag === 1) {
|
var param = JSON.stringify({ id: res })
|
var vals = this.getIdMessage(param, this.yqxqUrl);
|
this.valData = vals;
|
} else if (this.modelFlag === 3) {
|
var valName = ["", "大兴部分", "通州部分", "核心区"];
|
var xname = valName[this.dzwlFlag];
|
|
var param = JSON.stringify({ belong_area: xname })
|
var vals = this.getIdMessage(param, this.jjqxqurl);
|
this.valData = vals;
|
}
|
|
var idx = this.findPOI(id);
|
if (idx == -1 || this.lastIndex == idx) return;
|
|
if (this.lastIndex != null) {
|
this.changePOI(this.lastIndex, false)
|
this.lastIndex = null;
|
}
|
|
this.changePOI(idx, true); // 切换POI
|
this.map.execute('grapi', 'Show2dPOI', { visibility: true, id: id }, function (e) { });
|
this.lastIndex = idx;
|
},
|
|
changePOI: function (index, flag) {
|
var poi = this.arr[index],
|
d = this.arr[index].data;
|
if (flag == true) {
|
this.labels[index].show(false)
|
} else {
|
this.labels[index].show(true)
|
}
|
var bb = this.createPosition(poi.ue4x, poi.ue4y, poi.data, flag);
|
|
poi.removeFromMap();
|
this.arr.splice(index, 1, bb);
|
},
|
|
// 查找POI
|
findPOI: function (id) {
|
for (var i = 0, c = this.arr.length; i < c; i++) {
|
if (this.arr[i].data.id == id) return i;
|
}
|
return -1
|
},
|
|
loadfencing: function () {
|
var that = this;
|
|
var val = DZWL[this.dzwlFlag];
|
|
that.loadJSON(val);
|
},
|
|
loadJSON: function (val) {
|
var str = val.coordinates;
|
var rs = val.position;
|
var name = val.name;
|
var len = this.getStrLen(name);
|
for (var i in str) {
|
var res = str[i];
|
var std = [];
|
for (var j in res) {
|
var p = this.map.transformWGS84ToLocal(res[j][0] , res[j][1]);
|
console.log("测试数据",p)
|
std.push(new TUVector3(p.x, p.y))
|
}
|
var w = this.map.transformWGS84ToLocal(rs[i][0] + this.xOffset, rs[i][1] + this.yOffset);
|
var bb = this.createPosition(w.x, w.y, { id: i }, false);
|
var lb = this.createTLabel(name, len, w);
|
this.labels.push(lb)
|
this.arr.push(bb);
|
var areaObject = this.createFencing(std)
|
this.fencing.push(areaObject)
|
}
|
},
|
|
createPosition: function (ue4x, ue4y, d, flag) {
|
var urls;
|
if (this.modelFlag === 0) {
|
if (d.has_exception === 0) {
|
urls = (this.isLocal ? this.mainUrl : this.ueUrl) + (flag ? 'UE/img/grave3.png' : 'UE/img/grave4.png');
|
} else {
|
urls = (this.isLocal ? this.mainUrl : this.ueUrl) + (flag ? 'UE/img/grave2.png' : 'UE/img/grave1.png');
|
}
|
} else if (this.modelFlag === 1) {
|
urls = (this.isLocal ? this.mainUrl : this.ueUrl) + (flag ? 'UE/img/grave5.png' : 'UE/img/grave6.png');
|
|
} else if (this.modelFlag === 2) {
|
urls = (this.isLocal ? this.mainUrl : this.ueUrl) + (flag ? 'UE/img/grave5.png' : 'UE/img/grave6.png');
|
} else {
|
urls = (this.isLocal ? this.mainUrl : this.ueUrl) + (flag ? 'UE/img/grave7.png' : 'UE/img/grave7.png');
|
}
|
|
return this.map.createBillboard({
|
id: d.id,
|
name: 'MJ',
|
x: ue4x,
|
y: ue4y,
|
z: this.poiHeight,
|
image: urls,
|
scale: 0.5,
|
clickedScale: 0.5,
|
visibility: true,
|
flash: false,
|
canClick: true,
|
data: d,
|
alertWindow: this.getAlertWin(d)
|
});
|
},
|
|
//创建围栏的方法
|
createFencing: function (param) {
|
return this.map.createAreaBoundary({
|
data: param,
|
type: 0, //0上浮横格，1实色，2箭头，3三角
|
height: 10000, //默认5000
|
color: "#ff0000",//默认白色
|
brightness: 10 //默认10
|
})
|
},
|
|
|
loadXM: function (data) {
|
for (var i = 0, c = data.length; i < c; i++) {
|
var d = data[i];
|
if (!d.lng || !d.lat) continue;
|
var p = this.map.transformWGS84ToLocal(d.lng , d.lat);
|
|
var bb = this.createPosition(p.x, p.y, d, false);
|
|
this.arr.push(bb)
|
}
|
},
|
|
loadTable: function (res) {
|
for (var i in res) {
|
var d = res[i];
|
if (!d.lng || !d.lat) continue
|
var p = this.map.transformWGS84ToLocal(d.lng , d.lat);
|
var str;
|
if (this.modelFlag === 0) {
|
str = d.project_name
|
} else if (this.modelFlag === 1) {
|
str = d.park_name
|
} else if (this.modelFlag === 2) {
|
str = d.name
|
}
|
console.log(str,p)
|
var len = this.getStrLen(str);
|
var tlabel = this.createTLabel(str, len, p)
|
this.labels.push(tlabel)
|
}
|
},
|
|
createTLabel: function (str, len, p) {
|
return this.map.createLabel({
|
x: p.x,
|
y: p.y,
|
z: 5000, //位置
|
size: { width: len * 7, height: 15 },
|
text: str,
|
scale: 0.8,
|
type: 'Default',
|
backgroundColor: 'rgba(28, 34, 43, 0.4)',
|
fillColor: '#ffffff'
|
})
|
},
|
|
getStrLen: function (str) {
|
var len = 0;
|
for (var j = 0; j < str.length; j++) {
|
var c = str.charCodeAt(j);
|
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f))
|
len++;
|
else
|
len += 2;
|
}
|
return len;
|
},
|
|
getAlertWin: function (d) {
|
var width, height, name, imgHeight, imgWidth, num;
|
if (this.modelFlag === 0) {
|
width = 424
|
height = 422
|
imgHeight = 60
|
imgWidth = 68
|
num = 2.7
|
name = 'PopOne'
|
} else if (this.modelFlag === 1) {
|
width = 310
|
height = 173
|
imgWidth = 50
|
imgHeight = 20
|
num = 2.2
|
name = 'PopTwo'
|
} else if (this.modelFlag === 3) {
|
width = 374
|
height = 221
|
imgWidth = 50
|
imgHeight = 20
|
num = 2.2
|
name = 'PopThree'
|
}
|
|
return {
|
url:
|
(this.isLocal ? this.mainUrl : this.ueUrl) + name +
|
'.html?v=' + encodeURI(JSON.stringify(this.valData)), // 弹窗地址
|
size: new TUVector2(width, height), // 弹窗大小
|
offset: new TUVector2(-imgWidth, 5 - height / num) // 弹窗位置，右：x正，下：y正
|
}
|
},
|
|
getIdMessage: function (res, rls) {
|
var value = null;
|
$.ajax({
|
url: this.getHost() + rls,
|
type: 'POST',
|
data: res,
|
dataType: 'json', // html、json、jsonp、script、text
|
contentType: 'application/json', //"application/x-www-form-urlencoded"
|
async: false,
|
success: function (data) {
|
value = data;
|
},
|
error: function (e) {
|
console.error(e)
|
|
}
|
})
|
return value
|
},
|
|
ajax: function (url, type, data, dataType, contentType, fn) {
|
$.ajax({
|
url: this.getHost() + url,
|
type: type,
|
data: data,
|
dataType: dataType || 'json', // html、json、jsonp、script、text
|
contentType: contentType || 'application/json', //"application/x-www-form-urlencoded"
|
success: function (data) {
|
fn(data)
|
},
|
error: function (e) {
|
console.error(e)
|
fn()
|
}
|
})
|
},
|
|
getHost: function () {
|
return 'easy-data/'
|
},
|
|
setView: function (v) {
|
// x-UE坐标X, y-UE坐标Y, z-UE坐标Z, roll-以朝向为轴的旋转角度, pitch-以朝向正右为轴的旋转角度, yaw-以朝向正上为轴的旋转角度, distance-镜头高度
|
this.map.setView(v.x, v.y, v.z, v.roll, v.pitch, v.yaw, v.distance)
|
}
|
}
|
$(function () {
|
window.UE = UE
|
UE.init()
|
})
|
</script>
|
</head>
|
|
<body>
|
<div id="map"></div>
|
</body>
|
|
</html>
|
