<template>
    <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
             
    </div>
    
    
  </template>
  <script lang="ts" setup>
    import { ref, watch, onMounted, defineEmits } from 'vue';
    import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
    import * as mars3d from 'mars3d';
    import * as Cesium from 'mars3d-cesium';
  
    const props = defineProps([
      "resultItem",
      "layersData"
    ]);
    const emits = defineEmits([
    ]);

    let layersArr: any = [];
    const vChartRef: any = ref<HTMLElement>();
    let map: mars3d.Map; // 地图对象
    let graphicLayers = new mars3d.layer.GraphicLayer({
      isAutoEditing: false,
    });

    watch(
      () => props.resultItem,
      (newVal, oldVal) => {
        layersArr?.forEach((graphicLayer) => {
          graphicLayers.removeGraphic(graphicLayer);
        });
        handlerLocation(WktToGeojson(newVal.geom).coordinates[0][0][0]);
        let polygonGraphic = new mars3d.graphic.PolygonEntity({
          id: newVal.Id,
          positions: WktToGeojson(newVal.geom).coordinates[0],
          style: {
            clampToGround: true,
            fill: true,
            color: '#F0F3A2',
            outline: true,
            outlineStyle: {
              width: 6,
              materialOptions: {
                background: true,
                color: '#DCD859',
                dashLength: 36,
                maskLength: 10,
                centerPower: 0.1,
                dashPower: 0.2,
              },
            },
            label: {
              text: `${newVal.syrmc}`,
              font_size: 14,
              color: '#000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
        });
        layersArr.push(polygonGraphic)
        graphicLayers.addGraphic(polygonGraphic);
    },{
      deep: true,
      },
    )
    watch(
      () => props.layersData,
      (newVal, oldVal) => {
        console.log('newVal',newVal)
        
    },{
      deep: true,
      },
    )
    onMounted(() => {
      initMap();
    });
  
    const initMap = () => {
      map = new mars3d.Map(vChartRef.value, {
        scene: {
          center: {
            lat: 35.134608,
            lng: 118.29853,
            alt: 8306.3,
            heading: 360,
            pitch: -45,
          },
          scene3DOnly: false,
          shadows: false,
          removeDblClick: true,
          sceneMode: 3,
          showSun: true,
          showMoon: true,
          showSkyBox: true,
          showSkyAtmosphere: true,
          fog: true,
          fxaa: true,
          requestRenderMode: true,
          contextOptions: {
            requestWebgl1: false,
            webgl: {
              preserveDrawingBuffer: true,
              alpha: false,
              stencil: true,
              powerPreference: 'high-performance',
            },
          },
          globe: {
            depthTestAgainstTerrain: false,
            baseColor: '#546a53',
            showGroundAtmosphere: true,
            enableLighting: false,
          },
          cameraController: {
            zoomFactor: 3,
            minimumZoomDistance: 1,
            maximumZoomDistance: 50000000,
            enableRotate: true,
            enableTranslate: true,
            enableTilt: true,
            enableZoom: true,
            enableCollisionDetection: true,
            minimumCollisionTerrainHeight: 15000,
          },
        },
        control: {
          homeButton: false,
          baseLayerPicker: false,
          sceneModePicker: false,
          vrButton: false,
          fullscreenButton: false,
          navigationHelpButton: false,
          animation: false,
          timeline: false,
          infoBox: false,
          geocoder: false,
          selectionIndicator: false,
          showRenderLoopErrors: false,
          contextmenu: {
            hasDefault: false,
          },
          mouseDownView: false,
          zoom: {
            insertIndex: 1,
          },
          compass: {
            bottom: 'toolbar',
            left: '5px',
            rotation: true,
          },
          distanceLegend: {
            left: '10px',
            bottom: '2px',
          },
          locationBar: {
            crs: 'CGCS2000_GK_Zone_3',
            crsDecimal: 0,
            template:
              "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx}  纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
            cacheTime: 50,
          },
        },
        method: {
          templateValues: {
            dataServer: '//data.mars3d.cn',
            gltfServerUrl: '//data.mars3d.cn/gltf',
          },
        },
        terrain: {
          url: '//data.mars3d.cn/terrain',
          show: true,
          clip: true,
        },
        basemaps: [
          {
            id: 10,
            name: '地图底图',
            type: 'group',
            opacity: 1,
          },
          {
            id: 2021,
            pid: 10,
            name: '天地图影像',
            icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
            type: 'group',
            layers: [
              {
                name: '底图',
                type: 'tdt',
                layer: 'img_d',
                eventParent: {
                  id: 2021,
                  pid: 10,
                  name: '天地图影像',
                  icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
                  type: 'group',
                  layers: [
                    {
                      name: '底图',
                      type: 'tdt',
                      layer: 'img_d',
                      show: true,
                    },
                    {
                      name: '注记',
                      type: 'tdt',
                      layer: 'img_z',
                      show: true,
                    },
                  ],
                  show: true,
                },
                private: false,
                id: 'm-770c35e7-9054-4259-b5ee-c15f108becd0',
                opacity: 1,
                pid: 2021,
                parent: {
                  id: 2021,
                  pid: 10,
                  name: '天地图影像',
                  icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
                  type: 'group',
                  layers: [
                    {
                      name: '底图',
                      type: 'tdt',
                      layer: 'img_d',
                      show: true,
                    },
                    {
                      name: '注记',
                      type: 'tdt',
                      layer: 'img_z',
                      show: true,
                    },
                  ],
                  show: true,
                },
                zIndex: 1,
              },
              {
                name: '注记',
                type: 'tdt',
                layer: 'img_z',
                eventParent: {
                  id: 2021,
                  pid: 10,
                  name: '天地图影像',
                  icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
                  type: 'group',
                  layers: [
                    {
                      name: '底图',
                      type: 'tdt',
                      layer: 'img_d',
                      show: true,
                    },
                    {
                      name: '注记',
                      type: 'tdt',
                      layer: 'img_z',
                      show: true,
                    },
                  ],
                  show: true,
                },
                private: false,
                id: 'm-3b881368-574b-48a5-88b2-8b3c2c48fd62',
                opacity: 1,
                pid: 2021,
                parent: {
                  id: 2021,
                  pid: 10,
                  name: '天地图影像',
                  icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
                  type: 'group',
                  layers: [
                    {
                      name: '底图',
                      type: 'tdt',
                      layer: 'img_d',
                      show: true,
                    },
                    {
                      name: '注记',
                      type: 'tdt',
                      layer: 'img_z',
                      show: true,
                    },
                  ],
                  show: true,
                },
                zIndex: 2,
              },
            ],
            show: true,
            opacity: 1,
          },
        ],
        layers: [],
      });
      if (map) {
        map.addLayer(graphicLayers);
        handlerLocation([118.2958779, 35.1342553]);
        // 监听地图点击事件
        map.on(mars3d.EventType.click, function (event) {
           
        });
      }
    };
    // 图斑定位
    const handlerLocation = (lngLat) => {
      const position = Cesium.Cartesian3.fromDegrees(lngLat[0], lngLat[1]);
      map.flyToPoint(position);
    };
                       
  </script>
  <style>
  
  </style>