|
|
|
|
@ -0,0 +1,312 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
<div class="container-top">
|
|
|
|
|
<div class="next-stand">
|
|
|
|
|
<img src="../assets/images/next.png" alt="" />
|
|
|
|
|
<span>10.8</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="real-time">
|
|
|
|
|
<img src="../assets/images/realTime.png" alt="" />
|
|
|
|
|
<span>5.1</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<mars-map @mapLoad="mapLoad" :options="options"></mars-map>
|
|
|
|
|
<div class="video-list">
|
|
|
|
|
<grids></grids>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import MarsMap from "@/components/mars-map";
|
|
|
|
|
import grids from "@/components/grids.vue";
|
|
|
|
|
import { html } from "js-beautify";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
graphicLayer: null,
|
|
|
|
|
baseUrl: basePathUrl + "lib/geoJson/tileset.json",
|
|
|
|
|
map: null,
|
|
|
|
|
options: {
|
|
|
|
|
scene: {
|
|
|
|
|
center: {
|
|
|
|
|
lat: 31.212805,
|
|
|
|
|
lng: 120.607156,
|
|
|
|
|
alt: 5096.4,
|
|
|
|
|
heading: 357.9,
|
|
|
|
|
pitch: -31.5,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
basemaps: [
|
|
|
|
|
{
|
|
|
|
|
name: "mapbox影像图",
|
|
|
|
|
icon: "img/basemaps/mapboxSatellite.png",
|
|
|
|
|
type: "mapbox",
|
|
|
|
|
username: "sharealex",
|
|
|
|
|
styleId: "cly5i21fn00e901prgq643t4r",
|
|
|
|
|
token:
|
|
|
|
|
"pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
|
|
|
|
|
tilesize: 256,
|
|
|
|
|
scaleFactor: false,
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: { MarsMap, grids },
|
|
|
|
|
beforeDestroy() {},
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {
|
|
|
|
|
mapLoad(map) {
|
|
|
|
|
let _this = this;
|
|
|
|
|
this.map = map;
|
|
|
|
|
this.graphicLayer = new mars3d.layer.GraphicLayer();
|
|
|
|
|
map.addLayer(this.graphicLayer);
|
|
|
|
|
this.initTilesetLayer();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 生成车辆实时点位
|
|
|
|
|
*/
|
|
|
|
|
createCar() {
|
|
|
|
|
let _this = this;
|
|
|
|
|
for (let i = 0; i < 1; i++) {
|
|
|
|
|
const graphic = new mars3d.graphic.DivGraphic({
|
|
|
|
|
id: "car" + i,
|
|
|
|
|
position: [120.616912, 31.288775],
|
|
|
|
|
style: {
|
|
|
|
|
html: `<div class="car${i} car-point" style="background:url( ${require(`@/assets/images/car-active.png`)});background-size: 100% 100%;transform:scale(1.3)">
|
|
|
|
|
<div class="car-name">001号线_01_早送_守押001_苏E</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
distanceDisplayCondition: false,
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
offsetX: -105,
|
|
|
|
|
},
|
|
|
|
|
attr: {
|
|
|
|
|
index: i,
|
|
|
|
|
id: "car" + i,
|
|
|
|
|
},
|
|
|
|
|
popup: [
|
|
|
|
|
{
|
|
|
|
|
type: "html",
|
|
|
|
|
html: `<div class="diy-popup">弹窗</div>`,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
popupOptions: {
|
|
|
|
|
className: "carPopup",
|
|
|
|
|
offsetX: 300,
|
|
|
|
|
offsetY: -50,
|
|
|
|
|
closeButton: false,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
graphic.openPopup();
|
|
|
|
|
|
|
|
|
|
// graphic.on(mars3d.EventType.click, function (event) {
|
|
|
|
|
// _this.updateBg(event.target._id, "car-active");
|
|
|
|
|
// event.target.options.attr = {
|
|
|
|
|
// ...event.target.options.attr,
|
|
|
|
|
// ...{ highlight: true },
|
|
|
|
|
// };
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
this.graphicLayer.addGraphic(graphic);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const circleGraphic = new mars3d.graphic.CircleEntity({
|
|
|
|
|
id: `circle1`,
|
|
|
|
|
position: new mars3d.LngLatPoint(120.616912, 31.288775),
|
|
|
|
|
style: {
|
|
|
|
|
radius: 150,
|
|
|
|
|
materialType: mars3d.MaterialType.CircleWave,
|
|
|
|
|
materialOptions: {
|
|
|
|
|
color: "#FAAC51",
|
|
|
|
|
count: 2,
|
|
|
|
|
speed: 10,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.graphicLayer.addGraphic(circleGraphic);
|
|
|
|
|
|
|
|
|
|
this.map.flyToPoint([120.616912, 31.288775], {
|
|
|
|
|
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);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
updateBg(id, imageName) {
|
|
|
|
|
const className = document.getElementsByClassName(id)[0];
|
|
|
|
|
className.style.background = `url( ${require(`@/assets/images/${imageName}.png`)})`;
|
|
|
|
|
className.style.backgroundSize = "100% 100%";
|
|
|
|
|
if (imageName == "car-active") {
|
|
|
|
|
className.style.transform = "scale(1.2)";
|
|
|
|
|
} else {
|
|
|
|
|
className.style.transform = "";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 改变位置
|
|
|
|
|
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);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 加载姑苏区三维图层
|
|
|
|
|
*/
|
|
|
|
|
initTilesetLayer() {
|
|
|
|
|
let _this = this;
|
|
|
|
|
// 添加参考三维模型;
|
|
|
|
|
let tiles3dLayer = new mars3d.layer.TilesetLayer({
|
|
|
|
|
name: "姑苏区建筑物",
|
|
|
|
|
url: this.baseUrl,
|
|
|
|
|
maximumScreenSpaceError: 1,
|
|
|
|
|
style: {
|
|
|
|
|
color: {
|
|
|
|
|
conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.map.addLayer(tiles3dLayer);
|
|
|
|
|
tiles3dLayer.on(mars3d.EventType.load, function (event) {
|
|
|
|
|
_this.createCar();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
chkShadows(val) {
|
|
|
|
|
let _this = this;
|
|
|
|
|
this.map.viewer.shadows = val;
|
|
|
|
|
if (val) {
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
// 光照沿着相机方向
|
|
|
|
|
_this.map.scene.shadowMap._lightCamera = _this.map.scene.camera;
|
|
|
|
|
}, 1500);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.container-top {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 23px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
z-index: 50;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
.next-stand {
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
}
|
|
|
|
|
& > div {
|
|
|
|
|
width: 200px;
|
|
|
|
|
img {
|
|
|
|
|
height: 38px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
|
|
|
|
background: linear-gradient(270deg, #00e5ff 0%, #d8d8d8 100%);
|
|
|
|
|
/* 将背景限制在文字区域内 */
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
background-clip: text;
|
|
|
|
|
/* 设置文字颜色，会被背景图像遮住 */
|
|
|
|
|
color: transparent;
|
|
|
|
|
font-family: "DIN-Regular-2";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.video-list {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 25px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
z-index: 50;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 1px solid #415367;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
background: rgba(28, 31, 34, 0.6);
|
|
|
|
|
}
|
|
|
|
|
.multiple {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
z-index: 50;
|
|
|
|
|
width: 880px;
|
|
|
|
|
height: 80px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
background: url("../assets/images/multipleList.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 0 230px;
|
|
|
|
|
.checkbox {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
width: 112px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
background: linear-gradient(180deg, #072853 0%, #0079ff 100%);
|
|
|
|
|
// border-radius: 16px;
|
|
|
|
|
border: 1px solid #0084ff;
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.checked {
|
|
|
|
|
background: #fd873f;
|
|
|
|
|
color: #612500;
|
|
|
|
|
border: 0;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
border: 1px solid #f7c75d;
|
|
|
|
|
}
|
|
|
|
|
.btn-icon {
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
