<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) {
|
const that = this;
|
// 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,
|
400.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;
|
let 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) {
|
if (b == "") {
|
global.viewer.tooltip.enable = false;
|
} else {
|
global.viewer.tooltip.enable = true;
|
global.viewer.tooltip.showAt(e.windowPosition, b);
|
}
|
},
|
|
addSign() {
|
var that = this;
|
this.$store.commit("set_closeMapClick", true);
|
// console.log("开始", "see");
|
global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) =>
|
that.moveMessage(e, "点击确认标注位置")
|
);
|
|
global.viewer.once(global.DC.MouseEventType.CLICK, (e) => {
|
if (that.destroyedFlag == false) return;
|
|
global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) =>
|
that.moveMessage(e, "")
|
);
|
|
// eslint-disable-next-line no-unused-vars
|
const popup = 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");
|
},
|
},
|
destroyed() {
|
var that = this;
|
that.destroyedFlag = false;
|
if (global.DC) {
|
global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) =>
|
that.moveMessage(e, "")
|
);
|
}
|
this.$store.commit("clearLabelLayerIcon");
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.move {
|
cursor: move;
|
}
|
</style>
|
