<template>
|
<div class="left-nav">
|
<ul>
|
<li v-for="(item, index) in leftNavData" :key="index" @click="leftNavClick(item)">
|
<img :src="item.img" alt />
|
<span>{{ item.label }}</span>
|
</li>
|
|
<!-- img在下面这个标签中 -->
|
<!-- <img :style="[imgStyle]" :src="item.img" alt="" /> -->
|
<!-- <li class="addIcons" @click="addIcons">
|
<span>+</span>
|
</li>-->
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getLifeList,
|
// eslint-disable-next-line no-unused-vars
|
getMonitorList,
|
getSceneList,
|
getWayList,
|
getTagList
|
} from '@/api/pc/leftNav/index'
|
import { mapGetters } from 'vuex'
|
|
const LeftNavLayer = {
|
leftTagLayer: null,
|
leftWayLayer: null,
|
leftSceneLayer: null,
|
leftMonitorLayer: null,
|
leftActivityLayer: null,
|
leftAedLayer: null,
|
leftParkLayer: null,
|
leftComeLayer: null
|
}
|
|
import Feature from 'ol/Feature.js'
|
import Point from 'ol/geom/Point.js'
|
import { Icon, Style, Fill, Text, Stroke } from 'ol/style.js'
|
|
export default {
|
name: 'leftNav',
|
computed: {
|
...mapGetters([
|
'closeMapClick', // 关闭地图点击，防止新增标签误触
|
'addIconsLayerIconPopup', // 传送关闭编辑窗口，刷新标签数据
|
'calenderShow',
|
'twoOrThree'
|
])
|
},
|
data () {
|
return {
|
leftNavData: [
|
{
|
flag: true,
|
label: '标签',
|
img: '/changjing/img/leftnav/tag-checked.png',
|
normal: '/changjing/img/leftnav/tag.png',
|
checked: '/changjing/img/leftnav/tag-checked.png',
|
layer: 'leftNavBQ'
|
},
|
{
|
flag: false,
|
label: '道路',
|
img: '/changjing/img/leftnav/way.png',
|
normal: '/changjing/img/leftnav/way.png',
|
checked: '/changjing/img/leftnav/way-checked.png',
|
layer: 'leftNavDL'
|
},
|
{
|
flag: false,
|
label: '实景',
|
img: '/changjing/img/leftnav/scene.png',
|
normal: '/changjing/img/leftnav/scene.png',
|
checked: '/changjing/img/leftnav/scene-checked.png',
|
layer: 'leftNavSJ'
|
},
|
// {
|
// flag: false,
|
// label: '监控',
|
// img: '/changjing/img/leftnav/monitor.png',
|
// normal: '/changjing/img/leftnav/monitor.png',
|
// checked: '/changjing/img/leftnav/monitor-checked.png',
|
// layer: 'leftMonitorLayer'
|
// },
|
// {
|
// flag: false,
|
// label: '活动',
|
// img: '/changjing/img/leftnav/activity.png',
|
// normal: '/changjing/img/leftnav/activity.png',
|
// checked: '/changjing/img/leftnav/activity-checked.png',
|
// layer: 'leftNavHD'
|
// },
|
// {
|
// flag: false,
|
// label: 'AED',
|
// img: '/changjing/img/leftnav/aed.png',
|
// normal: '/changjing/img/leftnav/aed.png',
|
// checked: '/changjing/img/leftnav/aed-checked.png',
|
// layer: 'leftAedLayer'
|
// },
|
{
|
flag: false,
|
label: '停车',
|
img: '/changjing/img/leftnav/park.png',
|
normal: '/changjing/img/leftnav/park.png',
|
checked: '/changjing/img/leftnav/park-checked.png',
|
layer: 'leftNavTC'
|
},
|
{
|
flag: true,
|
label: '出入',
|
img: '/changjing/img/leftnav/come-checked.png',
|
normal: '/changjing/img/leftnav/come.png',
|
checked: '/changjing/img/leftnav/come-checked.png',
|
layer: 'leftNavCR'
|
}
|
],
|
map2D: this.$store.state.openlayerData.openlayers.map2D,
|
leftNavBQ: this.$store.state.openlayerData.openlayers.leftNavBQ,
|
leftNavDL: this.$store.state.openlayerData.openlayers.leftNavDL,
|
leftNavSJ: this.$store.state.openlayerData.openlayers.leftNavSJ,
|
leftNavHD: this.$store.state.openlayerData.openlayers.leftNavHD,
|
leftNavTC: this.$store.state.openlayerData.openlayers.leftNavTC,
|
leftNavCR: this.$store.state.openlayerData.openlayers.leftNavCR
|
}
|
},
|
created () {
|
this.map2D.addLayer(this.leftNavBQ)
|
this.map2D.addLayer(this.leftNavDL)
|
this.map2D.addLayer(this.leftNavSJ)
|
this.map2D.addLayer(this.leftNavHD)
|
this.map2D.addLayer(this.leftNavTC)
|
this.map2D.addLayer(this.leftNavCR)
|
},
|
mounted () {
|
const that = this
|
|
// 初始化新增标签图层
|
that.$EventBus.$on('closeTagLayer', () => {
|
|
|
that.leftNavData.forEach(item => {
|
if (item.layer && item.flag == true) {
|
item.flag = false
|
item.img = item.normal
|
|
that[item.layer].setVisible(false)
|
}
|
})
|
})
|
},
|
|
watch: {
|
calenderShow: {
|
handler (newData, oldData) {
|
if (newData == false) {
|
this.leftNavData.forEach(item => {
|
if (item.label == '活动') {
|
item.flag = false
|
item.img = item.normal
|
}
|
})
|
}
|
},
|
immediate: true
|
},
|
|
twoOrThree: {
|
handler (newData, oldData) {
|
if (newData == '三 维') {
|
for (const key in LeftNavLayer) {
|
if (LeftNavLayer[key] != null) {
|
LeftNavLayer[key].eachOverlay((item) => {
|
if (item.attr.params.x && item.attr.params.x != '') {
|
const position = this.coordinate(item.attr.params.x)
|
item.position = new global.DC.Position(
|
Number(position.lng),
|
Number(position.lat),
|
0
|
)
|
} else {
|
item.position = new global.DC.Position(
|
Number(item.position.lng),
|
Number(item.position.lat),
|
0
|
)
|
}
|
})
|
}
|
}
|
} else {
|
for (const key in LeftNavLayer) {
|
if (LeftNavLayer[key] != null) {
|
LeftNavLayer[key].eachOverlay((item) => {
|
item.position = new global.DC.Position(
|
Number(item.attr.params.jd),
|
Number(item.attr.params.wd),
|
50
|
)
|
})
|
}
|
}
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
coordinate (item) {
|
const arr = item.split(',')
|
|
return {
|
lng: arr[0],
|
lat: arr[1]
|
}
|
},
|
|
addIcons () {
|
if (this.closeMapClick) {
|
// 若正在加标签，退出
|
return
|
}
|
// 加标签
|
this.$store.dispatch('chouseAddIconsLayerIcon', {
|
// 新增标签 选定位置
|
viewer: global.viewer,
|
fn: (lnglat) => {
|
// 返回选定坐标
|
// 添加空白标签
|
this.$store.dispatch('addIconsLayerIcon', {
|
lnglat: lnglat,
|
viewer: global.viewer
|
})
|
}
|
})
|
},
|
|
generatePosition (num) {
|
const list = []
|
for (let i = 0; i < num; i++) {
|
const lng = 115.86271917 + Math.random() * 0.01
|
const lat = 28.73615593 + Math.random() * 0.02
|
list.push(new global.DC.Position(lng, lat, 0))
|
}
|
return list
|
},
|
|
leftNavClick (item) {
|
item.flag = !item.flag
|
if (item.flag == true) {
|
item.img = item.checked
|
} else {
|
item.img = item.normal
|
}
|
|
if (item.label == '活动') {
|
this.$store.commit('SET_CALENDERSHOW', item.flag)
|
} else {
|
if (item.flag == true) {
|
this[item.layer].setVisible(true)
|
} else {
|
this[item.layer].setVisible(false)
|
}
|
}
|
},
|
|
initialize (campus) {
|
var that = this
|
|
that.$nextTick(() => {
|
this.leftNavData = this.leftNavData.map(item => {
|
return {
|
...item,
|
flag: false,
|
img: item.normal
|
}
|
})
|
|
this.leftNavData[0].flag = true
|
this.leftNavData[0].img = this.leftNavData[0].checked
|
this.leftNavData[4].flag = true
|
this.leftNavData[4].img = this.leftNavData[4].checked
|
|
this.leftNavBQ.setVisible(true)
|
this.leftNavCR.setVisible(true)
|
|
that.leftNavBQ.getSource().clear()
|
that.leftNavDL.getSource().clear()
|
that.leftNavSJ.getSource().clear()
|
that.leftNavHD.getSource().clear()
|
that.leftNavTC.getSource().clear()
|
that.leftNavCR.getSource().clear()
|
|
getTagList({ campus }).then((res) => {
|
res.data.data.forEach((item, index) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
let siteJd = null
|
let siteWd = null
|
|
if (this.twoOrThree == '三 维') {
|
siteJd = obj.lng
|
siteWd = obj.lat
|
} else {
|
siteJd = item.jd
|
siteWd = item.wd
|
}
|
|
that.leftNavBQ.getSource().addFeature(that.getCurItemFeature({
|
lng: siteJd,
|
lat: siteWd,
|
item,
|
text: item.mechanismname,
|
url: '/changjing/img/icon/tarrow_xq.png',
|
bgFill: '#cc0000',
|
anchor: [0, -10],
|
event: (e) => {
|
if (that.closeMapClick) {
|
return
|
}
|
|
that.openPopups({
|
lng: Number(siteJd),
|
lat: Number(siteWd),
|
item: e.target.values_.attributes,
|
e
|
})
|
}
|
}))
|
})
|
})
|
|
getWayList({ campus }).then((res) => {
|
res.data.data.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
let siteJd = null
|
let siteWd = null
|
|
if (this.twoOrThree == '三 维') {
|
siteJd = obj.lng
|
siteWd = obj.lat
|
} else {
|
siteJd = item.jd
|
siteWd = item.wd
|
}
|
|
that.leftNavDL.getSource().addFeature(that.getCurItemFeature({
|
lng: siteJd,
|
lat: siteWd,
|
item,
|
text: item.roadname,
|
url: '/changjing/img/icon/roadsign3.png',
|
bgFill: '#0066FF',
|
anchor: [8, 34]
|
}))
|
|
that.leftNavDL.setVisible(false)
|
})
|
})
|
|
// getMonitorList().then((res) => {
|
// res.data.data.records.forEach((item) => {
|
// let obj = {}
|
// if (item.x && item.x != '') {
|
// const position = that.coordinate(item.x)
|
// obj = {
|
// lng: position.lng, lat: position.lat
|
// }
|
// } else {
|
// obj = {
|
// lng: item.jd, lat: item.wd
|
// }
|
// }
|
|
// let siteJd = null
|
// let siteWd = null
|
|
// if (this.twoOrThree == '三 维') {
|
// siteJd = obj.lng
|
// siteWd = obj.lat
|
// } else {
|
// siteJd = item.jd
|
// siteWd = item.wd
|
// }
|
|
// that.leftNavSJ.getSource().addFeature(that.getCurItemFeature({
|
// lng: siteJd,
|
// lat: siteWd,
|
// item,
|
// text: item.vrname,
|
// url: '/changjing/img/leftnav/map-monitor.png',
|
// bgFill: '#0066FF',
|
// anchor: [8, 34]
|
// }))
|
|
// that.leftNavSJ.setVisible(false)
|
// })
|
// })
|
|
getSceneList({ campus }).then((res) => {
|
res.data.data.records.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
let siteJd = null
|
let siteWd = null
|
|
if (this.twoOrThree == '三 维') {
|
siteJd = obj.lng
|
siteWd = obj.lat
|
} else {
|
siteJd = item.jd
|
siteWd = item.wd
|
}
|
|
that.leftNavSJ.getSource().addFeature(that.getCurItemFeature({
|
scale: 0.6,
|
imgSize: [48, 48],
|
lng: siteJd,
|
lat: siteWd,
|
item,
|
text: item.vrname,
|
url: '/changjing/img/leftnav/map-panorama.png',
|
bgFill: '#0066ff00',
|
anchor: [24, 54],
|
strokeColor: '#0066FF',
|
event: (e) => {
|
that.$store.commit('SET_DETAILSPOPUP', false)
|
that.$store.commit('SET_MONITORPOPUP', false)
|
|
that.$store.commit(
|
'SET_STATENAME',
|
e.target.values_.attributes.vrname
|
)
|
that.$store.commit(
|
'SET_PANORAMAURL',
|
e.target.values_.attributes.vrurl
|
)
|
|
that.openPopups({
|
type: 'scene',
|
lng: Number(siteJd),
|
lat: Number(siteWd),
|
item: e.target.values_.attributes,
|
e
|
})
|
}
|
}))
|
|
that.leftNavSJ.setVisible(false)
|
})
|
})
|
|
getLifeList({ lifetype: 11, campus }).then((res) => {
|
res.data.data.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
let siteJd = null
|
let siteWd = null
|
|
if (this.twoOrThree == '三 维') {
|
siteJd = obj.lng
|
siteWd = obj.lat
|
} else {
|
siteJd = item.jd
|
siteWd = item.wd
|
}
|
|
that.leftNavTC.getSource().addFeature(that.getCurItemFeature({
|
imgSize: [22, 22],
|
lng: siteJd,
|
lat: siteWd,
|
item,
|
text: item.mechanismname,
|
url: '/changjing/img/icon/p-biao.png',
|
bgFill: '#0066ff00',
|
anchor: [11, 36],
|
strokeColor: '#0066FF'
|
}))
|
|
that.leftNavTC.setVisible(false)
|
})
|
})
|
|
getLifeList({ lifetype: 12, campus }).then((res) => {
|
res.data.data.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
let siteJd = null
|
let siteWd = null
|
|
if (this.twoOrThree == '三 维') {
|
siteJd = obj.lng
|
siteWd = obj.lat
|
} else {
|
siteJd = item.jd
|
siteWd = item.wd
|
}
|
|
that.leftNavCR.getSource().addFeature(that.getCurItemFeature({
|
imgSize: [44, 44],
|
lng: siteJd,
|
lat: siteWd,
|
item,
|
text: item.mechanismname,
|
url: '/changjing/img/leftnav/map-activity.png',
|
bgFill: '#0066ff00',
|
anchor: [16, 34],
|
strokeColor: '#A635A6'
|
}))
|
})
|
})
|
})
|
},
|
|
getCurItemFeature (params) {
|
const iconFeature = new Feature({
|
geometry: new Point([Number(params.lng), Number(params.lat)]),
|
attributes: params.item,
|
type: 'point'
|
})
|
|
var textElement = document.createElement('span')
|
textElement.innerHTML = params.text
|
|
iconFeature.setStyle(new Style({
|
cursor: 'pointer',
|
|
image: new Icon({
|
scale: params.scale || 1,
|
imgSize: params.imgSize || [30, 30],
|
src: params.url,
|
// 设置图标偏移
|
anchor: params.anchor,
|
// X方向单位：分数
|
anchorXUnits: 'pixels',
|
// Y方向单位：像素
|
anchorYUnits: 'pixels'
|
}),
|
text: new Text({
|
// 对齐方式
|
textAlign: 'center',
|
// 文本基线
|
textBaseline: 'middle',
|
text: textElement.innerHTML,
|
font: '14px Arial',
|
fill: new Fill({
|
color: 'white'
|
}),
|
// 填充背景
|
backgroundFill: new Fill({
|
color: params.bgFill
|
}),
|
padding: [2, 5, 2, 5],
|
stroke: new Stroke({ color: params.strokeColor || '#00000000', width: 1 })
|
})
|
}))
|
|
let iconFeatureEvent
|
|
if (params.event) {
|
iconFeatureEvent = params.event
|
} else {
|
iconFeatureEvent = (e) => { }
|
}
|
|
iconFeature.on('click', iconFeatureEvent)
|
|
return iconFeature
|
},
|
|
openPopups (value) {
|
this.map2D.getView().setCenter([value.lng, value.lat])
|
|
if (value.type == 'scene') {
|
this.$EventBus.$emit('openSceneInfoWindowHtml', value)
|
this.$store.commit('SET_PANORAMAPOPUP', true)
|
} else {
|
this.$store.dispatch('setOurDataInPoput', value)
|
this.$EventBus.$emit('openInfoWindowHtml', value)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.left-nav {
|
position: fixed;
|
top: 160px;
|
right: 30px;
|
// bottom: 20px;
|
// left: 0;
|
z-index: 1;
|
|
ul {
|
|
// display: flex;
|
li {
|
// margin: 0 8px;
|
margin-bottom: 12px;
|
font-weight: 400;
|
display: block;
|
width: 98px;
|
height: 33px;
|
line-height: 33px;
|
background-color: #fff;
|
border-radius: 17px;
|
text-align: center;
|
font-size: 0;
|
cursor: pointer;
|
|
img {
|
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;
|
}
|
}
|
}
|
}
|
|
.addIcons {
|
position: absolute;
|
top: 0;
|
left: -60px;
|
width: 50px !important;
|
|
span {
|
font-size: 25px !important;
|
}
|
}
|
|
.avtiveAddIcons {
|
background-color: aqua;
|
}
|
</style>
|
