@@ -26,7 +32,6 @@ export default {
data() {
const basePathUrl = window.basePathUrl || "";
return {
- list: [],
mileData: {
mile: "", //已经行驶多少里程
},
@@ -34,92 +39,101 @@ export default {
startTime: undefined,
endTime: undefined,
},
- graphicLayer: null,
- baseUrl: basePathUrl + "lib/geoJson/tileset.json",
map: null,
+ mapLayer: {},
+ show3D: false,
options: {
scene: {
center: {
- lat: 31.212805,
- lng: 120.607156,
- alt: 5096.4,
+ lat: 31.184348,
+ lng: 120.625126,
+ alt: 6764.6,
heading: 357.9,
pitch: -31.5,
},
},
control: {
- contextmenu: { preventDefault: false, hasDefault: false },
+ // contextmenu: { preventDefault: false, hasDefault: false },
},
- basemaps: [
- {
- name: "mapbox影像图",
- icon: "img/basemaps/mapboxSatellite.png",
- type: "mapbox",
- username: "sharealex",
- styleId: "cly5i21fn00e901prgq643t4r",
- token:
- "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
- tilesize: 256,
- scaleFactor: false,
- show: false,
- },
- ],
},
+ Line: [],
carUrl: basePathUrl + "lib/qiche.gltf",
};
},
components: { MarsMap, grids },
beforeDestroy() {},
- mounted() {
- const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true);
- this.queryParams = {
- carId: this.$route.query.carId,
- startTime: startOfDay,
- endTime: endOfDay,
- };
- this.getCarMidle();
- },
+ created() {},
methods: {
+ /**地图渲染完毕 */
mapLoad(map) {
this.map = map;
- this.graphicLayer = new mars3d.layer.GraphicLayer();
- map.addLayer(this.graphicLayer);
-
- // this.initTilesetLayer();
- this.getCarHistoryLine();
- },
+ map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
+ // 创建矢量图层
+ this.mapLayer.Line = new mars3d.layer.GraphicLayer();
+ this.map.addLayer(this.mapLayer.Line);
- /**根据车辆的id获取车辆的历史轨迹 */
- async getCarHistoryLine() {
- let result = await historyLine(this.queryParams);
- result.list.map((item) => {
- this.list.push([parseFloat(item.lng), parseFloat(item.lat)]);
- });
+ this.mapLayer.car = new mars3d.layer.GraphicLayer();
+ this.map.addLayer(this.mapLayer.car);
- this.historyLine();
- this.createCar(result.countData.avg_speed);
+ this.createLine();
+ this.createCar();
},
-
- historyLine() {
- const firstPoint = this.list[0];
-
- const divGraphic = new mars3d.graphic.DivGraphic({
- position: firstPoint,
+ /**
+ * 加载姑苏区三维图层
+ */
+ initTilesetLayer() {
+ if (this.map) {
+ if (!this.mapLayer.tiles3dLayer) {
+ this.mapLayer.tiles3dLayer = new mars3d.layer.TilesetLayer({
+ name: "姑苏区建筑物",
+ url: "https://www.jichuanglanhai.com:88/3dtiles/yunkun/tileset.json",
+ maximumScreenSpaceError: 16,
+ maximumMemoryUsage: 1024 / 2,
+ dynamicScreenSpaceError: false,
+ skipLevelOfDetail: true,
+ preferLeaves: true,
+ flyTo: false,
+ style: {
+ color: {
+ conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
+ },
+ },
+ });
+ this.map.addLayer(this.mapLayer.tiles3dLayer);
+ this.show3D = true;
+ } else {
+ this.mapLayer.tiles3dLayer.show = !this.mapLayer.tiles3dLayer.show;
+ this.show3D = !this.show3D;
+ }
+ } else {
+ }
+ },
+ // 绘制历史轨迹线 -- 起点坐标
+ createLine() {
+ this.Line = [
+ [120.60011, 31.26247],
+ [120.599811, 31.267667],
+ [120.599341, 31.27582],
+ [120.59705, 31.278812],
+ [120.599466, 31.279271],
+ [120.61856, 31.28155],
+ [120.642973, 31.284112],
+ ];
+ const marker = new mars3d.graphic.BillboardEntity({
+ position: this.Line[0],
style: {
- html: `
`,
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
+ image: require("../assets/images/origin.png"),
+ scale: 1,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- distanceDisplayCondition: true,
clampToGround: true,
- visibleDepth: true,
+ pixelOffsetY: 5,
},
});
- this.graphicLayer.addGraphic(divGraphic);
+ this.mapLayer.Line.addGraphic(marker);
- const graphic = new mars3d.graphic.PolylineEntity({
- positions: this.list,
+ const line = new mars3d.graphic.PolylineEntity({
+ positions: this.Line,
style: {
width: 10,
color: "#00F7AC",
@@ -129,173 +143,66 @@ export default {
clampToGround: true,
},
});
- this.graphicLayer.addGraphic(graphic);
- },
-
- /**获取车辆天里程 */
- async getCarMidle() {
- const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted();
- let result = await carMidle({
- carId: this.queryParams.carId,
- startDate: startOfDay,
- endDate: endOfDay,
- });
- this.mileData.mile = result.mile;
- },
-
- getStartAndEndOfDayFormatted(boole) {
- const now = new Date();
- const startOfDay = new Date(
- now.getFullYear(),
- now.getMonth(),
- now.getDate(),
- 0,
- 0,
- 0
- );
- const endOfDay = new Date(
- now.getFullYear(),
- now.getMonth(),
- now.getDate(),
- 23,
- 59,
- 59,
- 999
- );
-
- return {
- startOfDay: this.formatDate(startOfDay, boole),
- endOfDay: this.formatDate(endOfDay, boole),
- };
- },
-
- formatDate(date, boole) {
- const year = date.getFullYear();
- const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以要加1
- const day = String(date.getDate()).padStart(2, "0");
- const hours = String(date.getHours()).padStart(2, "0");
- const minutes = String(date.getMinutes()).padStart(2, "0");
- const seconds = String(date.getSeconds()).padStart(2, "0");
+ this.mapLayer.Line.addGraphic(line);
- if (boole) {
- return `${year}${month}${day}${hours}${minutes}${seconds}`;
- } else {
- return `${year}${month}${day}`;
- }
+ // 创建起始点坐标
},
- /**
- * 加载姑苏区三维图层
- */
- initTilesetLayer() {
- let _this = this;
- // 添加参考三维模型;
- let tiles3dLayer = new mars3d.layer.TilesetLayer({
- name: "姑苏区建筑物",
- url: "https://www.jichuanglanhai.com:88/3dtiles/yunkun/tileset.json",
- maximumScreenSpaceError: 16,
- maximumMemoryUsage: 1024 / 2,
- dynamicScreenSpaceError: false,
- skipLevelOfDetail: true,
- preferLeaves: true,
- flyTo: false,
- style: {
- color: {
- conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
- },
- },
- });
- this.map.addLayer(tiles3dLayer);
- tiles3dLayer.on(mars3d.EventType.load, function (event) {
- _this.createCar();
- });
- },
- /**
- * 生成车辆实时点位
- */
- 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: avg_speed, //平均速度值
- positions: [lastPoint],
- camera: {
- type: "gs",
- heading: 90,
- radius: 500,
- },
+ //创建实时车辆漫游
+ async createCar() {
+ const lastPoint = this.Line[this.Line.length - 1];
+ const car = new mars3d.graphic.FixedRoute({
+ name: "漫游对象",
+ speed: 45,
+ positions: [
+ lastPoint,
+ [120.6554, 31.285252, 13.6],
+ [120.654003, 31.298916, 10.8],
+ [120.649845, 31.299078, 14.2],
+ [120.647362, 31.308061, 17.4],
+ [120.645631, 31.314448, 16.1],
+ [120.638285, 31.312808, 10],
+ ],
+ // camera: {
+ // type: "gs",
+ // heading: 0,
+ // radius: 3000,
+ // },
model: {
show: true,
- url: _this.carUrl,
- scale: 0.3,
- minimumPixelSize: 55,
+ url: this.carUrl,
+ scale: 0.5,
+ minimumPixelSize: 30,
silhouette: true,
- silhouetteColor: "#fff",
- silhouetteSize: 1,
- silhouetteAlpha: 0.19,
- clampToGround: true,
+ silhouetteColor: "#FFB200",
},
- // billboard: {
- // image: require("../assets/images/car-active.png"),
- // width: 210,
- // height: 100,
-
- // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
- // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- // distanceDisplayCondition: true,
- // clampToGround: true,
- // visibleDepth: true,
- // label: {
- // text: "001号线_01_早送_守押001_苏E",
- // color: "#fff",
- // font_size: 13,
- // pixelOffsetY: -81,
- // pixelOffsetX: 10,
- // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
- // distanceDisplayCondition: true,
- // visibleDepth: false,
- // },
- // },
circle: {
- radius: 500,
+ radius: 200,
materialType: mars3d.MaterialType.CircleWave,
materialOptions: {
- color: "#FAAC51",
+ color: "#FFB200",
count: 2,
- speed: 10,
+ speed: 6,
},
- 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: {
+ width: 10,
+ color: "#00F7AC",
+ outline: true,
+ outlineColor: "#008DF8",
+ outlineWidth: 5,
+ clampToGround: true,
+ },
});
- this.graphicLayer.addGraphic(fixedRoute);
- //绑定弹窗
- // this.bindPopup(fixedRoute, res.data);
- //开始漫游
- // fixedRoute.start();
- //打开弹窗
- // fixedRoute.openPopup();
- // // //绑定弹窗
+ this.mapLayer.car.addGraphic(car);
+ let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8");
+
+ this.bindPopup(car, res.data);
+ car.openPopup();
+ car.start();
},
+ // 车辆弹窗
bindPopup(fixedRoute, data) {
const userList = data.userList.map((item) => {
return `
})
+ ${item.name}
+ 
- 10.8
+ 0
- {{ mileData.mile }}
+ {{ mileData.mile ? ileData.mile : 0 }}