+新增标签，可编辑，可加图片

liuyg

2022-03-05 722dbde665a8e335bccaa9d984cd02eb22333e54

 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>