suzhou-jichuang-lanhai
/
yunkunMap
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

车辆历史轨迹

Browse Source
main
许宏杰 2 weeks ago
parent 6a6dc4278c
commit 7e28f6ce01
1 changed files with 60 additions and 108 deletions
Show Stats Download Patch File Download Diff File

168
src/views/carInfo.vue
Unescape View File

@ -84,6 +84,7 @@ export default {
this.map = map;
this.graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(this.graphicLayer);
// this.initTilesetLayer();
this.getCarHistoryLine();
},
@ -95,8 +96,42 @@ export default {
this.list.push([parseFloat(item.lng), parseFloat(item.lat)]);
});
this.createCar(result.countData);
this.historyLine();
this.createCar(result.countData.avg_speed);
},
historyLine() {
const firstPoint = this.list[0];
const divGraphic = new mars3d.graphic.DivGraphic({
position: firstPoint,
style: {
html: `<div class="mars-four-color mars3d-animation">
<div class="four-color_name">起点</div>
</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition: true,
clampToGround: true,
visibleDepth: true,
},
});
this.graphicLayer.addGraphic(divGraphic);
const graphic = new mars3d.graphic.PolylineEntity({
positions: this.list,
style: {
width: 10,
color: "#00F7AC",
outline: true,
outlineColor: "#008DF8",
outlineWidth: 5,
clampToGround: true,
},
});
this.graphicLayer.addGraphic(graphic);
},
/**获取车辆天里程 */
async getCarMidle() {
const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted();
@ -178,13 +213,14 @@ export default {
/**
* 生成车辆实时点位
*/
async createCar(countData) {
async createCar(avg_speed) {
let _this = this;
const lastPoint = this.list[this.list.length - 1];
// let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
const fixedRoute = new mars3d.graphic.FixedRoute({
name: "贴模型表面漫游",
speed: countData.avg_speed, //平均速度值
positions: _this.list,
speed: avg_speed, //平均速度值
positions: [lastPoint],
camera: {
type: "gs",
heading: 90,
@ -223,7 +259,7 @@ export default {
// },
// },
circle: {
radius: 60,
radius: 500,
materialType: mars3d.MaterialType.CircleWave,
materialOptions: {
color: "#FAAC51",
@ -232,98 +268,32 @@ export default {
},
clampToTileset: true,
},
polyline: {
// lastMaterialType: "LineTrail",
width: 10,
// closure: true,
color: "#00F7AC",
outline: true,
outlineColor: "#008DF8",
outlineWidth: 5,
clampToGround: true,
// materialOptions: {
// color: "#008BFA",
// materialType: "LineTrail",
// speed: 0,
// },
// materialType: "LineTrail",
// },
},
// polyline: {
// // lastMaterialType: "LineTrail",
// width: 10,
// // closure: true,
// color: "#00F7AC",
// outline: true,
// outlineColor: "#008DF8",
// outlineWidth: 5,
// clampToGround: true,
// // materialOptions: {
// // color: "#008BFA",
// // materialType: "LineTrail",
// // speed: 0,
// // },
// // materialType: "LineTrail",
// // },
// },
});
this.graphicLayer.addGraphic(fixedRoute);
//绑定弹窗
// this.bindPopup(fixedRoute, res.data);
//开始漫游
fixedRoute.start();
// fixedRoute.start();
//打开弹窗
// fixedRoute.openPopup();
// const point = new mars3d.LngLatPoint(item.lon, item.lat, 0)
// car.addDynamicPosition(point, item.time)
// const graphic = new mars3d.graphic.DivGraphic({
// id: "car" + i,
// position: [120.590416, 31.275593],
// style: {
// className: `carIcon`,
// html: `<div>
// <div class="car-name">001号线_01_早送_守押001_苏E</div>
// </div>`,
// color: "#fff",
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// distanceDisplayCondition: true,
// clampToGround: true,
// },
// attr: {
// index: i,
// id: "car" + i,
// },
// });
// this.graphicLayer.addGraphic(graphic);
// // //绑定弹窗
// this.bindPopup(graphic);
// this.$nextTick(() => {
// graphic.openPopup();
// graphic.openHighlight(
// {
// className: `carIconActive`,
// },
// false
// );
// });
// }
// const circleGraphic = new mars3d.graphic.CircleEntity({
// id: `circle1`,
// position: new mars3d.LngLatPoint(120.590416, 31.275593),
// style: {
// radius: 150,
// materialType: mars3d.MaterialType.CircleWave,
// materialOptions: {
// color: "#FAAC51",
// count: 3,
// speed: 10,
// },
// },
// });
// this.graphicLayer.addGraphic(circleGraphic);
// this.map.flyToPoint([120.590416, 31.275593], {
// radius: 798.9,
// heading: 357.9,
// pitch: -31.6,
// });
// this.changePosition(0);
// 定时更新动态位置（setInterval为演示）
// const interval = 30;
// this.changePosition(interval);
// setInterval(() => {
// _this.changePosition(interval);
// }, interval * 1000);
},
bindPopup(fixedRoute, data) {
@ -373,25 +343,7 @@ export default {
// closeButton: false,
});
},
// 改变位置
changePosition(time) {
let _this = this;
this.graphicLayer.eachGraphic((graphic) => {
if (graphic.isPrivate) {
return;
}
graphic.addDynamicPosition(_this.randomPoint(), time); // 按time秒运动至指定位置
});
},
// 取区域内的随机点
randomPoint() {
const jd = this.random(120.5265 * 1000, 120.7177 * 1000) / 1000;
const wd = this.random(31.2783 * 1000, 31.4647 * 1000) / 1000;
return Cesium.Cartesian3.fromDegrees(jd, wd);
},
random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
},
chkShadows(val) {
let _this = this;
this.map.viewer.shadows = val;

Write Preview
Loading…
Cancel
Save