Skip to content

H
holo-web
Commit b1343828 authored by ninglx's avatar ninglx
Browse files
Options

迁移mine map

parent 1a93e18f
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 75 deletions
wj-manage-web/public/index.html
View file @ b1343828
...@@ -139,6 +139,10 @@ ...@@ -139,6 +139,10 @@
top: 10px; top: 10px;
} }
.mapbox-ctrl-logo {
display: none !important;
}
.minemap-ctrl-logo { .minemap-ctrl-logo {
display: none !important; display: none !important;
} }
......
wj-manage-web/src/components/PathMap/mapComponent.vue
View file @ b1343828
...@@ -3,11 +3,13 @@ ...@@ -3,11 +3,13 @@
</template> </template>
<script> <script>
import {initWMap} from "@/utils/mapUtils";
let map; let map;
let vehicleModelTypes = {}, let vehicleModelTypes = {},
fullTrack = [], fullTrack = [],
dillPath = [], dillPath = [],
lastFrame = { carInfo: [] }; lastFrame = {carInfo: []};
import dict from "../../config/holo/dictionary"; import dict from "../../config/holo/dictionary";
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon // Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default { export default {
...@@ -32,11 +34,11 @@ export default { ...@@ -32,11 +34,11 @@ export default {
getClosestIndex(arr, targetTime) { getClosestIndex(arr, targetTime) {
let closestIndex = 0; let closestIndex = 0;
let closestDiff = Math.abs( let closestDiff = Math.abs(
targetTime - new Date(arr[0].frameTime).getTime() targetTime - new Date(arr[0].frameTime).getTime()
); );
for (let i = 1; i < arr.length; i++) { for (let i = 1; i < arr.length; i++) {
const diff = Math.abs( const diff = Math.abs(
targetTime - new Date(arr[i].frameTime).getTime() targetTime - new Date(arr[i].frameTime).getTime()
); );
if (diff < closestDiff) { if (diff < closestDiff) {
closestDiff = diff; closestDiff = diff;
...@@ -49,7 +51,7 @@ export default { ...@@ -49,7 +51,7 @@ export default {
// 定位到某一个时间 // 定位到某一个时间
timeTo(timestamp) { timeTo(timestamp) {
let realTimeStamp = let realTimeStamp =
new Date(fullTrack[0].frameTime).getTime() + timestamp; new Date(fullTrack[0].frameTime).getTime() + timestamp;
let index = this.getClosestIndex(fullTrack, realTimeStamp); let index = this.getClosestIndex(fullTrack, realTimeStamp);
dillPath = fullTrack.slice(index); dillPath = fullTrack.slice(index);
// this.continuePlay(); // this.continuePlay();
...@@ -87,56 +89,49 @@ export default { ...@@ -87,56 +89,49 @@ export default {
} }
}, },
initMap() { initMap() {
map = new mapboxgl.Map({ map = initWMap(this.mapId);
container: this.mapId,
style: map_config.MAP_STYLE,
center: map_config.MAP_CENTER,
zoom: map_config.MAP_ZOOM,
maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH,
});
map.on("style.load", () => { map.on("style.load", () => {
this.$emit("mapLoad", map); this.$emit("mapLoad", map);
map.addLayer({ // map.addLayer({
id: "vehicle3D", // id: "vehicle3D",
type: "custom", // type: "custom",
renderingMode: "3d", // renderingMode: "3d",
onAdd: (map, mbxContext) => { // onAdd: (map, mbxContext) => {
window.tb = new Threebox(map, mbxContext, { // window.tb = new Threebox(map, mbxContext, {
defaultLights: true, // defaultLights: true,
enableSelectingObjects: false, // enableSelectingObjects: false,
}); // });
let needDicts = ["CarType"]; // let needDicts = ["CarType"];
let queue = []; // let queue = [];
for (let item of needDicts) { // for (let item of needDicts) {
queue.push( // queue.push(
this.$store.dispatch("QUERY_DICT", { // this.$store.dispatch("QUERY_DICT", {
type: item, // type: item,
}) // })
); // );
} // }
Promise.all(queue).then(() => { // Promise.all(queue).then(() => {
for (let item of this.$store.state.dicts.CarType) { // for (let item of this.$store.state.dicts.CarType) {
let targetType = dict.carTypeGlbMap[item.code] || item.code; // let targetType = dict.carTypeGlbMap[item.code] || item.code;
let options = { // let options = {
obj: `gltf/car${targetType}.glb`, // obj: `gltf/car${targetType}.glb`,
type: "gltf", // type: "gltf",
units: "meters", // units: "meters",
scale: 0.8, // scale: 0.8,
adjustment: { x: 0.5, y: 1, z: -0.5 }, // adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: true, // bbox: true,
}; // };
window.tb.loadObj(options, (model) => { // window.tb.loadObj(options, (model) => {
vehicleModelTypes[`car${item.code}`] = model; // vehicleModelTypes[`car${item.code}`] = model;
this.vehicleModelTypeNumber += 1; // this.vehicleModelTypeNumber += 1;
}); // });
} // }
}); // });
}, // },
render: function (gl, matrix) { // render: function (gl, matrix) {
window.tb.update(); // window.tb.update();
}, // },
}); // });
}); });
return map; return map;
}, },
...@@ -167,8 +162,8 @@ export default { ...@@ -167,8 +162,8 @@ export default {
currentFrame = []; currentFrame = [];
for (let item of dillPath[0].carInfo) { for (let item of dillPath[0].carInfo) {
let currentCarType = item.extendAttribute.motorBehaviorType let currentCarType = item.extendAttribute.motorBehaviorType
.slice(0, item.extendAttribute.motorBehaviorType.length - 1) .slice(0, item.extendAttribute.motorBehaviorType.length - 1)
.split(","); .split(",");
let haveDup = this.hasDuplicate(this.filterType, currentCarType); let haveDup = this.hasDuplicate(this.filterType, currentCarType);
if (haveDup) { if (haveDup) {
currentFrame.push(item); currentFrame.push(item);
...@@ -180,12 +175,12 @@ export default { ...@@ -180,12 +175,12 @@ export default {
let timeDiff = 0; let timeDiff = 0;
if (!begin) { if (!begin) {
timeDiff = timeDiff =
new Date(dillPath[0].frameTime).getTime() - new Date(dillPath[0].frameTime).getTime() -
new Date(lastFrame.frameTime).getTime() > new Date(lastFrame.frameTime).getTime() >
1000 1000
? 100 ? 100
: new Date(dillPath[0].frameTime).getTime() - : new Date(dillPath[0].frameTime).getTime() -
new Date(lastFrame.frameTime).getTime(); new Date(lastFrame.frameTime).getTime();
} }
timeDiff = timeDiff / this.speed; timeDiff = timeDiff / this.speed;
lastFrame = Object.assign({}, dillPath[0], { lastFrame = Object.assign({}, dillPath[0], {
...@@ -195,7 +190,7 @@ export default { ...@@ -195,7 +190,7 @@ export default {
dillPath.shift(); dillPath.shift();
if (!dillPath.length) { if (!dillPath.length) {
window.tb.clear(null, true); window.tb.clear(null, true);
lastFrame = { carInfo: [] }; lastFrame = {carInfo: []};
dillPath = JSON.parse(JSON.stringify(fullTrack)); dillPath = JSON.parse(JSON.stringify(fullTrack));
} }
setTimeout(() => { setTimeout(() => {
...@@ -208,8 +203,8 @@ export default { ...@@ -208,8 +203,8 @@ export default {
setModel(model, options, timeDiff) { setModel(model, options, timeDiff) {
// 如果有目标车辆 则把目标车辆设置为红色 // 如果有目标车辆 则把目标车辆设置为红色
if ( if (
this.eventTargetVehicleGlobalId && this.eventTargetVehicleGlobalId &&
options.id == this.eventTargetVehicleGlobalId options.id == this.eventTargetVehicleGlobalId
) { ) {
model.traverse((child) => { model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) { if (child.isMesh && child.name.includes("_19")) {
...@@ -223,12 +218,12 @@ export default { ...@@ -223,12 +218,12 @@ export default {
} else { } else {
let timeDiffInterval = timeDiff / 4; let timeDiffInterval = timeDiff / 4;
let midPoint = turf.midpoint( let midPoint = turf.midpoint(
[model.userData.data.longitude, model.userData.data.latitude], [model.userData.data.longitude, model.userData.data.latitude],
[options.longitude, options.latitude] [options.longitude, options.latitude]
); );
let midBePoint = turf.midpoint( let midBePoint = turf.midpoint(
[model.userData.data.longitude, model.userData.data.latitude], [model.userData.data.longitude, model.userData.data.latitude],
midPoint.geometry.coordinates midPoint.geometry.coordinates
); );
let midAfPoint = turf.midpoint(midPoint.geometry.coordinates, [ let midAfPoint = turf.midpoint(midPoint.geometry.coordinates, [
options.longitude, options.longitude,
...@@ -250,8 +245,8 @@ export default { ...@@ -250,8 +245,8 @@ export default {
model.userData.data = options; model.userData.data = options;
// 闯红灯的非机动车高亮显示 // 闯红灯的非机动车高亮显示
if ( if (
options.eventType == 25 && options.eventType == 25 &&
(options.originalType == 5 || options.originalType == 6) (options.originalType == 5 || options.originalType == 6)
) { ) {
model.traverse((child) => { model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) { if (child.isMesh && child.name.includes("_19")) {
...@@ -260,7 +255,7 @@ export default { ...@@ -260,7 +255,7 @@ export default {
} }
}); });
} }
model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 }); model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
}, },
addDelUpdateVehicleModels(allData, timeDiff) { addDelUpdateVehicleModels(allData, timeDiff) {
...@@ -269,11 +264,11 @@ export default { ...@@ -269,11 +264,11 @@ export default {
// 新增 // 新增
if (item.dill === "add") { if (item.dill === "add") {
let model = let model =
vehicleModelTypes[`car${item.originalType}`].duplicate(); vehicleModelTypes[`car${item.originalType}`].duplicate();
// 如果有目标车辆 则把目标车辆设置为红色 // 如果有目标车辆 则把目标车辆设置为红色
if ( if (
this.eventTargetVehicleGlobalId && this.eventTargetVehicleGlobalId &&
item.id == this.eventTargetVehicleGlobalId item.id == this.eventTargetVehicleGlobalId
) { ) {
map?.setCenter([item.longitude, item.latitude]); map?.setCenter([item.longitude, item.latitude]);
model.traverse((child) => { model.traverse((child) => {
...@@ -285,7 +280,7 @@ export default { ...@@ -285,7 +280,7 @@ export default {
} }
model.setCoords([item.longitude, item.latitude]); model.setCoords([item.longitude, item.latitude]);
model.userData.data = item; model.userData.data = item;
model.setRotation({ x: 90, y: 360 - item.courseAngle - 90, z: 0 }); model.setRotation({x: 90, y: 360 - item.courseAngle - 90, z: 0});
window.tb.add(model, item.id); window.tb.add(model, item.id);
} }
if (item.dill === "del") { if (item.dill === "del") {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment