首页项目状态

zxl

2025-03-14 21b3d6e90ee899f878c5533bb1c75ff62ab09fda

 src/views/components/Map/index.vue

@@ -1,47 +1,46 @@
<template>
  <div>
    <div :id="id" ref="contentRef" class="w-full h-full">
  <div :id="id" ref="contentRef" style="height: 100%; width: 100%">
    <div
      v-if="isShowControl"
      :class="controlPosition"
      class="control-container bottom-right"
    >
      <div
        v-if="isShowControl"
        :class="controlPosition"
        class="control-container bottom-right"
        v-for="item in controlMapping"
        :key="item.id"
        class="control-content"
      >
        <div
          v-for="item in controlMapping"
          :key="item.id"
          class="control-content"
        >
          <template v-if="item.children">
            <div
              v-for="child in item.children"
              :key="child.id"
              class="control-item"
              @click="child.event"
            >
              <img :src="child.img" />
            </div>
          </template>
          <template v-else>
            <div class="control-item" @click="item.event">
              <img :src="item.img" />
            </div>
          </template>
        </div>
        <template v-if="item.children">
          <div
            v-for="child in item.children"
            :key="child.id"
            class="control-item"
            @click="child.event"
          >
            <img :src="child.img" />
          </div>
        </template>
        <template v-else>
          <div class="control-item" @click="item.event">
            <img :src="item.img" />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
<script>
import Location from "@/assets/images/location.png";
import FileImg from "@/assets/images/file1.png";
import MinusImg from "@/assets/images/minus.png";
import PlusImg from "@/assets/images/plus.png";
import FullScreenImg from "@/assets/images/fullScreen.png";
import PositionImg from "@/assets/images/position.png";
var infoWin;
export default {
  data() {
    return {
      zoom: 15,
      zoom: 11,
      map: null,
      contentRef: {},
      infoWin: {},
@@ -131,9 +130,10 @@
    initTianMap() {
      var T = window.T;
      setTimeout(async () => {
        this.map = new T.Map(this.id, {
          projection: "EPSG:4326",
        });
        // this.map = new T.Map(this.id, {
        //     projection: "EPSG:4326",
        // });
        this.map = new T.Map(this.id);
        this.map.centerAndZoom(
          new T.LngLat(this.defaultMaskInfo.lon, this.defaultMaskInfo.lat),
          this.zoom
@@ -144,7 +144,7 @@
          //form表单中是否有坐标，有则定位到对应位置，没有则使用默认的
          // 104.65417 28.75572 测试数据
          // 四川省宜宾市翠屏区大观楼街道外南街71
          if (this.$props.mapList[0].addr) {
          if (this.$props.mapList.length>0&&this.$props.mapList[0].addr) {
            const { lng: lon, lat } = await this.getGeocode(
              this.$props.mapList[0].addr
            );
@@ -157,7 +157,7 @@
        } else {
          this.$props.mapList.length && this.makeAllMask(this.$props.mapList);
        }
      }, 0);
      }, 1500);
    },

    zoomIn() {
@@ -173,33 +173,32 @@
    },

    getCurrentPosition() {
      if (navigator.geolocation) {
        ElMessage.warning("该功能暂未开发");
        // TODO 地图定位
        // navigator.geolocation.getCurrentPosition(function (position) {
        //   var latitude = position.coords.latitude
        //   var longitude = position.coords.longitude
        //
        //   moveTo(String(longitude), String(latitude))
        // })
      } else {
        ElMessage.warning("当前浏览器不支持定位功能");
      }
      //   if (navigator.geolocation) {
      //     ElMessage.warning("该功能暂未开发");
      //     // TODO 地图定位
      //     // navigator.geolocation.getCurrentPosition(function (position) {
      //     //   var latitude = position.coords.latitude
      //     //   var longitude = position.coords.longitude
      //     //
      //     //   moveTo(String(longitude), String(latitude))
      //     // })
      //   } else {
      //     ElMessage.warning("当前浏览器不支持定位功能");
      //   }
    },

    moveTo(lon, lat) {
      this.map && this.map.panTo(new T.LngLat(lon, lat));
    },

    // 默认的点标记
    makeDefaultMask(mapInfo) {
      const { name, lon, lat } = mapInfo
      const { name, lon, lat } = mapInfo;
      const option = {
        text: name,
        offset: [-35, -45],
        labelBg: "#3369FF",
        labelColor: "#fff",
        labelClick,
        labelClick: this.labelClick,
      };
      // 清除之前的标记
      this.map && this.map.clearOverLays();
@@ -214,12 +213,15 @@
      const { lat, lng: lon } = e.lnglat;

      this.makeDefaultMask({
        ...defaultMaskInfo,
        ...this.defaultMaskInfo,
        lon: String(lon),
        lat: String(lat),
      });
      this.getReverseGeocode(e).then((addr) => {
        this.$emit("mapClick", { e, addr });
        this.$emit("mapClick", {
          e,
          addr,
        });
      });
      console.log("点击事件", e);
    },
@@ -259,15 +261,12 @@
          ${row.projectName ?? "暂无数据"}
        </div>
        <div class='close-btn close-btn-${random}'>
          ×
        </div>
      </div>
      <div class="detail-info">
        <span class="truncate-content">总投资：${
          row.totalMoney ?? "暂无数据"
        }</span>
        <span class="truncate-content">总投资：${row.totalMoney || ""}</span>
        <span class="truncate-content">
          项目状态：
          项目状态：${this.showProjectStatusStr(row.projectStatus)}
        </span>
         <span class="truncate-content">
          项目地址：${row.projectAddr ?? "暂无数据"}
@@ -280,22 +279,40 @@
    </div>`;
      }
    },

    showProjectStatusStr(status) {
      console.log(status)
      switch (status) {
        case "pendding":
          return "未开工";
        case "working":
          return "已开工";
        default:
          return "异常项目";
      }
    },
    // 唯一标识
    getUniqueId() {
      return Math.random().toString(36).substr(2) + Date.now();
    },

    markerMouseover(_e, infoWin, info, random) {
    markerMouseover(_e, info, random, markerOptions) {
      if (infoWin) this.map.removeOverLay(infoWin);
      // 点位标记移入显示不同内容
      if (this.$props.isShowControl) {
        infoWin = new T.InfoWindow();
        infoWin.setContent(this.generateContent(info, random));
        const contentWrapper = document.querySelector(
          ".tdt-infowindow-content-wrapper"
        );
        if (contentWrapper) {
          contentWrapper.style.opacity = "1";
        }
        infoWin.setLngLat(_e.lnglat);
        // 向地图上添加信息窗口
        // if (this.$props.mapType) {
        this.map && this.map.addOverLay(infoWin);
        // }

        // const contentWrapper = document.querySelector(
        //   ".tdt-infowindow-content-wrapper"
        // );
        // if (contentWrapper) {
        //   contentWrapper.style.opacity = "1";
        // }
        // 查找到那个info 界面
        // const allCloseBtn = document.querySelectorAll(`.close-btn-${random}`);
        // allCloseBtn[allCloseBtn.length - 1].onclick = (_e) => {
@@ -304,85 +321,112 @@
      }
    },

    markerMouseout(_e, infoWin) {
      infoWin.setContent(this.generateContent());
      const contentWrapper = document.querySelector(
        ".tdt-infowindow-content-wrapper"
      );
      if (contentWrapper) {
        contentWrapper.style.opacity = "0";
      }
    markerMouseout(_e) {
      // infoWin.setContent(this.generateContent());
      // const contentWrapper = document.querySelector(
      //   ".tdt-infowindow-content-wrapper"
      // );
      // if (contentWrapper) {
      //   contentWrapper.style.opacity = "0";
      // }
      // this.map.removeOverLay(infoWin);
    },

    // 打标记
    makeMask(lon, lat, options) {
      const { markerOptions, labelOptions } = options;
      console.log("options", markerOptions, labelOptions);
      const icon = new T.Icon({
        iconUrl: Location,
        iconSize: new T.Point(19, 27),
        iconAnchor: new T.Point(10, 25),
      });
      var marker = new T.Marker(new T.LngLat(lon, lat), {
        icon,
        id: markerOptions?.id,
      });
      this.map && this.map.addOverLay(marker);
      const label = new T.Label({
        text: labelOptions.text,
        position: new T.LngLat(lon, lat),
        offset: new T.Point(...labelOptions.offset),
        id: labelOptions?.id,
      });
      if (lon && lat) {
        const { markerOptions, labelOptions } = options;

      labelOptions.labelBg && label.setBackgroundColor(labelOptions.labelBg);
      labelOptions.labelColor && label.setFontColor(labelOptions.labelColor);
      //创建地图文本对象
      if (!this.$props.mapType) {
        this.map && this.map.addOverLay(label);
        const icon = new T.Icon({
          iconUrl: Location,
          iconSize: new T.Point(19, 27),
          iconAnchor: new T.Point(10, 25),
        });

        var marker = new T.Marker(new T.LngLat(lon, lat), {
          icon,
          id: markerOptions?.id,
        });

        this.map && this.map.addOverLay(marker);
        const label = new T.Label({
          text: labelOptions.text,
          position: new T.LngLat(lon, lat),
          offset: new T.Point(...labelOptions.offset),
          id: labelOptions?.id,
        });

        labelOptions.labelBg && label.setBackgroundColor(labelOptions.labelBg);
        labelOptions.labelColor && label.setFontColor(labelOptions.labelColor);
        //创建地图文本对象
        if (!this.$props.mapType) {
          this.map && this.map.addOverLay(label);
        }
        markerOptions?.markerClick &&
          this.addEvent(marker, "click", (e) =>
            markerOptions.markerClick(label, e)
          );
        labelOptions?.labelClick &&
          this.addEvent(label, "click", (e) =>
            labelOptions.labelClick(label, e)
          );

        this.addEvent(marker, "mouseover", (e) =>
          this.markerMouseover(e, options, this.getUniqueId(), markerOptions)
        );
        this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e));
      }
      markerOptions?.markerClick &&
        this.addEvent(marker, "click", (e) => markerOptions.markerClick(label, e));
      labelOptions?.labelClick &&
      this.addEvent(label, "click", (e) => labelOptions.labelClick(label, e));

      const lnglat = new T.LngLat(lon, lat);
      const infoWin = new T.InfoWindow(this.generateContent(), {
        id: markerOptions?.id,
        offset: new T.Point(0, -15),
        closeButton: false,
      });

      infoWin.setLngLat(lnglat);
      // 向地图上添加信息窗口
      if (this.$props.mapType) {
        this.map && this.map.addOverLay(infoWin);
      }

      this.addEvent(marker, "mouseover", (e) =>
        markerMouseover(e, infoWin, labelOptions, getUniqueId())
      );
      this.addEvent(marker, "mouseout", (e) => markerMouseout(e, infoWin));
    },

    // 标记所有点
    makeAllMask(mapList) {
      // 清除之前的标记
      this.map && this.map.clearOverLays();
      var minX = 180;
      var maxX = -180;
      var minY = 90;
      var maxY = -90;
      var _this = this;
      this.mapList.map((item) => {
      mapList.map((item) => {
        const config = {
          markerOptions: {
            id: item.id,
            markerClick: _this.markerClick,
            //  markerClick: _this.markerClick,
          },
          labelOptions: {
            text: item.name,
            text: item.projectName,
            offset: [-45, -45],
            id: item.id,
            markerClick: _this.labelClick,
            //   markerClick: _this.labelClick,
          },
          projectName: item.projectName,
          totalMoney: item.yearInvestAmount
            ? item.yearInvestAmount + "元"
            : "暂无数据",
          projectAddr: item.projectAddress,
          projectStatus: item.projectStatus,
        };
        _this.makeMask(item.lon, item.lat, config);

        _this.makeMask(item.longitude, item.latitude, config);

        if (item.longitude && item.longitude > maxX) {
          maxX = item.longitude;
        }
        if (item.longitude && item.longitude < minX) {
          minX = item.longitude;
        }
        if (item.latitude && item.latitude > maxY) {
          maxY = item.latitude;
        }
        if (item.latitude && item.latitude < minY) {
          minY = item.latitude;
        }
      });

      this.moveTo(
        (parseFloat(maxX) + parseFloat(minX)) / 2,
        (parseFloat(maxY) + parseFloat(minY)) / 2
      );
    },

    // 通用添加事件的方法
@@ -401,7 +445,7 @@
    //标记点击事件
    markerClick(currentLabel, e) {
      const id = e.target.options.id;
      currentLabelStyleChange(currentLabel);
      this.currentLabelStyleChange(currentLabel);
      console.log("点击事件", e, currentLabel);
      this.getReverseGeocode(e).then((addr) => {
        this.$emit(
@@ -415,9 +459,10 @@

    // label点击事件
    labelClick(currentLabel, e) {
      console.log("触发点击事件");
      const id = e.target.options.id;
      currentLabelStyleChange(currentLabel);
      getReverseGeocode(e).then((addr) => {
      this.currentLabelStyleChange(currentLabel);
      this.getReverseGeocode(e).then((addr) => {
        this.$emit(
          "labelClick",
          id
@@ -449,7 +494,7 @@
      },
    },
  },
  beforeUnmount() {
  beforeDestroy() {
    this.map = null;
  },
};
@@ -576,10 +621,10 @@
//}

.tdt-infowindow-tip-container {
  opacity: 0;
  opacity: 1;
}

.tdt-infowindow-content-wrapper {
  opacity: 0;
  opacity: 1;
}
</style>