From 722dbde665a8e335bccaa9d984cd02eb22333e54 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Sat, 05 Mar 2022 17:49:13 +0800
Subject: [PATCH] +新增标签，可编辑，可加图片
---
src/components/leftNav/index.vue | 99 +++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 95 insertions(+), 4 deletions(-)
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index 0997990..b15babd 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -9,6 +9,10 @@
<img :src="item.img" alt="" />
<span>{{ item.label }}</span>
</li>
+ <li class="addIcons" @click="addIcons">
+ <!-- <img :style="[imgStyle]" :src="item.img" alt="" /> -->
+ <span>+</span>
+ </li>
</ul>
</div>
</template>
@@ -21,10 +25,16 @@
getWayList,
getTagList,
} from "@/api/pc/leftNav/index";
-
+import { mapGetters } from "vuex";
export default {
name: "leftNav",
- computed: {},
+ computed: {
+ ...mapGetters([
+ "viewer",
+ "closeMapClick", // 关闭地图点击，防止新增标签误触
+ "addIconsLayerIconPopup", //传送关闭编辑窗口，刷新标签数据
+ ]),
+ },
data() {
return {
leftNavData: [
@@ -108,8 +118,77 @@
created() {
this.DC = global.DC;
},
- mounted() {},
+ mounted() {
+ //初始化新增标签图层
+ // this.$store.commit("createAddIconsLayerIconLayer", { viewer: this.viewer });
+ },
+ watch: {
+ addIconsLayerIconPopup() {
+ if (!this.addIconsLayerIconPopup) {
+ this.reself();
+ }
+ },
+ },
methods: {
+ reself() {
+ let that = this;
+ if (this.tagLayer) {
+ this.tagLayer.clear();
+ }
+ getTagList().then((res) => {
+ res.data.data.forEach((item) => {
+ const divIcon = new this.DC.DivIcon(
+ new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+ `
+ <div class="tag-entitys-box">
+ <div class="tag-content">
+ ${item.mechanismname}
+ </div>
+ <div class="tag-angle-content">
+ <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ </div>
+ </div>
+ `
+ );
+ //订阅事件
+ divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
+ if (that.closeMapClick) {
+ return;
+ }
+ that.openPopups({
+ lng: e.overlay.position.lng,
+ lat: e.overlay.position.lat,
+ item: item,
+ });
+ });
+ this.tagLayer.addOverlay(divIcon);
+ if (!this.leftNavData[0].flag) {
+ this.tagLayer.show = false;
+ }
+ });
+ });
+ },
+ addIcons() {
+ if (this.closeMapClick) {
+ //若正在加标签，退出
+ return;
+ }
+ //加标签
+ console.log("addIcons", "see");
+ this.$store.dispatch("chouseAddIconsLayerIcon", {
+ //新增标签 选定位置
+ viewer: this.viewer,
+ fn: (lnglat) => {
+ //返回选定坐标
+ console.log(lnglat, "see");
+ //添加空白标签
+ this.$store.dispatch("addIconsLayerIcon", {
+ lnglat: lnglat,
+ viewer: this.viewer,
+ });
+ },
+ });
+ },
generatePosition(num) {
const list = [];
for (let i = 0; i < num; i++) {
@@ -165,7 +244,10 @@
);
//订阅事件
divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
- console.log(item);
+ if (that.closeMapClick) {
+ return;
+ }
+ // console.log(item, "see11111");
that.openPopups({
lng: e.overlay.position.lng,
lat: e.overlay.position.lat,
@@ -388,6 +470,7 @@
),
],
});
+ // console.log(value, "see");
this.$store.dispatch("setOurDataInPoput", value);
this.$store.dispatch("pcFlyView", {
jd: value.lng,
@@ -444,4 +527,12 @@
}
}
}
+.addIcons {
+ span {
+ font-size: 25px !important;
+ }
+}
+.avtiveAddIcons {
+ background-color: aqua;
+}
</style>
--
Gitblit v1.9.3