<template>
|
<public-box class="tool-sign">
|
<template slot="public-box-header">
|
<div class="title">
|
<img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
|
<span>地图标记</span>
|
</div>
|
<img class="btn-box deblurring" @click.stop="addSign" src="/img/navicon/add.png" alt />
|
<img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" />
|
</template>
|
<template slot="public-box-content">
|
<div class="list-box" v-loading="loading">
|
<ul v-show="signShow">
|
<li v-for="(item, index) in signList" :key="index" @click="dingw(item)">
|
<img src="/img/icon/sign-list.png" alt />
|
{{ item.name }}
|
<el-button
|
type="danger"
|
size="mini"
|
icon="el-icon-delete"
|
circle
|
@click.stop="deleteIcon(item.id)"
|
></el-button>
|
</li>
|
</ul>
|
<div v-show="!signShow" class="no-data">
|
<img src="/img/icon/no-data.png" alt />
|
<div>暂无数据</div>
|
</div>
|
</div>
|
</template>
|
</public-box>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import { getlabel, deletelabel } from '@/api/pc/label'
|
|
export default {
|
data () {
|
return {
|
loading: true,
|
signList: [],
|
signShow: true,
|
destroyedFlag: true
|
}
|
},
|
computed: {
|
...mapGetters(['addSignList'])
|
},
|
mounted () {
|
this.$store.commit('initLabelLayer', global.viewer)
|
this.getData()
|
},
|
watch: {
|
addSignList () {
|
this.getData()
|
}
|
},
|
methods: {
|
dingw (item) {
|
// console.log(item);
|
// this.$store.dispatch("mapFlyTo", {
|
// lntLat: [item.jd, item.wd, 120], //114.04020791, 27.62934732
|
// heading: 0,
|
// pitch: -90,
|
// roll: 0,
|
// noOpen: true,
|
// mviewer: that.viewer,
|
// });
|
global.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
item.jd,
|
item.wd,
|
950.0
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
},
|
deleteIcon (id) {
|
const that = this
|
deletelabel(id).then((res) => {
|
console.log(res)
|
if (res.data.code == 200) {
|
that.$message({
|
message: '删除标签成功',
|
type: 'success'
|
})
|
} else {
|
that.$message({
|
message: '删除标签失败',
|
type: 'warning'
|
})
|
}
|
that.getData()
|
})
|
},
|
getData () {
|
const that = this
|
that.loading = true
|
const oks = setTimeout(() => {
|
that.loading = false
|
that.signShow = false
|
}, 5000)
|
getlabel().then((res) => {
|
clearTimeout(oks)
|
console.log(res)
|
const data = res.data.data.records
|
that.signList = data
|
that.signList.length > 0
|
? (that.signShow = true)
|
: (that.signShow = false)
|
that.loading = false
|
// that.$store.commit("clearLabelLayerIcon");
|
that.$store.dispatch('addLabelLayerIcon', {
|
list: data,
|
clear: true
|
})
|
})
|
},
|
moveMessage (e, b) {
|
global.viewer.tooltip.enable = true
|
global.viewer.tooltip.showAt(e.windowPosition, b)
|
},
|
|
mouserMove (e) {
|
this.moveMessage(e, '点击确认标注位置')
|
},
|
|
addSign () {
|
var that = this
|
this.$store.commit('set_closeMapClick', true)
|
// console.log("开始", "see");
|
global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, that.mouserMove)
|
|
global.viewer.once(global.DC.MouseEventType.CLICK, (e) => {
|
if (that.destroyedFlag == false) return
|
|
global.viewer.tooltip.showAt({ x: 100, y: 100 }, '')
|
global.viewer.tooltip.enable = false
|
global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, that.mouserMove)
|
|
// eslint-disable-next-line no-unused-vars
|
var div = new global.DC.DivForms(global.viewer, {
|
domId: 'AddTagBox',
|
position: [
|
global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(e.wgs84SurfacePosition.lng),
|
Number(e.wgs84SurfacePosition.lat),
|
Number(e.wgs84SurfacePosition.alt)
|
)
|
)
|
]
|
})
|
|
that.$store.commit('SET_ADDTAGPOSITION', e.wgs84SurfacePosition)
|
that.$store.commit('SET_ADDTAGPOPUP', true)
|
})
|
},
|
|
closeModel () {
|
this.$store.dispatch('delVisitedViews', this.$route)
|
this.$router.push('/pcLayout/default')
|
this.$store.commit('clearLabelLayerIcon')
|
this.destroyedFlag = false
|
global.viewer.tooltip.showAt({ x: 100, y: 100 }, '')
|
global.viewer.tooltip.enable = false
|
global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.mouseMove)
|
}
|
},
|
destroyed () {
|
var that = this
|
that.destroyedFlag = false
|
global.viewer.tooltip.showAt({ x: 100, y: 100 }, '')
|
global.viewer.tooltip.enable = false
|
global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, that.mouseMove)
|
this.$store.commit('clearLabelLayerIcon')
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.move {
|
cursor: move;
|
}
|
</style>
|
