|
|
|
|
@ -0,0 +1,303 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
<div class="input-search" ref="targetElement">
|
|
|
|
|
<div class="search-box">
|
|
|
|
|
<input type="text" placeholder="请输入路线或者临时任务名称" />
|
|
|
|
|
<div class="search-btn" @click="show = !show">搜索</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-collapse-transition>
|
|
|
|
|
<div v-show="show" class="search-list">
|
|
|
|
|
<div class="list-item" v-for="(item, index) in 5" :key="index">
|
|
|
|
|
002号线_01_维护_守押085_苏E
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-collapse-transition>
|
|
|
|
|
</div>
|
|
|
|
|
<mars-map @mapLoad="mapLoad" :options="options"></mars-map>
|
|
|
|
|
<div class="multiple">
|
|
|
|
|
<div
|
|
|
|
|
@click="toggleSelection(item)"
|
|
|
|
|
:class="{ checkbox: true, checked: isSelected(item) }"
|
|
|
|
|
v-for="(item, index) in multipleList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
:src="
|
|
|
|
|
isSelected(item)
|
|
|
|
|
? require(`../assets/images/${item}-active.png`)
|
|
|
|
|
: require(`../assets/images/${item}.png`)
|
|
|
|
|
"
|
|
|
|
|
alt=""
|
|
|
|
|
class="btn-icon"
|
|
|
|
|
/>
|
|
|
|
|
{{ item }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import MarsMap from "@/components/mars-map";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
multipleList: ["营运线路", "维护线路", "临时任务"],
|
|
|
|
|
selectedItems: [],
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
show: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: { MarsMap },
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
// 在组件销毁之前移除事件监听，防止内存泄漏
|
|
|
|
|
document.removeEventListener("click", this.handleClickOutside);
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 在mounted钩子中添加全局点击事件监听
|
|
|
|
|
document.addEventListener("click", this.handleClickOutside);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleClickOutside(event) {
|
|
|
|
|
// 判断点击的元素是否在目标元素外部
|
|
|
|
|
if (this.show && !this.$refs.targetElement.contains(event.target)) {
|
|
|
|
|
this.show = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
toggleSelection(item) {
|
|
|
|
|
// 切换选中状态
|
|
|
|
|
if (this.isSelected(item)) {
|
|
|
|
|
this.selectedItems = this.selectedItems.filter(
|
|
|
|
|
(selectedItem) => selectedItem !== item
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
this.selectedItems.push(item);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
isSelected(item) {
|
|
|
|
|
// 检查某个项是否被选中
|
|
|
|
|
return this.selectedItems.includes(item);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mapLoad(map) {
|
|
|
|
|
this.map = map;
|
|
|
|
|
this.graphicLayer = new mars3d.layer.GraphicLayer();
|
|
|
|
|
map.addLayer(this.graphicLayer);
|
|
|
|
|
|
|
|
|
|
this.initTilesetLayer();
|
|
|
|
|
if (process.env.NODE_ENV === "production") this.initTilesetLayer();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 生成车辆实时点位
|
|
|
|
|
*/
|
|
|
|
|
createCar() {
|
|
|
|
|
let _this = this;
|
|
|
|
|
for (let i = 0; i < 10; i++) {
|
|
|
|
|
const graphic = new mars3d.graphic.DivGraphic({
|
|
|
|
|
style: {
|
|
|
|
|
html: `<div class="car-point">
|
|
|
|
|
<div>001号线_01_早送_守押001_苏E</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
// scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1),
|
|
|
|
|
|
|
|
|
|
scaleByDistance: true,
|
|
|
|
|
},
|
|
|
|
|
attr: { index: i, remark: "Billboard示例" },
|
|
|
|
|
});
|
|
|
|
|
this.graphicLayer.addGraphic(graphic);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.changePosition(0);
|
|
|
|
|
|
|
|
|
|
// 定时更新动态位置（setInterval为演示）
|
|
|
|
|
const interval = 30;
|
|
|
|
|
this.changePosition(interval);
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
_this.changePosition(interval);
|
|
|
|
|
}, interval * 1000);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 改变位置
|
|
|
|
|
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;
|
|
|
|
|
// 添加参考三维模型;
|
|
|
|
|
const 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);
|
|
|
|
|
|
|
|
|
|
if (process.env.NODE_ENV === "production") this.chkShadows(true);
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
.input-search {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 23px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
z-index: 50;
|
|
|
|
|
|
|
|
|
|
.search-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
|
|
|
|
.search-btn {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
background: #0084ff;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius: 0 3px 3px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 280px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border: 1px solid #0084ff;
|
|
|
|
|
border-right: 0;
|
|
|
|
|
background: #032b57;
|
|
|
|
|
padding-left: 6px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
input::placeholder {
|
|
|
|
|
color: #7c91a8;
|
|
|
|
|
}
|
|
|
|
|
input:focus-visible {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
.search-list {
|
|
|
|
|
width: 280px;
|
|
|
|
|
background: #032b57;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border: 1px solid #0084ff;
|
|
|
|
|
border-top: 0;
|
|
|
|
|
& > div {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
& > div:hover {
|
|
|
|
|
background: #0084ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.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>
|
