ly-front/src/components/myMarsmap.vue

<template>
  <div class="ditu">
    <div id="marsContainer-map" ref="marsMaps" class="mars3d-container"></div>
    <div class="btns" v-if="!disabled">
      <div class="toolbar" v-if="typeOf === 'polygon'">
        <div
          :class="{ drawPolygon: true, disabled: isDisabled }"
          @click="lineClick('polygon')"
        >
          <div class="drawPolygonIcon"></div>
        </div>
        <div class="drawPolygon" @click="lineClick('circle')">
          <div class="drawCircularIcon"></div>
        </div>
        <!-- <div class="drawPolygon">
          <el-upload
            action=""
            class="upload-demo"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :file-list="fileList"
            :show-file-list="false"
            accept=".json"
            :auto-upload="false"
            ref="upLoad"
          >
            <i class="el-icon-upload2"></i>
          </el-upload>
        </div> -->
      </div>
      <div class="toolbar" v-if="typeOf === 'pointP'">
        <div class="drawPolygon" @click="lineClicks('pointP')">
          <div class="drawpointIcon"></div>
        </div>
      </div>
      <div class="topbtns">
        <el-input
          v-model="lonData"
          :disabled="isinputDisabled"
          placeholder="请输入经度"
        ></el-input>
        <el-input
          v-model="latData"
          :disabled="isinputDisabled"
          placeholder="请输入纬度"
        ></el-input>
        <el-button @click="handleSearchClick()">定位</el-button>
        <el-button class="btns" @click="clearDraw">清空</el-button>
      </div>
    </div>
  </div>
</template>

<script>
"use script";
import { Drawarectangle } from "./map.js";
import iconimg from "@/assets/img/dianweidingweiqizi.png";
export default {
  name: "myMarsmap",
  props: {
    mapData: {
      type: Object,
      default: () => {}
    },
    mapgeoJson: {
      type: String,
      default: ""
    },
    typeOf: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      jsonData: [],
      lon: "",
      lat: "",
      num: 0,
      attrType: "",
      fileList: [],
      lonData: "",
      latData: "",
      fileContent: "",
      isDisabled: false,
      isinputDisabled: false
    };
  },
  components: {},
  mounted() {
    this.getMapJson();
    console.log(this.typeOf, "this.typeOf");
  },
  watch: {
    mapgeoJson: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.jsonData = JSON.parse(newVal);
          if (this.jsonData) {
            if (newVal) {
              this.showRegion(this.jsonData, "geojson");
            }
          }
        }
      }
    },
    mapData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal) {
          if (newVal.lon && newVal.lat) {
            this.lonData = newVal.lon;
            this.latData = newVal.lat;
          } else {
            this.lonData = "";
            this.latData = "";
          }
          console.log("mapData发生变化", newVal);
          if (this.lonData && this.latData) {
            if (this.lonData && this.latData) {
              this.deviceDrid(this.lonData, this.latData);
            }
          }
        }
      }
    }
  },
  methods: {
    handleSearchClick() {
      this.map.setCameraView(
        { lat: this.latData, lng: this.lonData, alt: 4607, pitch: -50 },
        { duration: 0 }
      );
      if (this.lonData && this.latData) {
        this.isinputDisabled = true;
        this.deviceDrid(this.lonData, this.latData);
      }
    },
    getMapJson() {
      // eslint-disable-next-line no-undef
      mars3d.Util.fetchJson({
        url: "/configJson/mapArea.json"
      }).then((res) => {
        this.initMarsMap({
          // 合并配置项
          ...res.map3d
        });
      });
    },
    initMarsMap(options) {
      // eslint-disable-next-line no-undef
      this.map = new mars3d.Map(this.$refs.marsMaps, options);
      // eslint-disable-next-line no-undef
      this.graphicLayer = new mars3d.layer.GraphicLayer();
      this.map.addLayer(this.graphicLayer);

      // 设备点位
      // eslint-disable-next-line no-undef
      this.graphicDevice = new mars3d.layer.GraphicLayer();
      this.map.addLayer(this.graphicDevice);
      // 禁止右键菜单
      this.map.unbindContextMenu();
      this.map.setCameraView(
        {
          lat: "43.895464",
          lng: "109.10559",
          alt: 3269697,
          pitch: -90,
          heading: 360
        },
        { duration: 0 }
      );

      // 针对不同终端的优化配置
      // eslint-disable-next-line no-undef
      if (mars3d.Util.isPCBroswer()) {
        this.map.zoomFactor = 2.0; // 鼠标滚轮放大的步长参数

        // IE浏览器优化
        if (navigator.userAgent.toLowerCase().includes("msie")) {
          this.map.viewer.targetFrameRate = 20; // 限制帧率
          this.map.scene.requestRenderMode = false; // 取消实时渲染
        }
      } else {
        this.map.zoomFactor = 5.0; // 鼠标滚轮放大的步长参数

        // 移动设备上禁掉以下几个选项，可以相对更加流畅
        this.map.scene.requestRenderMode = false; // 取消实时渲染
        this.map.scene.fog.enabled = false;
        this.map.scene.skyAtmosphere.show = false;
        this.map.scene.globe.showGroundAtmosphere = false;
      }

      // map构造完成后的一些处理
      this.onMapLoad();
      // this.map.on(
      //   // eslint-disable-next-line no-undef
      //   mars3d.EventType.click,
      //   this.map_dblClickHandler,
      //   this.graphicLayer
      // );
      // this.map.on(mars3d.EventType.dblClick, map_clickHandler, graphicLayer)
    },
    // map_dblClickHandler() {},
    onMapLoad() {
      console.log("地图加载完成", this.graphicLayer);
      // 设置鼠标操作习惯,更换中键和右键
      this.map.changeMouseModel(true);
      if (this.jsonData.length !== 0) {
        this.showRegion(this.jsonData, "geojson");
      }
      if (this.lonData && this.latData) {
        this.deviceDrid(this.lonData, this.latData);
      }
    },
    lineClicks(val) {
      this.clearDraw();
      this.graphicLayer.eachGraphic((item) => {
        if (item.id === "pointP") {
          this.graphicLayer.removeGraphic(item);
        }
      });
      let style = {};
      style = {
        color: "#ffff00",
        pixelSize: 10,
        clampToGround: true,
        outlineWidth: 0
      };

      Drawarectangle(val, this.graphicLayer, style);
    },
    lineClick(val) {
      if (this.typeOf === "polygon") {
        this.attrType = val;

        // 检查 graphicLayer 中的图形
        const graphicsArray = this.graphicLayer._graphicList._array || [];
        let hasPolygon = false;
        let hasCircle = false;

        // 遍历检查是否有 polygon 或 circle
        graphicsArray.forEach((graphic) => {
          if (graphic.type === "polygon") {
            hasPolygon = true;
          } else if (graphic.type === "circle") {
            hasCircle = true;
          }
        });

        let style = {};
        if (val === "polygon") {
          // 如果已有 polygon 或 circle，限制只能绘制一个 polygon
          if (hasPolygon) {
            this.$message.error("已存在，请先清空");
            return; // 阻止继续执行
          }
          if (hasCircle) {
            // 清除已有 circle
            this.graphicLayer.eachGraphic((item) => {
              if (item.type === "circle") {
                this.graphicLayer.removeGraphic(item);
              }
            });
          }
          style = {
            materialType: mars3d.MaterialType.PolyGradient,
            materialOptions: {
              color: "#3388cc",
              opacity: 0.7,
              alphaPower: 1.3
            }
          };
        } else if (val === "pointP") {
          // pointP 可以与 polygon 或 circle 共存，仅清除已有 pointP
          this.graphicLayer.eachGraphic((item) => {
            if (item.id === "pointP") {
              this.graphicLayer.removeGraphic(item);
            }
          });
          style = {
            color: "#ffff00",
            pixelSize: 10,
            clampToGround: true,
            outlineWidth: 0
          };
        } else if (val === "circle") {
          // 如果已有 circle 或 polygon，限制只能绘制一个 circle
          if (hasCircle) {
            this.$message.error("已存在，请先清空");
            return; // 阻止继续执行
          }
          if (hasPolygon) {
            // 清除已有 polygon
            this.graphicLayer.eachGraphic((item) => {
              if (item.type === "polygon") {
                this.graphicLayer.removeGraphic(item);
              }
            });
          }
          style = {
            materialType: mars3d.MaterialType.PolyGradient,
            materialOptions: {
              color: "#3388cc",
              opacity: 0.7,
              alphaPower: 1.3
            }
          };
        }

        // 如果 val 是 polygon 或 circle，且已有另一种类型，则提示并阻止
        if (
          (hasPolygon && val === "circle") ||
          (hasCircle && val === "polygon")
        ) {
          this.$message.error("只能显示一种类型，已清空");
          return; // 阻止继续执行
        }

        // 绘制新图形
        Drawarectangle(val, this.graphicLayer, style);
      }
    },
    clearDraw() {
      this.isinputDisabled = false;
      if (this.graphicLayer) {
        this.graphicLayer.clear();
      }
    },
    toGeoJSON() {
      console.log(this.graphicLayer, this.typeOf, "this.graphicLayer");
      if (this.typeOf === "pointP") {
        return this.graphicLayer.toGeoJSON({ noAlt: true });
      } else {
        this.graphicLayer._graphicList._array.forEach((item) => {
          if (item.type === "billboard") {
            this.graphicLayer.removeGraphic(item);
          }
        });
        return this.graphicLayer.toGeoJSON({ noAlt: true });
      }
    },
    showRegion(value, type) {
      let geojson = {};
      if (type === "uploadGeojson") {
        if (this.graphicLayer._graphicList.length === 0) {
          geojson = value;
        } else {
          this.$message.error("请先清空数据在添加");
        }
      } else {
        geojson = {
          type: "Feature",
          geometry: value,
          properties: {
            name: ""
          }
        };
        this.clearDraw();
      }
      if (this.graphicLayer) {
        this.graphicLayer.loadGeoJSON(geojson, {
          style: {
            type: "polygon",
            // eslint-disable-next-line no-undef
            materialType: mars3d.MaterialType.PolyGradient,
            materialOptions: {
              color: "#3388cc",
              opacity: 0.7,
              alphaPower: 1.3
            }
          },
          flyTo: true
        });
        let _this = this;
        // eslint-disable-next-line no-undef
        this.graphicLayer.on(mars3d.EventType.click, function (event) {
          _this.attrType = "";
          console.log("单击了图层", event);
        });
      }
    },
    deviceDrid(lon, lat) {
      // this.clearDraw();
      this.graphicLayer.eachGraphic((item) => {
        if (item.name === "贴地点") {
          this.graphicLayer.removeGraphic(item);
        }
      });

      const graphic = new mars3d.graphic.BillboardEntity({
        position: new mars3d.LngLatPoint(lon, lat),
        style: {
          image: iconimg,
          scale: 1,
          width: 30,
          height: 50,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        },
        flyTo: true
      });

      if (this.graphicLayer) {
        this.graphicLayer.addGraphic(graphic);
      }
      console.log(this.graphicLayer, "this.graphicLayer");
    },
    // 地图跳转
    mapJump(lon, lat, alt) {
      if (lon !== 0 && lat !== 0) {
        this.map.setCameraView({
          lat: lat,
          lng: lon,
          alt: alt || 10000,
          pitch: -90
        });
      }
    },
    clearDevice() {
      if (this.graphicDevice) {
        this.graphicDevice.clear();
      }
    },
    // 设备点位
    mapDevice(lon, lat) {
      if (lon !== null && lat !== null) {
        this.clearDevice();
        // eslint-disable-next-line no-undef
        const graphic = new mars3d.graphic.PointPrimitive({
          name: "设备点位",
          // eslint-disable-next-line no-undef
          position: new mars3d.LngLatPoint(lon, lat),
          style: {
            color: "#ff0000",
            pixelSize: 10,
            clampToGround: true,
            outlineWidth: 0
          },
          flyTo: true
        });
        if (this.graphicDevice) {
          this.graphicDevice.addGraphic(graphic);
        }
      } else {
        this.clearDevice();
      }
    },
    beforeUpload(file) {
      console.log(file);
      // const isJson = file.type === "json/geojson";
      // if (!isJson) {
      //   this.$message.error("只能上传 JSON 或 GeoJSON 文件");
      // }
      // return isJson;
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleChange(file) {
      console.log(file);
      const reader = new FileReader();
      reader.onload = (e) => {
        const content = e.target.result;
        this.fileContent = JSON.parse(content);
        console.log(this.fileContent);
        this.showRegion(this.fileContent, "uploadGeojson");
      };
      reader.readAsText(file.raw);
      // this.$refs.upLoad.submit();
    },
    isGeoJSON(content) {
      try {
        // eslint-disable-next-line no-undef
        const multiPolygon = turf.multiPolygon(content);
        console.log("MultiPolygon is valid:", multiPolygon);
      } catch (error) {
        console.error("Error processing MultiPolygon:", error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ditu {
  width: 100%;
  height: 100%;
  position: relative;
  #marsContainer-map {
    width: 100%;
    height: 250px;
  }
  .topbtns {
    width: 100%;
    height: 45px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(30, 93, 160, 0.5);
    .el-input {
      width: 30%;
      margin-left: 1%;
      // transform: translateX(-50%);
    }
    .el-button--small {
      margin-left: 10px;
    }
  }
  .toolbar {
    position: absolute;
    right: 0%;
    top: 20%;
    z-index: 999;
    height: auto;
    display: flex;
    align-items: center;
    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
    .drawPolygon {
      width: 40px;
      height: 40px;
      margin-top: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: rgba(15, 24, 41, 0.5);
      border-radius: 8px;
      margin-right: 5px;
      .drawPolygonIcon {
        width: 20px;
        height: 20px;
        background: url(@/assets/img/wbx.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
      .drawPolygonIcon:hover {
        width: 20px;
        height: 20px;
        background: url(@/assets/img/wbxH.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
      .drawCircularIcon {
        width: 20px;
        height: 20px;
        background: url(@/assets/img/y.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
      .drawCircularIcon:hover {
        width: 20px;
        height: 20px;
        background: url(@/assets/img/yh.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
      .drawpointIcon {
        width: 20px;
        height: 20px;
        background: url(@/assets/img/point.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
      .drawpointIcon:hover {
        width: 20px;
        height: 20px;
        background: url(@/assets/img/pointh.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
      .el-icon-upload2 {
        color: #fff;
        font-size: 16px;
        cursor: pointer;
      }
      .el-icon-upload2:hover {
        color: #1e5da0;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
}
</style>