|
|
|
|
@ -28,6 +28,7 @@ import MarsMap from "@/components/mars-map";
|
|
|
|
|
import grids from "@/components/grids.vue";
|
|
|
|
|
import { getCarIdInfo } from "@/api/yunkun/index.js";
|
|
|
|
|
import { historyLine, getCarPoint, carMidle } from "@/api/yunkun/yunkun.js";
|
|
|
|
|
import mapOption from "./mapOption.js";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
@ -44,43 +45,8 @@ export default {
|
|
|
|
|
map: null,
|
|
|
|
|
mapLayer: {},
|
|
|
|
|
show3D: false,
|
|
|
|
|
options: {
|
|
|
|
|
scene: {
|
|
|
|
|
center: {
|
|
|
|
|
lat: 31.184348,
|
|
|
|
|
lng: 120.625126,
|
|
|
|
|
alt: 6764.6,
|
|
|
|
|
heading: 357.9,
|
|
|
|
|
pitch: -31.5,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
control: {
|
|
|
|
|
contextmenu: { preventDefault: false, hasDefault: false },
|
|
|
|
|
},
|
|
|
|
|
terrain: { show: false },
|
|
|
|
|
basemaps: [
|
|
|
|
|
{
|
|
|
|
|
name: "影像地图",
|
|
|
|
|
type: "xyz",
|
|
|
|
|
url: process.env.VUE_APP_BASE_API2 + "/{z}/{y}/{x}.png",
|
|
|
|
|
minimumLevel: 1,
|
|
|
|
|
maximumLevel: 16,
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// name: "mapbox影像图",
|
|
|
|
|
// icon: "img/basemaps/mapboxSatellite.png",
|
|
|
|
|
// type: "mapbox",
|
|
|
|
|
// username: "sharealex",
|
|
|
|
|
// styleId: "cly5i21fn00e901prgq643t4r",
|
|
|
|
|
// token:
|
|
|
|
|
// "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
|
|
|
|
|
// tilesize: 256,
|
|
|
|
|
// scaleFactor: false,
|
|
|
|
|
// show: false,
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
options: mapOption,
|
|
|
|
|
|
|
|
|
|
Line: [],
|
|
|
|
|
carUrl: basePathUrl + "static/qiche.gltf",
|
|
|
|
|
baimoUrl: process.env.VUE_APP_BASE_API3 + "/yunkun/tileset.json",
|
|
|
|
|
@ -120,7 +86,16 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
/**地图渲染完毕 */
|
|
|
|
|
mapLoad(map) {
|
|
|
|
|
map.set;
|
|
|
|
|
map.setSceneOptions({
|
|
|
|
|
center: {
|
|
|
|
|
lat: 31.184348,
|
|
|
|
|
lng: 120.625126,
|
|
|
|
|
alt: 6764.6,
|
|
|
|
|
heading: 357.9,
|
|
|
|
|
pitch: -31.5,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.map = map;
|
|
|
|
|
map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
|
|
|
|
|
// 创建矢量图层
|
|
|
|
|
@ -172,7 +147,7 @@ export default {
|
|
|
|
|
position: this.Line[0],
|
|
|
|
|
style: {
|
|
|
|
|
image: require("../assets/images/origin.png"),
|
|
|
|
|
scale: 1,
|
|
|
|
|
scale: window.innerWidth > 2500 ? 1.5 : 1,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
@ -220,8 +195,8 @@ export default {
|
|
|
|
|
model: {
|
|
|
|
|
show: true,
|
|
|
|
|
url: this.carUrl,
|
|
|
|
|
scale: 0.5,
|
|
|
|
|
minimumPixelSize: 32,
|
|
|
|
|
scale: window.innerWidth > 2500 ? 1 : 0.5,
|
|
|
|
|
minimumPixelSize: window.innerWidth > 2500 ? 65 : 32,
|
|
|
|
|
silhouette: true,
|
|
|
|
|
silhouetteColor: "#FFB200",
|
|
|
|
|
pitch: 0,
|
|
|
|
|
@ -256,11 +231,11 @@ export default {
|
|
|
|
|
|
|
|
|
|
const interval = 10;
|
|
|
|
|
this.changePosition(interval);
|
|
|
|
|
// if (process.env.NODE_ENV === "production") {
|
|
|
|
|
if (process.env.NODE_ENV === "production") {
|
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
|
this.changePosition(interval);
|
|
|
|
|
}, interval * 1000);
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async changePosition(interval) {
|
|
|
|
|
let list = await this.carPoint();
|
|
|
|
|
@ -338,7 +313,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
fixedRoute.bindPopup(html, {
|
|
|
|
|
className: "carPopup",
|
|
|
|
|
offsetX: 280,
|
|
|
|
|
offsetX: window.innerWidth > 2500 ? 400 : 280,
|
|
|
|
|
offsetY: 200,
|
|
|
|
|
// closeButton: false,
|
|
|
|
|
});
|
|
|
|
|
@ -436,7 +411,7 @@ export default {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
// line-height: 51px;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
@ -455,6 +430,7 @@ export default {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 40px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
// width: 880px;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
z-index: 100;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
@ -465,7 +441,7 @@ export default {
|
|
|
|
|
background: rgba(28, 31, 34, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 2001px) {
|
|
|
|
|
@media (min-width: 2500px) {
|
|
|
|
|
.albuginea {
|
|
|
|
|
top: unset;
|
|
|
|
|
bottom: 70px;
|
|
|
|
|
@ -482,6 +458,16 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
.container-top {
|
|
|
|
|
top: 238px;
|
|
|
|
|
|
|
|
|
|
& > div {
|
|
|
|
|
width: 340px !important;
|
|
|
|
|
img {
|
|
|
|
|
height: 80px !important;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
font-size: 80px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
