<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive } from "vue";
  import * as mars3d from "mars3d";
  import {Cesium} from "mars3d";

  const creditHtml = `自然资源部 - <span>审图号：GS(2023)336号</span>
- 甲测资字1100471 - <a href="https://www.tianditu.gov.cn/about/contact.html?type=2" target="_blank" trace="tos">服务条款</a> `

  const mapOptions = {
    // basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
    scene: {
      center: { lat: 31.675177, lng: 117.323257, alt: 81193, heading: 359, pitch: -79 },
      highDynamicRange: false
    },
    // 方式1：在创建地球前的参数中配置
    basemaps: [
      {
        name: "天地图影像(EPSG:3857)",
        icon: "img/basemaps/tdt_img.png",
        type: "tdt",
        layer: "img_d",
        key: mars3d.Token.tiandituArr,
        show: true,
        credit: creditHtml
      },
      {
        name: "天地图电子(EPSG:3857)",
        icon: "img/basemaps/tdt_vec.png",
        type: "group",
        layers: [
          { name: "底图", type: "tdt", layer: "vec_d", key: mars3d.Token.tiandituArr },
          { name: "注记", type: "tdt", layer: "vec_z", key: mars3d.Token.tiandituArr }
        ],
        credit: creditHtml
      },
      {
        name: "天地图地形(EPSG:3857)",
        icon: "img/basemaps/tdt_ter.png",
        type: "group",
        layers: [
          { name: "底图", type: "tdt", layer: "ter_d", key: mars3d.Token.tiandituArr },
          {
            name: "注记",
            type: "tdt",
            layer: "ter_z",
            key: mars3d.Token.tiandituArr,
            // 表示缩小和放大瓦片数据的过滤方式。默认值为LINEAR线性结构，大部分地图调整为最近方式过滤能够有效提升地图清晰度。
            minificationFilter: Cesium.TextureMinificationFilter.NEAREST,
            magnificationFilter: Cesium.TextureMinificationFilter.NEAREST
          }
        ],
        credit: creditHtml
      },
      {
        name: "天地图影像(EPSG:4326)",
        icon: "img/basemaps/tdt_img.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "img_d",
            crs: "EPSG:4326",
            key: mars3d.Token.tiandituArr
          },
          {
            name: "注记",
            type: "tdt",
            layer: "img_z",
            crs: "EPSG:4326",
            key: mars3d.Token.tiandituArr
          }
        ],
        credit: creditHtml
      },
      {
        name: "天地图电子(EPSG:4326)",
        icon: "img/basemaps/tdt_vec.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "vec_d",
            crs: "EPSG:4326",
            key: mars3d.Token.tiandituArr
          },
          {
            name: "注记",
            type: "tdt",
            layer: "vec_z",
            crs: "EPSG:4326",
            key: mars3d.Token.tiandituArr
          }
        ],
        credit: creditHtml
      },
      {
        name: "天地图地形(EPSG:4326)",
        icon: "img/basemaps/tdt_ter.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "ter_d",
            crs: "EPSG:4326",
            key: mars3d.Token.tiandituArr
          },
          {
            name: "注记",
            type: "tdt",
            layer: "ter_z",
            crs: "EPSG:4326",
            key: mars3d.Token.tiandituArr
          }
        ],
        credit: creditHtml
      },

      {
        name: "天地图影像(英文)",
        icon: "img/basemaps/tdt_img.png",
        type: "group",
        layers: [
          { name: "底图", type: "tdt", layer: "img_d", key: mars3d.Token.tiandituArr },
          { name: "底图", type: "tdt", layer: "img_e", key: mars3d.Token.tiandituArr }
        ],
        credit: creditHtml
      },
      {
        name: "天地图电子(英文)",
        icon: "img/basemaps/tdt_vec.png",
        type: "group",
        layers: [
          { name: "底图", type: "tdt", layer: "vec_d", key: mars3d.Token.tiandituArr },
          { name: "底图", type: "tdt", layer: "vec_e", key: mars3d.Token.tiandituArr }
        ],
        credit: creditHtml
      }
    ]
  };
  onMounted(() => {
    const map = new mars3d.Map("mars3dContainer", mapOptions);
  });
</script>
<style lang="less" scoped>
</style>


