<template>
|
<div class="m-left-nav" :style="[navStyle]">
|
<!-- :style="[coutrolStyle]" -->
|
<div class="m-left-coutrol" @click="changeIconHide">
|
<i :class="icons"></i>
|
</div>
|
<ul>
|
<li
|
v-for="(item, index) in leftNavData"
|
:key="index"
|
@click="leftNavClick(item)"
|
>
|
<img :style="[imgStyle]" :src="item.img" alt="" />
|
<span>{{ item.label }}</span>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
export default {
|
name: "mobileLeftNav",
|
watch: {
|
iconHide() {
|
if (this.iconHide) {
|
this.icons = "el-icon-d-arrow-left";
|
this.navStyle.right = "-51px";
|
this.imgStyle.right = "6px";
|
} else {
|
this.icons = "el-icon-d-arrow-right";
|
this.navStyle.right = "0px";
|
this.imgStyle.right = "0";
|
}
|
},
|
},
|
computed: {
|
...mapGetters(["iconHide"]),
|
},
|
data() {
|
return {
|
icons: "el-icon-d-arrow-right",
|
navStyle: {
|
right: "0px",
|
},
|
imgStyle: {
|
right: "0",
|
},
|
// coutrolStyle: {
|
// position: " absolute",
|
// left: "-26px",
|
// top: "114px",
|
// right: "auto",
|
// width: "25px",
|
// height: "60px",
|
// backgroundColor: "#fff",
|
// borderRadius: "10px",
|
// display: "flex",
|
// alignItems: "center",
|
// justifyContent: "center",
|
// transition: "left 3s",
|
// },
|
leftNavData: [
|
{
|
flag: false,
|
label: "标签",
|
img: "/img/leftnav/tag.png",
|
normal: "/img/leftnav/tag.png",
|
checked: "/img/leftnav/tag-checked.png",
|
layer: "tagLayer",
|
},
|
{
|
flag: false,
|
label: "道路",
|
img: "/img/leftnav/way.png",
|
normal: "/img/leftnav/way.png",
|
checked: "/img/leftnav/way-checked.png",
|
layer: "wayLayer",
|
},
|
{
|
flag: false,
|
label: "实景",
|
img: "/img/leftnav/scene.png",
|
normal: "/img/leftnav/scene.png",
|
checked: "/img/leftnav/scene-checked.png",
|
layer: "sceneLayer",
|
},
|
{
|
flag: false,
|
label: "活动",
|
img: "/img/leftnav/activity.png",
|
normal: "/img/leftnav/activity.png",
|
checked: "/img/leftnav/activity-checked.png",
|
layer: "activityLayer",
|
},
|
{
|
flag: false,
|
label: "AED",
|
img: "/img/leftnav/aed.png",
|
normal: "/img/leftnav/aed.png",
|
checked: "/img/leftnav/aed-checked.png",
|
layer: "aedLayer",
|
},
|
{
|
flag: false,
|
label: "停车",
|
img: "/img/leftnav/park.png",
|
normal: "/img/leftnav/park.png",
|
checked: "/img/leftnav/park-checked.png",
|
layer: "parkLayer",
|
},
|
{
|
flag: false,
|
label: "出入",
|
img: "/img/leftnav/come.png",
|
normal: "/img/leftnav/come.png",
|
checked: "/img/leftnav/come-checked.png",
|
layer: "comeLayer",
|
},
|
],
|
viewer: null,
|
DC: null,
|
tagLayer: null,
|
wayLayer: null,
|
sceneLayer: null,
|
activityLayer: null,
|
aedLayer: null,
|
parkLayer: null,
|
comeLayer: null,
|
};
|
},
|
created() {
|
this.DC = global.DC;
|
},
|
mounted() {},
|
methods: {
|
changeIconHide() {
|
let isif = this.iconHide;
|
this.$store.commit("MSET_ICONHIDE", !isif);
|
},
|
generatePosition(num) {
|
const list = [];
|
for (let i = 0; i < num; i++) {
|
const lng = 121.0493 + Math.random() * 0.5;
|
const lat = 31.2583 + Math.random() * 0.5;
|
list.push(new this.DC.Position(lng, lat, 0));
|
}
|
return list;
|
},
|
leftNavClick(item) {
|
item.flag = !item.flag;
|
if (item.flag == true) {
|
item.img = item.checked;
|
this[item.layer].show = true;
|
} else {
|
item.img = item.normal;
|
this[item.layer].show = false;
|
}
|
this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
|
},
|
initialize(viewer) {
|
var that = this;
|
viewer.scene.globe.depthTestAgainstTerrain = false;
|
this.viewer = viewer;
|
this.tagLayer = new this.DC.HtmlLayer("tagLayer");
|
viewer.addLayer(this.tagLayer);
|
|
this.wayLayer = new this.DC.HtmlLayer("wayLayer");
|
viewer.addLayer(this.wayLayer);
|
|
this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
|
viewer.addLayer(this.sceneLayer);
|
|
this.activityLayer = new this.DC.VectorLayer("activityLayer");
|
viewer.addLayer(this.activityLayer);
|
|
this.aedLayer = new this.DC.VectorLayer("aedLayer");
|
viewer.addLayer(this.aedLayer);
|
|
this.parkLayer = new this.DC.HtmlLayer("parkLayer");
|
viewer.addLayer(this.parkLayer);
|
|
this.comeLayer = new this.DC.VectorLayer("comeLayer");
|
viewer.addLayer(this.comeLayer);
|
|
const positions1 = this.generatePosition(50);
|
// console.log(positions1);
|
positions1.forEach((item, index) => {
|
const divIcon = new this.DC.DivIcon(
|
item,
|
`
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
南门口
|
</div>
|
<div class="tag-angle-content">
|
<img src="https://map.hit.edu.cn/images/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
);
|
// e.overlay._position._lng,
|
// e.overlay._position._lat - 0.012,
|
//订阅事件1
|
divIcon.on(DC.MouseEventType.CLICK, (e) => {
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.overlay._position._lng, e.overlay._position._lat],
|
{ name: "标签" }
|
);
|
});
|
this.tagLayer.addOverlay(divIcon); //标签
|
});
|
|
const positions2 = this.generatePosition(50);
|
positions2.forEach((item, index) => {
|
const divIcon = new this.DC.DivIcon(
|
item,
|
`
|
<div class="way-entitys-box">
|
<div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
|
工建街
|
</div>
|
<div class="way-sign-box">
|
<img src="https://map.hit.edu.cn/images/roadsign3.png">
|
</div>
|
</div>
|
`
|
);
|
//订阅事件2
|
divIcon.on(DC.MouseEventType.CLICK, (e) => {
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.overlay._position._lng, e.overlay._position._lat],
|
{ name: "道路" }
|
);
|
});
|
this.wayLayer.addOverlay(divIcon); //道路
|
});
|
|
const positions3 = this.generatePosition(50);
|
positions3.forEach((item) => {
|
const billboard = new this.DC.Billboard(
|
item,
|
"/img/leftnav/map-panorama.png"
|
);
|
billboard.size = [16, 16];
|
//订阅事件3
|
billboard.on(DC.MouseEventType.CLICK, (e) => {
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.wgs84Position.lng, e.wgs84Position.lat],
|
{ name: "实景" }
|
);
|
});
|
this.sceneLayer.addOverlay(billboard); //实景
|
});
|
|
const positions10 = this.generatePosition(50);
|
positions10.forEach((item) => {
|
const label = new this.DC.Label(item, "活动");
|
label.setStyle({
|
fillColor: this.DC.Color.ORANGERED,
|
font: "10px sans-serif",
|
pixelOffset: { x: 0, y: -16 },
|
});
|
this.activityLayer.addOverlay(label);
|
|
const billboard = new this.DC.Billboard(
|
item,
|
"/img/leftnav/map-aed.png"
|
// "/img/leftnav/map-panorama.png"
|
);
|
billboard.size = [16, 16];
|
//订阅事件10
|
billboard.on(DC.MouseEventType.CLICK, (e) => {
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.wgs84Position.lng, e.wgs84Position.lat],
|
{ name: "活动" }
|
);
|
});
|
this.activityLayer.addOverlay(billboard); //活动
|
});
|
|
const positions4 = this.generatePosition(10);
|
positions4.forEach((item, index) => {
|
const label = new this.DC.Label(item, "建筑AED");
|
label.setStyle({
|
fillColor: this.DC.Color.ORANGERED,
|
font: "10px sans-serif",
|
pixelOffset: { x: 0, y: -16 },
|
});
|
this.aedLayer.addOverlay(label);
|
|
const billboard = new this.DC.Billboard(
|
item,
|
"/img/leftnav/map-aed.png"
|
);
|
billboard.size = [16, 16];
|
//订阅事件4
|
billboard.on(DC.MouseEventType.CLICK, (e) => {
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.wgs84Position.lng, e.wgs84Position.lat],
|
{ name: "建筑AED" }
|
);
|
});
|
this.aedLayer.addOverlay(billboard); //AED
|
});
|
|
const positions5 = this.generatePosition(120);
|
positions5.forEach((item, index) => {
|
const divIcon = new this.DC.DivIcon(
|
item,
|
`
|
<div class="park-entitys-box">
|
<div class="park-title" alt="校外街路侧停车场">
|
</div>
|
<div class="park-sign-box">
|
<div>
|
<img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
|
</div>
|
<div>
|
<img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
|
</div>
|
</div>
|
</div>
|
`
|
);
|
//订阅事件5
|
divIcon.on(DC.MouseEventType.CLICK, (e) => {
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.overlay._position._lng, e.overlay._position._lat],
|
{ name: "校外街路侧停车场" }
|
);
|
});
|
this.parkLayer.addOverlay(divIcon);
|
});
|
|
const positions6 = this.generatePosition(10);
|
positions6.forEach((item, index) => {
|
const label = new this.DC.Label(item, "123");
|
label.setStyle({
|
fillColor: this.DC.Color.PURPLE,
|
outlineColor: this.DC.Color.WHITE, // 边框颜色
|
outlineWidth: 2, // 边框大小，
|
font: "10px sans-serif",
|
pixelOffset: { x: 0, y: -16 },
|
});
|
this.comeLayer.addOverlay(label);
|
|
const billboard = new this.DC.Billboard(
|
item,
|
"/img/leftnav/map-activity.png"
|
);
|
billboard.size = [16, 16];
|
//订阅事件6
|
billboard.on(DC.MouseEventType.CLICK, (e) => {
|
// 定制化窗体
|
that.openPopupS(
|
e.position,
|
[e.wgs84Position.lng, e.wgs84Position.lat],
|
{ name: "123" }
|
);
|
});
|
this.comeLayer.addOverlay(billboard);
|
});
|
|
this.tagLayer.show = false;
|
this.wayLayer.show = false;
|
this.sceneLayer.show = false;
|
this.activityLayer.show = false;
|
this.aedLayer.show = false;
|
this.parkLayer.show = false;
|
this.comeLayer.show = false;
|
},
|
mobileOpenImgs1() {
|
let imgsDom = document.getElementById("mobileBigImgs");
|
imgsDom.click();
|
},
|
goOn1() {},
|
openPopupS(position, lntLat, query) {
|
let that = this;
|
// 定制化窗体
|
let d = {
|
position,
|
lntLat,
|
query: { ...(query || {}), position, lntLat },
|
useJWD: true, //仅使用经纬度
|
};
|
that.$store.dispatch("setMobileWindows", d);
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang='scss'>
|
.m-left-nav {
|
position: fixed;
|
bottom: 30px;
|
right: 0px;
|
z-index: 200;
|
background-color: #fff;
|
border-radius: 17px 0 0 17px;
|
transition: all 0.5s;
|
.m-left-coutrol {
|
position: absolute;
|
left: -24px;
|
top: 96px;
|
width: 25px;
|
height: 60px;
|
background-color: #fff;
|
border-radius: 17px 0 0 17px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
ul {
|
position: relative;
|
top: 3px;
|
}
|
li {
|
margin-bottom: 6px;
|
font-weight: 400;
|
display: block;
|
width: 80px;
|
height: 30px;
|
line-height: 30px;
|
background-color: #fff;
|
border-radius: 15px;
|
text-align: center;
|
font-size: 0;
|
cursor: pointer;
|
|
img {
|
position: relative;
|
transition: all 0.5s;
|
width: 24px;
|
height: 24px;
|
vertical-align: middle;
|
margin-right: 10px;
|
image-rendering: -moz-crisp-edges;
|
image-rendering: -o-crisp-edges;
|
image-rendering: -webkit-optimize-contrast;
|
image-rendering: crisp-edges;
|
-ms-interpolation-mode: nearest-neighbor;
|
}
|
|
span {
|
display: inline-block;
|
vertical-align: middle;
|
font-size: 14px;
|
color: #2f2f2f;
|
}
|
}
|
}
|
</style>
|
