zhgdyun/src/components/mars3d/MarsBoxarea.vue

<template>
  <div class="mars3d-com">
    <div class="mars3d-com" ref="mars3dContainer" style="width: 100%; height: 100%"></div>
    <!-- 绘制区域 -->
    <div class="mars3d-box">
      <div class="mars-3d-header">
        <el-radio v-model="marsheader" label="1">多边形区域</el-radio>
        <!-- <i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i> -->
      </div>

      <div class="mars3d-Controls">
        <div class="mars3d-item" style="margin-top: 50px;">
          <div class="mar3d-title">数据维护：</div>
          <div class="mar3d-con">
            <el-button size="mini" type="primary" @click="startDrawGraphic">绘制</el-button>
            <el-button size="mini" type="danger" @click="deleteSelectedGraphic">删除</el-button>
            <el-button size="mini" type="success" @click="updateGraphicStyle">保存</el-button>
          </div>
        </div>

        <div class="mars3d-item">
          <div class="mar3d-title">区域名称：</div>
          <div class="mar3d-con" style="margin-left: 24px;">
            <input v-model="itemdata.texttitle" placeholder="填充文字" />
          </div>
        </div>

        <div class="mars3d-item">
          <div class="mar3d-title">边框颜色：</div>
          <div class="mar3d-con">
            <el-color-picker v-model="itemdata.fillColor" size="small" />
            <input v-model="itemdata.fillColor" placeholder="填充色" />
          </div>
        </div>

        <div class="mars3d-item">
          <div class="mar3d-title">文字颜色：</div>
          <div class="mar3d-con">
            <el-color-picker v-model="itemdata.textColor" size="small" />
            <input v-model="itemdata.textColor" placeholder="文字颜色" />
          </div>
        </div>

        <div class="mars3d-item">
          <el-button size="mini" type="success" @click="saveArea">保存区域</el-button>
        </div>
      </div>
    </div>

    <!-- 经纬度数据 -->
    <div class="mars3d-box" v-if="latlntswtich">
      <div class="mars-3d-header">
        <el-radio v-model="marsheader" label="1">经纬度数据</el-radio>
        <!-- <i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i> -->
      </div>

      <div class="mars3d-Controls">
        <div class="mars3d-item" style="margin-top: 50px;">
          <div class="mar3d-title">当前经度：</div>
          <div class="mar3d-con">
            <input v-model="latlntdata.lon" placeholder="经度" disabled />
          </div>
        </div>

        <div class="mars3d-item">
          <div class="mar3d-title">当前纬度：</div>
          <div class="mar3d-con">
            <input v-model="latlntdata.lat" placeholder="纬度" disabled />
          </div>
        </div>

        <div class="mars3d-item">
          <el-button size="mini" type="success" @click="onlatlnt">保存经纬度</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import * as mars3d from "mars3d";
// import { Cesium } from "mars3d";
import "mars3d/dist/mars3d.css";
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";

export default {
  data() {
    return {
      mars3dContainer: null,
      map: null,
      // 图层
      graphicLayer: null,
      // 开关
      selectedGraphic: null,
      // 修改图形
      itemdata: {
        // 填充色
        fillColor: "",
        // 文字颜色
        textColor: "",
        // 填充文字
        texttitle: ""
      },
      // 唯一值
      datatitle: 1,
      // 选中自定义图形
      marsheader: "1",
      // 获取经纬度-开关
      latlntswtich: false,
      // 经纬度
      latlntdata: {
        lat: "",
        lon: ""
      }
    };
  },
  mounted() {
    console.log("====================加载地图======================");
    this.mars3dContainer = this.$refs.mars3dContainer;
    // 初始化Mars3D地图
    this.map = new mars3d.Map(this.mars3dContainer, {
      scene: {
        center: { lat: 42.8, lng: 90.4, alt: 150000, heading: 0, pitch: -45 },
        showSun: true,
        showMoon: true,
        showSkyBox: true,
        showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
        fog: true,
        fxaa: true,
        globe: {
          showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
          depthTestAgainstTerrain: false,
          baseColor: "#546a53"
        },
        cameraController: {
          zoomFactor: 3.0,
          minimumZoomDistance: 1,
          maximumZoomDistance: 50000000,
          enableRotate: true,
          enableZoom: true
        },
        mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
        mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL // 2D下左右一直可以滚动重复世界地图
      },
      control: {
        // baseLayerPicker: true, // basemaps底图切换按钮
        // homeButton: true, // 视角复位按钮
        // sceneModePicker: true, // 二三维切换按钮
        // navigationHelpButton: true, // 帮助按钮
        // fullscreenButton: true, // 全屏按钮
        contextmenu: { hasDefault: true }, // 右键菜单
        locationBar: true
      },
      // terrain: {
      //   url: "//data.mars3d.cn/terrain",
      //   show: true
      // },
      basemaps: [
        {
          name: "高德地图",
          // icon: "img/basemaps/gaode.png", // 假设你有一个高德地图的图标
          type: "xyz",
          url:
            "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          subdomains: ["1", "2", "3", "4"],
          show: true // 设置为默认显示
        }
      ]
    });

    // 获取locationBar控件的DOM元素
    // var locationBarElement = document.querySelector(".mars3d-com");

    // // 如果元素存在，则调整其位置
    // if (locationBarElement) {
    //   locationBarElement.style.position = "absolute";
    //   locationBarElement.style.top = "-200px"; // 将位置往上移动200px
    // }

    // const locationBar = new mars3d.control.LocationBar({
    //   template:
    //     "<div>经度:{lng}</div><div>纬度:{lat}</div> <div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}度</div> <div>俯仰角：{pitch}度</div><div>视高：{cameraHeight}米</div><div>帧率：{fps} FPS</div>",
    // });
    // this.map.addControl(locationBar);

    if (this.$parent.$parent.MarsBoxareadata) {
      console.log("this.$parent.MarsBoxareadata", this.$parent.MarsBoxareadata);
      console.log(
        "this.$parent.MarsBoxareadata",
        JSON.parse(this.$parent.$parent.MarsBoxareadata, null, 2)
      );

      this.graphicLayer = new mars3d.layer.GraphicLayer();
      this.map.addLayer(this.graphicLayer);

      let a = JSON.parse(this.$parent.$parent.MarsBoxareadata, null, 2);

      console.log("a.geojsonData.features.length > 1", a.features.length > 0);
      if (a.features.length > 0) {
        a.features.forEach(item => {
          console.log("每个item", item);
          this.addDemoGraphic14(item);
        });
      }
    } else {
      console.log("执行没有绘制==============");
      // 没有修改过
      // 创建一个图形图层
      this.graphicLayer = new mars3d.layer.GraphicLayer();
      this.map.addLayer(this.graphicLayer);
    }

    // this.bindLayerPopup();
    this.bindGraphicClick();

    // 绑定地图点击事件
    this.map.on(mars3d.EventType.click, this.handleMapClick);
  },
  methods: {
    // 保存经纬度
    onlatlnt() {
      this.$parent.$parent.onsetlatlnt({
        lon: this.latlntdata.lon,
        lat: this.latlntdata.lat
      });
    },
    // 处理地图点击事件
    handleMapClick(event) {
      const position = event.position; // 获取点击位置的屏幕坐标 (x, y)
      const cartesian = this.map.scene.globe.pick(
        this.map.camera.getPickRay(position),
        this.map.scene
      ); // 获取点击位置的笛卡尔坐标

      if (cartesian) {
        const cartographic = mars3d.Cesium.Cartographic.fromCartesian(
          cartesian
        ); // 转换为地理坐标
        const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude); // 转换为经度
        const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude); // 转换为纬度
        const altitude = cartographic.height; // 获取海拔高度

        console.log(`经度: ${longitude}, 纬度: ${latitude}, 海拔: ${altitude}`);
        this.latlntdata.lat = latitude;
        this.latlntdata.lon = longitude;

        // 这里可以根据需要将经纬度信息显示在界面上
        // 例如：this.showCoordinates(longitude, latitude, altitude);
      }
    },

    // 通知父组件关闭
    onclonemap() {
      this.$parent.$parent.onclose();
    },

    addDemoGraphic14(item) {
      console.log("item============", item);
      const graphic = new mars3d.graphic.PolylineEntity({
        positions: item.geometry.coordinates, // 假设 item.geometry.coordinates[0] 包含所有点的坐标
        style: {
          width: 2, // 设置线条宽度
          color: item.properties.fillColor, // 设置线条颜色
          materialType: mars3d.MaterialType.PolylineDash, // 设置材质类型为虚线
          dashArray: [10, 5], // 设置虚线样式，10表示实线长度，5表示空白长度
          closure: true,
          label: {
            text: item.properties.texttitle, // 设置标签文字
            font_size: 13,
            color: item.properties.textColor // 设置标签文字颜色
          }
        },
        attr: { remark: "示例14" }
      });
      this.graphicLayer.addGraphic(graphic);
    },
    // 开始绘制
    startDrawGraphic() {
      console.log("执行绘画");
      if (this.selectedGraphic) {
        this.updateGraphicStyle();
      }
      const that = this;
      if (this.graphicLayer) {
        this.graphicLayer.unbindPopup();
      }
      this.graphicLayer.startDraw({
        type: "polyline",
        // maxPointNum: 2, //可以限定最大点数，2个点绘制后自动结束
        // hasMidPoint: false,
        style: {
          color: "#93a9cc",
          width: 3,
          clampToGround: false,
          materialType: mars3d.MaterialType.PolylineDash, // 设置材质类型为虚线
          dashArray: [10, 5], // 设置虚线样式，10表示实线长度，5表示空白长度
          closure: true,
          label: {
            text: "未命名",
            font_size: 18,
            color: "#3d6397",
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 500000,
            distanceDisplayCondition_near: 0
          }
        },

        success: function(graphic) {
          // 为每个图形添加唯一的属性
          graphic.attr = {
            id: that.datatitle++, // 生成一个唯一的ID
            description: "这是区域 " + graphic.id + " 的描述信息"
          };
        }
      });

      // this.updateGraphicStyle();
    },

    // 在图层绑定Popup弹窗
    bindLayerPopup() {
      this.graphicLayer.bindPopup(function(event) {
        console.log("event", event);
        const data = event.graphic.style;
        const attr = {};
        // attr["类型"] = event.graphic.type;
        // attr["来源"] = "我是layer上绑定的Popup";
        // attr["备注"] = "我支持鼠标交互";
        attr["名称"] = data.label.text;
        // attr["描述"] = attr.description || "默认描述"; // 使用图形属性中的描述信息

        return mars3d.Util.getTemplateHtml({
          title: "矢量图层",
          template: "all",
          attr
        });
      });
    },

    // 绑定图形点击事件
    bindGraphicClick() {
      const that = this;
      this.graphicLayer.on(mars3d.EventType.click, function(event) {
        that.selectedGraphic = event.graphic;
        console.log("event.graphic", event.graphic);
        console.log("this.itemdata", that.itemdata);
        console.log("this.itemdata", that.itemdata.fillColor);
        that.itemdata.fillColor = event.graphic.style.color;
        that.itemdata.textColor = event.graphic.style.label.color;
        that.itemdata.texttitle = event.graphic.style.label.text;

        // 重新绑定弹窗
        that.bindLayerPopup();
      });
    },

    // 更新图形样式
    updateGraphicStyle() {
      if (this.selectedGraphic) {
        console.log("this.selectedGraphic", this.selectedGraphic);
        console.log("this.selectedGraphic.id", this.selectedGraphic.id);

        this.selectedGraphic.style.color = this.itemdata.fillColor;
        this.selectedGraphic.style.label.color = this.itemdata.textColor;
        this.selectedGraphic.style.label.text = this.itemdata.texttitle; // 修正这里

        // // 移除之前的监听器
        // map.off(mars3d.EventType.postUpdate, updateGraphicStyle);

        // // 添加新的监听器
        // map.on(mars3d.EventType.postUpdate, function (event) {
        // 	console.log("更新了", event);
        // 	// 在这里可以进行其他操作
        // });
        const graphic = this.graphicLayer.getGraphicById(
          this.selectedGraphic.id
        );

        // console.log("graphic", graphic);
        // console.dir("111111",graphic)
        // console.log("graphic", graphic.redraw());
        graphic.redraw();

        // 重新渲染地图
        // this.map.render();
        // 关闭弹窗
        this.graphicLayer.unbindPopup();

        // 清理 selectedGraphic.value
        // this.selectedGraphic = null;
      }
    },

    // 删除
    deleteSelectedGraphic() {
      if (this.selectedGraphic) {
        this.updateGraphicStyle();

        this.graphicLayer.removeGraphic(this.selectedGraphic);
        this.selectedGraphic = null;
        this.itemdata = {};
      }
    },
    // 保存区域
    saveArea() {
      if (this.graphicLayer) {
        this.updateGraphicStyle();

        const graphics = this.graphicLayer.getGraphics();
        const features = graphics
          .map(graphic => {
            const geometry = graphic.positions; // 获取图形的坐标点
            console.log("图形坐标点:", geometry); // 调试信息

            // 将笛卡尔坐标转换为经纬度坐标
            const positions = geometry.map(point => {
              const cartographic = Cesium.Cartographic.fromCartesian(point);
              return [
                Cesium.Math.toDegrees(cartographic.longitude),
                Cesium.Math.toDegrees(cartographic.latitude)
              ];
            });

            const properties = {
              id: graphic.attr.id,
              description: graphic.attr.description,
              fillColor: graphic.style.color,
              textColor: graphic.style.label.color,
              texttitle: graphic.style.label.text
            };

            // 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象
            let geoJSONGeometry;
            console.log("graphic.type", graphic.type);

            if (graphic.type === "polygonP") {
              geoJSONGeometry = {
                type: "polygon",
                coordinates: [positions]
              };
            } else if (graphic.type === "polygon") {
              geoJSONGeometry = {
                type: "Polygon",
                coordinates: [positions]
              };
            } else if (graphic.type === "polyline") {
              geoJSONGeometry = {
                type: "LineString",
                coordinates: positions
              };
            } else {
              // 其他类型的图形处理
              return null;
            }

            return {
              type: "Feature",
              geometry: geoJSONGeometry,
              properties: properties
            };
          })
          .filter(feature => feature !== null); // 过滤掉无效的图形

        const geoJSON = {
          type: "FeatureCollection",
          features: features
        };

        console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2));

        const a = geoJSON.features;
        const formattedCoordinates = a
          .map(feature => {
            return feature.geometry.coordinates
              .map(coord => {
                return `${coord[0]}|${coord[1]}`;
              })
              .join(", ");
          })
          .join(", ");

        console.log(formattedCoordinates);
        this.itemdata = {
          // 填充色
          fillColor: "",
          // 文字颜色
          textColor: "",
          // 填充文字
          texttitle: ""
        };

        this.$parent.$parent.MarsBoxareadata = JSON.stringify(geoJSON);
        this.$parent.$parent.fenceShapedata = formattedCoordinates;
        // this.$parent.submit("form");
        this.$parent.$parent.MarsBoxSwtich = false;
      } else {
        this.$parent.$parent.MarsBoxSwtich = false;
      }
    }
  },
  beforeDestroy() {
    // 组件销毁前，销毁地图
    if (this.map) {
      this.map.destroy();
    }
  }
};
</script>

<style lang="scss" scoped>
.mars3d-com {
  position: relative;

  .mars3d-box {
    position: absolute;
    right: 50px;
    top: 50px;

    width: 300px;
    height: 300px;
    background: #3c444f;
    z-index: 1000;
    padding: 0 15px 15px;
    display: flex;
    flex-direction: column;
    // position: relative;
    color: #ffffff;
    border-radius: 5px;

    .mars-3d-header {
      width: 100%;
      display: flex;
      height: 45px;
      line-height: 45px;
      padding-left: 15px !important;
      padding-right: 15px !important;
      background: #2a3653;
      border: 1px solid #344c7b;
      position: absolute;
      left: 0;
      padding: 0;
      box-sizing: border-box;
      border: 10px 10px 0 0 !important;
      display: flex;
      align-items: center;
      justify-content: space-between;

      i {
        cursor: pointer;
      }
    }

    .mars3d-Controls {
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      .mars3d-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .mar3d-title {
          width: 100px;
        }

        .mar3d-con {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>