<!--
*@description mars3d
*@fileName mars3d.vue
*@author 大眼睛
*@date 2023/05/17 10:01:37
!-->
<template>
  <div class="mars" id="mars3dContainer">
    <div class="formclass">
      <el-button @click="btn" type="primary">获取相机视角</el-button>
      <el-button @click="ggbtn" type="primary">故宫</el-button>
      <el-button @click="gouxuan" type="primary">检查站</el-button>
      <el-button @click="qxsy" type="primary">倾斜摄影</el-button>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="经度值">
          <el-input v-model="form.lng" />
        </el-form-item>
        <el-form-item label="纬度值">
          <el-input v-model="form.lat" />
        </el-form-item>
        <el-form-item label="高度值">
          <el-input v-model="form.alt" />
        </el-form-item>
        <el-form-item label="方向角">
          <el-input v-model="form.heading" />
        </el-form-item>
        <el-form-item label="俯仰角">
          <el-input v-model="form.pitch" />
        </el-form-item>
        <el-form-item label="翻滚角">
          <el-input v-model="form.roll" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  // 组件传参
  props: {},

  data() {
    return {
      map: null,
      form: {
        lng: "",
        lat: "",
        alt: "",
        heading: "",
        pitch: "",
        roll: "",
      },
      zhnachazhan: {
        name: "镇界",
        type: "wms",
        url: "http://175.27.168.120:8080/geoserver/feixianfanghuo/wms",
        layers: "feixianfanghuo:town",
        crs: "EPSG:4326",
        noCenter: true,
        parameters: {
          transparent: "true",
          format: "image/png",
        },
        showClickFeature: false,
        pickFeatureStyle: {
          showTime: 10000,
          fill: true,
          color: "#2deaf7",
          opacity: 1,
          outline: true,
          outlineWidth: 5,
          outlineColor: "#2deaf7",
          outlineOpacity: 1,
          clampToGround: true,
        },
        highlight: {
          showTime: 5000,
          fill: true,
          color: "#2deaf7",
          opacity: 0.6,
          outline: true,
          outlineWidth: 3,
          outlineColor: "#e000d9",
          outlineOpacity: 1,
          clampToGround: true,
        },
        popup: [
          {
            field: "DLMC",
            name: "地类名称",
          },
          {
            field: "",
            name: "线路材质",
          },
          {
            field: "DY",
            name: "线路电压",
          },
        ],
        show: true,
        flyTo: true,
      },

      data: [
        {
          id: 10,
          name: "影像",
          pid: 0,
        },
        {
          pid: 10,
          id: 1,
          name: "天地图注记",
          type: "tdt",
          layer: "img_z",
          key: ["b6585bc41ee16251dbe6b1af64f375d9"],
          show: false,
        },
        {
          pid: 10,
          id: 2,
          name: "高清影像2022年",
          type: "wms",
          url: "http://175.27.168.120:8080/geoserver/feixian/wms",
          layers: "feixian:yingxiang",
          crs: "EPSG:4326",
          parameters: {
            transparent: "true",
            format: "image/png",
          },
          showClickFeature: true,
          pickFeatureStyle: {
            clampToGround: true,
          },
          mapSplit: false,
          noCenter: true,
          show: false,
        },
        {
          pid: 10,
          id: 3,
          name: "高清影像2023年",
          type: "wms",
          url: "http://175.27.168.120:8080/geoserver/feixian/wms",
          layers: "feixian:yingxiang2023",
          crs: "EPSG:4326",
          parameters: {
            transparent: "true",
            format: "image/png",
          },
          showClickFeature: true,
          pickFeatureStyle: {
            clampToGround: true,
          },
          mapSplit: false,
          noCenter: true,
          show: false,
        },
        {
          id: 8090,
          pid: 0,
          name: "行政区划",
          type: "group",
        },
        {
          id: 112,
          pid: 8090,
          type: "geojson",
          name: "检查站",
          url: "http://175.27.168.120:8080/geoserver/pingyixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=pingyixian%3A86fanghuozhan&maxFeatures=5000&outputFormat=application%2Fjson",
          noCenter: true,
          symbol: {
            styleOptions: {
              image: "/img/center.png",
              scale: 0.25,
              scaleByDistance: true,
              scaleByDistance_far: 20000,
              scaleByDistance_farValue: 0.5,
              scaleByDistance_near: 1000,
              scaleByDistance_nearValue: 1,
              verticalOrigin: 1,
              horizontalOrigin: 0,
              clampToGround: true,
              label: {
                text: "{name}",
                font_size: 15,
                color: "#ffffff",
                outline: true,
                outlineColor: "#000000",
                pixelOffsetY: 10,
                scaleByDistance: true,
                scaleByDistance_far: 80000,
                scaleByDistance_farValue: 0.5,
                scaleByDistance_near: 1000,
                scaleByDistance_nearValue: 1,
                distanceDisplayCondition: true,
                distanceDisplayCondition_far: 80000,
                distanceDisplayCondition_near: 0,
              },
            },
          },
          popup: [
            {
              field: "DLMC",
              name: "地类名称",
            },
            {
              field: "",
              name: "线路材质",
            },
            {
              field: "DY",
              name: "线路电压",
            },
          ],
          show: false,
          flyTo: false,
        },
        {
          pid: 8090,
          id: 7,
          type: "geojson",
          name: "县界",
          url: "/json/xianjie.json",
          noCenter: true,
          symbol: {
            styleOptions: {
              fill: false,
              opacity: 0,
              outline: true,
              outlineColor: "#FED976",
              outlineWidth: 3,
              outlineOpacity: 1,
              perPositionHeight: false,
              clampToGround: true,
              label: {
                text: "{name}",
                opacity: 1,
                font_size: 30,
                color: "#ffffff",
                outline: true,
                outlineColor: "#000000",
                outlineWidth: 3,
                scaleByDistance: true,
                scaleByDistance_far: 2743804,
                scaleByDistance_farValue: 0.3,
                scaleByDistance_near: 10000,
                scaleByDistance_nearValue: 1,
                distanceDisplayCondition: true,
                distanceDisplayCondition_far: 2743804,
                distanceDisplayCondition_near: 0,
              },
            },
          },
          popup: "{name}",
          show: true,
          flyTo: false,
        },
        {
          pid: 8090,
          id: 8,
          name: "镇界",
          type: "wms",
          url: "http://175.27.168.120:8080/geoserver/feixianfanghuo/wms",
          layers: "feixianfanghuo:town",
          crs: "EPSG:4326",
          noCenter: true,
          parameters: {
            transparent: "true",
            format: "image/png",
          },
          showClickFeature: false,
          pickFeatureStyle: {
            showTime: 10000,
            fill: true,
            color: "#2deaf7",
            opacity: 1,
            outline: true,
            outlineWidth: 5,
            outlineColor: "#2deaf7",
            outlineOpacity: 1,
            clampToGround: true,
          },
          highlight: {
            showTime: 5000,
            fill: true,
            color: "#2deaf7",
            opacity: 0.6,
            outline: true,
            outlineWidth: 3,
            outlineColor: "#e000d9",
            outlineOpacity: 1,
            clampToGround: true,
          },
          popup: [
            {
              field: "DLMC",
              name: "地类名称",
            },
            {
              field: "",
              name: "线路材质",
            },
            {
              field: "DY",
              name: "线路电压",
            },
          ],
          show: false,
          flyTo: false,
        },
        {
          pid: 8090,
          id: 9,
          name: "村界",
          type: "wms",
          url: "http://175.27.168.120:8080/geoserver/feixianfanghuo/wms",
          layers: "feixianfanghuo:village",
          crs: "EPSG:4326",
          noCenter: true,
          parameters: {
            transparent: "true",
            format: "image/png",
          },
          showClickFeature: false,
          pickFeatureStyle: {
            showTime: 10000,
            fill: true,
            color: "#2deaf7",
            opacity: 1,
            outline: true,
            outlineWidth: 5,
            outlineColor: "#2deaf7",
            outlineOpacity: 1,
            clampToGround: true,
          },
          highlight: {
            showTime: 5000,
            fill: true,
            color: "#2deaf7",
            opacity: 0.6,
            outline: true,
            outlineWidth: 3,
            outlineColor: "#e000d9",
            outlineOpacity: 1,
            clampToGround: true,
          },
          popup: [
            {
              field: "DLMC",
              name: "地类名称",
            },
            {
              field: "",
              name: "线路材质",
            },
            {
              field: "DY",
              name: "线路电压",
            },
          ],
          show: false,
          flyTo: false,
        },
      ],
    };
  },

  // 组件注册
  components: {},

  // 数据监听
  watch: {},

  // 计算属性
  compute: {},
  created() {
    // this.data = this.treeArray(this.data, {
    //   childrenName: "children",
    //   idName: "id",
    //   parentIdName: "pid",
    //   parentId: 0,
    // });
    this.$nextTick(() => {
      this.initMap();
    });
  },

  mounted() {},

  // 方法实现
  methods: {
    initMap() {
      let that = this;
      // 创建三维地球场景
      that.map = new mars3d.Map("mars3dContainer", {
        scene: {
          center: {
            lat: 35.376128,
            lng: 118.036717,
            alt: 2779,
            heading: 1.3,
            pitch: -20.5,
          },
          showSun: true,
          showMoon: true,
          showSkyBox: true,
          showSkyAtmosphere: true, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
          fog: true,
          fxaa: true,
          globe: {
            showGroundAtmosphere: true, // 关闭大气（球表面白蒙蒙的效果）
            depthTestAgainstTerrain: false,
            baseColor: "#546a53",
          },
          cameraController: {
            zoomFactor: 3.0,
            minimumZoomDistance: 1,
            maximumZoomDistance: 50000000,
            enableRotate: true,
            enableZoom: true,
          },
        },
        control: {
          baseLayerPicker: true, // basemaps底图切换按钮
          homeButton: true, // 视角复位按钮
          sceneModePicker: true, // 二三维切换按钮
          navigationHelpButton: true, // 帮助按钮
          fullscreenButton: true, // 全屏按钮
          contextmenu: { hasDefault: true }, // 右键菜单
        },
        terrain: {
          url: "//data.mars3d.cn/terrain",
          show: true,
        },
        basemaps: [
          {
            name: "天地图影像",
            icon: "img/basemaps/tdt_img.png",
            type: "tdt",
            layer: "img_d",
            show: true,
          },
        ],
        layers: [this.zhnachazhan],
      });
      // that.jcz();
      that.form = that.map.getCameraView();
      that.form.roll = 0;
      that.map.on("cameraChanged", function (event) {
        that.form = that.map.getCameraView({ simplify: false });
      });
      return that.map;
    },

    jcz() {
      let graphicLayer = new mars3d.layer.GeoJsonLayer(this.zhnachazhan);
      this.map.addLayer(graphicLayer);
    },
    btn() {
      console.log(111111);
      const camera = this.map.getCameraView();
      this.form = camera;
      console.log(JSON.stringify(camera), "当前视角参数");
    },
    ggbtn() {
      this.map.setCameraView({
        lat: 39.904128,
        lng: 116.391643,
        alt: 1054,
        heading: 0,
        pitch: -39,
      });
    },
    gouxuan() {
      // this.map.removeLayer();
      this.zhnachazhan.show = true;
      this.initMap();
      console.log(this.zhnachazhan);
    },
    qxsy() {
      this.map.removeLayer();
      let tiles3dLayer = new mars3d.layer.TilesetLayer({
        name: "文庙",
        url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
        position: { alt: 80.6 },
        maximumScreenSpaceError: 1,
        maximumMemoryUsage: 1024,
        // "skipLevelOfDetail": true,
        // "loadSiblings": true,
        // "cullRequestsWhileMoving": true,
        // "cullRequestsWhileMovingMultiplier": 10,
        // "preferLeaves": true,
        // "dynamicScreenSpaceError": true,
        // "preloadWhenHidden": true,
        // highlight: {
        //   all: true, //全部整体高亮，false时是构件高亮
        //   type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
        //   color: "#00ffff",
        // },
        // distanceDisplayCondition_far: 3000,
        enableDebugWireframe: true, // 是否可以进行三角网的切换显示
        center: {
          lat: 33.589536,
          lng: 119.032216,
          alt: 145.08,
          heading: 3.1,
          pitch: -22.9,
          roll: 0,
        },
        flyTo: true,
      });
      this.map.addLayer(tiles3dLayer);

      // 加载的事件 只执行一次
      tiles3dLayer.on(mars3d.EventType.initialTilesLoaded, function (event) {
        console.log("触发initialTilesLoaded事件", event);
      });
    },
    // // 数据数据.变成树结构
    // treeArray(
    //   flatData,
    //   {
    //     childrenName = "children",
    //     idName = "id",
    //     parentIdName = "parentId",
    //     parentId = 0,
    //   } = {}
    // ) {
    //   // 循环所有项
    //   return flatData.filter((father) => {
    //     // 计算每一项的子级数组
    //     const children = flatData.filter((child) => {
    //       return (
    //         father[idName] &&
    //         child[parentIdName] &&
    //         father[idName] === child[parentIdName]
    //       );
    //     });
    //     // 如果存在子级，则给父级添加一个children属性，并赋值
    //     if (children && children.length) {
    //       father[childrenName] = children;
    //     }
    //     // 返回第一层
    //     return String(father[parentIdName]) === String(parentId);
    //   });
    // },
  },
};
</script>

<style scoped>
.mars {
  width: 1900px;
  height: 1010px;
  position: relative;
}
.mars ::v-deep canvas {
  width: 1900px;
  height: 1010px;
}
.formclass {
  width: 300px;
  height: 500px;
  position: absolute;
  top: 0;
  right: 0;
  background: #ffffff;
  z-index: 100;
}
</style>
