(function (window, mars3d) {
|
//创建widget类，需要继承BaseWidget
|
class MyWidget extends mars3d.widget.BaseWidget {
|
//弹窗配置
|
get view() {
|
return {
|
type: "window",
|
url: "view.html",
|
windowOptions: {
|
width: 350,
|
height:500
|
},
|
};
|
}
|
|
reloadData(new_taxi_sn) {
|
|
this.viewWindow.resetStartQueryTaxiDataText(new_taxi_sn);
|
this.taxi_sn = new_taxi_sn;
|
|
if (this.startGraphic) {
|
this.startGraphic.remove();
|
this.startGraphic = null;
|
}
|
if (this.endGraphic) {
|
this.endGraphic.remove();
|
this.endGraphic = null;
|
}
|
this.routeLayer.clear();
|
}
|
|
clearReplayLayers() {
|
this.pointLayer.clear();
|
this.routeLayer.clear();
|
}
|
|
addTaxiReplayGraphic(points) {
|
|
this.startGraphic = new mars3d.graphic.BillboardEntity({
|
position: points[0],
|
style: {
|
image: this.path + "img/start.png",
|
scale: 1,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
clampToGround: true,
|
},
|
});
|
this.pointLayer.addGraphic(this.startGraphic);
|
|
this.endGraphic = new mars3d.graphic.BillboardEntity({
|
position: points[points.length - 1],
|
style: {
|
image: this.path + "img/end.png",
|
scale: 1,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
clampToGround: true,
|
},
|
});
|
this.pointLayer.addGraphic(this.endGraphic);
|
|
|
|
let Pointsdata = mars3d.global_variables.singleTaxiReplayData
|
for (var i = 0, len = Pointsdata.length; i < len-1; i++) {
|
var item = Pointsdata[i];
|
var item2 = Pointsdata[i+1];
|
var lng = Number(item["lon"]); //经度
|
var lat = Number(item["lat"]); //纬度
|
var lng2 = Number(item2["lon"]); //经度
|
var lat2 = Number(item2["lat"]); //纬度
|
var position = null;
|
var position2 = null;
|
if (lng && lat&&lng2&&lat2) {
|
position = Cesium.Cartesian3.fromDegrees(lng, lat);
|
position2 = Cesium.Cartesian3.fromDegrees(lng2, lat2);
|
}
|
item = changeNullAndundefinedToEmpty(item)
|
let graphic = new mars3d.graphic.PolylineEntity({
|
positions: [position,position2],
|
style: {
|
width: 10,
|
material: new mars3d.material.LineFlowMaterialProperty({
|
color:this.viewWindow.getLayerPointColorByQindexandValue(1004,this.qindex, item[this.qindex]),
|
image: "./img/textures/arrow2.png",
|
repeat: new Cesium.Cartesian2(1, 1),
|
speed: 40, //速度，建议取值范围1-100
|
})
|
},
|
});
|
this.routeLayer.addGraphic(graphic);
|
}
|
// console.log(items,"items")
|
// let graphic = new mars3d.graphic.PolylineEntity({
|
// positions: points,
|
// style: {
|
// width: 10,
|
// material: new mars3d.material.LineFlowMaterialProperty({
|
// color: Cesium.Color.AQUA,
|
// image: "./img/textures/arrow2.png",
|
// repeat: new Cesium.Cartesian2(50, 1),
|
// speed: 40, //速度，建议取值范围1-100
|
// })
|
// },
|
// });
|
// this.routeLayer.addGraphic(graphic);
|
this.routeLayer.flyTo();
|
}
|
|
addTaxiPointInfoGraphic() {
|
var Pointsdata = mars3d.global_variables.singleTaxiReplayData;
|
for (var i = 0, len = Pointsdata.length; i < len-1; i++) {
|
// var item = Pointsdata[i];
|
// // var lng = Number(item["lon"]); //经度
|
// // var lat = Number(item["lat"]); //纬度
|
// // var position = null;
|
// // if (lng && lat) {
|
// // position = Cesium.Cartesian3.fromDegrees(lng, lat);
|
// // }
|
// let keys = ["lon","lat"]
|
// let array = []
|
// Pointsdata.map(item => {
|
// array.push(keys.reduce((result, key) => ({ ...result, [key]: item[key] }), {}))
|
// })
|
// let points = []
|
// array.map(item => {
|
// points.push(Object.values(item))
|
// })
|
// item = changeNullAndundefinedToEmpty(item)
|
var item = Pointsdata[i];
|
var item2 = Pointsdata[i+1];
|
var lng = Number(item["lon"]); //经度
|
var lat = Number(item["lat"]); //纬度
|
var lng2 = Number(item2["lon"]); //经度
|
var lat2 = Number(item2["lat"]); //纬度
|
var position = null;
|
var position2 = null;
|
if (lng && lat&&lng2&&lat2) {
|
position = Cesium.Cartesian3.fromDegrees(lng, lat);
|
position2 = Cesium.Cartesian3.fromDegrees(lng2, lat2);
|
}
|
item = changeNullAndundefinedToEmpty(item)
|
let color_value = this.viewWindow.getLayerPointColorByQindexandValue(1004,this.qindex, item[this.qindex]);
|
//points[Pointsdata.length] = [lon,lat]
|
var CorridorPrimitive = new mars3d.graphic.CorridorEntity({
|
positions: [position,position2],
|
style: {
|
// length: 60.0,
|
width: 10.0,
|
height: 0,
|
cornerType: Cesium.CornerType.BEVELED,
|
// radius: 8.0,
|
diffHeight: this.qindex == "co" ? 100 * item[this.qindex] : 10*item[this.qindex], //高度
|
color:color_value,
|
opacity: 1,
|
// rotationDegree: 45,
|
highlight: {
|
opacity: 1
|
}
|
},
|
item: item,
|
popup:"编号：" +
|
item["code"] +
|
"<br />时间：" +
|
item["datatime"] +
|
"<br />车速：" +
|
item["speed"] +
|
"<table>" +
|
"<tr><td>PM₂.₅：</td><td align= right>" + item["pm25"] + ' ' + "</td><td>μg/m³</td></tr>" +
|
"<tr><td>PM₁₀：</td><td align= right>" + item["pm10"] + ' ' + "</td><td>μg/m³</td></tr>" +
|
"<tr><td>NO：</td><td align= right>" + item["no"] + ' ' + "</td><td>μg/m³</td></tr>" +
|
"<tr><td>NO₂：</td><td align= right>" + item["no2"] + ' ' + "</td><td>μg/m³</td></tr>" +
|
"<tr><td>NOₓ: </td><td align= right>" + item["nox"] + ' ' + "</td><td>μg/m³</td></tr>" +
|
"<tr><td>CO：</td><td align= right>" + item["co"] + ' ' + "</td><td>mg/m³</td></tr>" +
|
"</table>"
|
});
|
this.routeLayer.addGraphic(CorridorPrimitive);
|
}
|
this.routeLayer.flyTo();
|
}
|
|
setSingleTaxiReplayData(datas) {
|
mars3d.global_variables.singleTaxiReplayData = datas;
|
}
|
|
refreshDetailTable(tmpattr) {
|
this.viewWindow.refreshDetailTable(tmpattr);
|
}
|
|
//初始化[仅执行1次]
|
create() {
|
|
this.gaodeRoute = new mars3d.query.GaodeRoute({
|
// key: ['ae29a37307840c7ae4a785ac905927e0'],
|
});
|
this.gaodePOI = new mars3d.query.GaodePOI({
|
// key: ['ae29a37307840c7ae4a785ac905927e0'],
|
});
|
|
//图层管理使用的分组
|
this.groupLayer = new mars3d.layer.GroupLayer({
|
name: this.config.name,
|
pid: 50, //图层管理 中使用，父节点id
|
});
|
|
//创建矢量数据图层
|
this.pointLayer = new mars3d.layer.GraphicLayer({
|
name: this.config.name + "-起止点",
|
});
|
this.groupLayer.addLayer(this.pointLayer); //加入分组
|
|
this.routeLayer = new mars3d.layer.GraphicLayer({
|
name: this.config.name + "-路线",
|
});
|
this.groupLayer.addLayer(this.routeLayer); //加入分组
|
}
|
//每个窗口创建完成后调用
|
winCreateOK(opt, result) {
|
this.viewWindow = result;
|
this.appDateHourStart = mars3d.global_variables.queryDataTStartTaxi;
|
this.appDateHourEnd = mars3d.global_variables.queryDataTEnd;
|
this.nodejs_url_predix = mars3d.global_variables.nodejs_url_predix;
|
this.taxi_sn = this.config.params;
|
this.viewWindow.resetStartQueryTaxiDataText(this.taxi_sn);
|
|
}
|
//打开激活
|
activate() {
|
this.map.addLayer(this.groupLayer);
|
this.map.clock.shouldAnimate = false;
|
this.old_map_clock_startTime = this.map.clock.startTime;
|
this.old_map_clock_currentTime = this.map.clock.currentTime;
|
this.old_map_clock_stopTime = this.map.clock.stopTime;
|
this.old_map_clock_multiplier = this.map.clock.multiplier;
|
mars3d.global_variables.is_single_taxi_replaying = true;
|
this.qindex = mars3d.global_variables.style_selected;
|
}
|
//关闭释放
|
disable() {
|
this.map.clock.shouldAnimate = true;
|
this.map.clock.startTime = this.old_map_clock_startTime;
|
this.map.clock.currentTime = this.old_map_clock_currentTime;
|
this.map.clock.stopTime = this.old_map_clock_stopTime;
|
this.map.clock.multiplier = this.old_map_clock_multiplier;
|
mars3d.global_variables.is_single_taxi_replaying = false;
|
|
if (this.startGraphic) {
|
this.startGraphic.remove();
|
this.startGraphic = null;
|
}
|
if (this.endGraphic) {
|
this.endGraphic.remove();
|
this.endGraphic = null;
|
}
|
this.map.removeLayer(this.groupLayer);
|
|
}
|
|
//漫游自动结束 或点击 停止导航按钮 后，重置界面和操作
|
pauseReplay() {
|
// 暂停回放
|
this.map.clock.shouldAnimate = false;
|
}
|
|
ContinueReplay() {
|
// 继续回放
|
this.map.clock.shouldAnimate = true;
|
}
|
|
//取消当前的视角跟随
|
removeTrack() {
|
if (this.nowFline) {
|
this.nowFline.setCameraOptions({ type: "" });
|
}
|
this.map.trackedEntity = undefined;
|
}
|
//==============开始导航===================
|
startDH() {
|
//导航前释放之前的所有导航操作
|
this.map.clock.shouldAnimate = true;
|
this.map.clock.startTime = Cesium.JulianDate.fromDate(new Date(this.appDateHourStart));
|
this.map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(this.appDateHourStart));
|
this.map.clock.stopTime = Cesium.JulianDate.fromDate(new Date(this.appDateHourEnd));
|
this.map.clock.multiplier = 2.0;
|
|
}
|
//============开始视角跟随=============
|
startGS() {
|
this.nowFline.setCameraOptions({
|
type: "gs",
|
heading: 0,
|
radius: 2500,
|
});
|
}
|
|
}
|
|
//注册到widget管理器中。
|
mars3d.widget.bindClass(MyWidget);
|
|
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
})(window, mars3d);
|
