// 加载行政区划
const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    name: "行政区划",
    url: "https://geo.datav.aliyun.com/areas_v3/bound/330110.json",
    flyTo: true,
    // 可以通过配置symbol参数来指定渲染的矢量数据类型和样式。
    mask: true,
    symbol: {
        type: "polygon",
        styleOptions: {
            color: "#000000",
            opacity: 0.5,
            width: 2
        }
    }
})
map.addLayer(geoJsonLayer)

// 加载行政区划
const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    name: "行政区划",
    url: "https://geo.datav.aliyun.com/areas_v3/bound/330110.json",
    flyTo: true,
    // 可以通过配置symbol参数来指定渲染的矢量数据类型和样式。
    mask: true,
    symbol: {
        type: "polygon",
        styleOptions: {
            color: "#000000",
            opacity: 0.5,
            width: 2,
            // 增加贴地属性，解决掩膜问题
            clampToGround: true
        }
    }
})
map.addLayer(geoJsonLayer)

// 清空已有图层
clearMap()

// 构建完整的geojson
const geojson = { 
    type: "FeatureCollection",  
    features: showFeatures
}
console.log(geojson)

// 重新绘制图层
rfdwLayer = new mars3d.layer.GeoJsonLayer({
name: "点位",
data: geojson,
symbol: (attr, style, feature) => {
  return {
    image: import.meta.env.VITE_BASE_URL + "img/renfang.png",
    scale: 1,
    scaleByDistance: true,
    scaleByDistance_far: 20000,
    scaleByDistance_farValue: 0.5,
    scaleByDistance_near: 1000,
    scaleByDistance_nearValue: 1,
    verticalOrigin: 1,
    horizontalOrigin: 0,
    // clampToGround: true,
    label: {
      text: "{JZMC}",
      font_size: 18,
      color: "#ffffff",
      verticalOrigin: mars3dCesium.VerticalOrigin.CENTER,
      outline: true,
      outlineColor: "#000000",
      pixelOffsetY: -35,
      scaleByDistance: true,
      scaleByDistance_far: 80000,
      scaleByDistance_farValue: 0.5,
      scaleByDistance_near: 1000,
      scaleByDistance_nearValue: 1,
      distanceDisplayCondition: true,
      distanceDisplayCondition_far: 5000,
      distanceDisplayCondition_near: 0
    }
  }
})
mainmap.addLayer(rfdwLayer)

// @ts-nocheck
import * as mars3d from "mars3d"
// 增加下面这个东西
import * as Cesium from "mars3d-cesium"

"mars3d": "~3.5.0",
"mars3d-cesium": "^1.103.2",
"vue": "^3.2.27"

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        mars3d: ['mars3d'],
        'mars3d-cesium': ["mars3d-cesium"]
      }
    },
    target: 'esnext', 
    minify: 'esbuild' // 混淆器，terser构建后文件体积更小
  },
}

import { vitePluginMars3d } from "vite-plugin-mars3d"

// vite plugins 配置
plugins: [
  vue(),
  vitePluginMars3d(),
],

import { mars3dPlugin } from 'vite-plugin-mars3d';

// vite plugins 配置
plugins: [
  vue(),
  mars3dPlugin(),
],

typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, (window.mars3d || require('mars3d')), (window.h337 || require('@mars3d/heatmap.js'))) :
typeof define === 'function' && define.amd ? define(['exports', 'mars3d', '@mars3d/heatmap.js'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["mars3d-heatmap"] = {}, global.mars3d, global.h337));

// 导入mars3d插件（按需使用，需要先npm install mars3d-heatmap @mars3d/heatmap.js）
import 'mars3d-heatmap';

/**
 * 错误的示例
 */
// 城市点位图标
const symbolList = [
  'image:' + import.meta.env.VITE_PUBLIC_PATH + 'resource/map/symbol1.png',
  'image:' + import.meta.env.VITE_PUBLIC_PATH + 'resource/map/symbol2.png',
];

// 线上的动态运动点图标
const pointSymbol = [
  'image:' + import.meta.env.VITE_PUBLIC_PATH + 'resource/map/linePoint1.png',
  'image:' + import.meta.env.VITE_PUBLIC_PATH + 'resource/map/linePoint2.png',
];

/**
 * 正确的示例
 */
// 城市点位图标
const symbolList = [
  'image://' + import.meta.env.VITE_PUBLIC_PATH + 'resource/map/symbol1.png',
  'image://' + import.meta.env.VITE_PUBLIC_PATH + 'resource/map/symbol2.png',
];

// 线上的动态运动点图标
const pointSymbol = [
  'image://' + import.meta.env.VITE_PUBLIC_PATH + 'resource/map/linePoint1.png',
  'image://' + import.meta.env.VITE_PUBLIC_PATH + 'resource/map/linePoint2.png',
];

/**
 * 显示信息框
 * @param graphic
 */
function showInfoWindow(data) {
  console.log(data);
  let options = data.options;
  let position = options.position;
  const graphic = new mars3d.graphic.DivGraphic({
    position: position,
    style: {
      html: `<div class="marspanel">
        <div class="marspanel-text">大湖名城,创新高地</div>
    </div>`,
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
      clampToGround: true,
      // 高亮时的样式
      highlight: {
        // type: mars3d.EventType.click,
        className: 'marspanel-highlight',
      },
    },
  });

  // 进行坐标转换
  let mainmap = window.mainmap;
  let cartesian3 = mars3d.LngLatPoint.toCartesian(position);
  var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(mainmap.scene, cartesian3);

  let mouseClick = false; // 鼠标是否点击
  let startX = 0;
  let startY = 0;
  graphic.on(mars3d.EventType.add, function (e) {
    const container = e.graphic.container; // popup对应的DOM
    const btnStatus1 = container.querySelector('.marspanel');
    console.log(btnStatus1);
    if (btnStatus1) {
      // 启动面板移动
      btnStatus1.addEventListener('mousedown', (e) => {
        e.stopPropagation();
        startX = e.clientX;
        startY = e.clientY;
        mouseClick = true;
      });
      // 停止面板移动
      btnStatus1.addEventListener('mouseup', (e) => {
        e.stopPropagation();
        mouseClick = false;
      });
    }
  });
  // 监听鼠标移动，修改div的位置
  mainmap.on(mars3d.EventType.mouseMove, function (e) {
    if (mouseClick) {
      let endPostion = e.endPosition;
      let endX = endPostion.x;
      let endY = endPostion.y;
      let offsetX = endX - startX;
      let offsetY = endY - startY;

      // 计算最终的坐标
      let moveX = windowPosition.x + offsetX;
      let moveY = windowPosition.y + offsetY;

      console.log(offsetX, offsetY, moveX, moveY);
      // 将屏幕坐标转为笛卡尔坐标
      var cartesian3 = mars3d.PointUtil.getCurrentMousePosition(mainmap.scene, new Cesium.Cartesian2(moveX, moveY), null);
      console.log(cartesian3);
      let lngLat = mars3d.LngLatPoint.fromCartesian(cartesian3);
      console.log(lngLat);
      // 设置最新的位置
      graphic.position = lngLat;
    }
  });
  graphicLayer.addGraphic(graphic);
}

// 屏幕坐标 转换为 笛卡尔空间直角坐标
var cartesian3 = mars3d.PointUtil.getCurrentMousePosition(map.scene, windowPosition);

//笛卡尔空间直角坐标 转换为 屏幕坐标
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(map.scene, cartesian3);

//笛卡尔空间直角坐标   转换为   地理坐标(弧度制)
var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);

//笛卡尔空间直角坐标   转换为   地理坐标(经纬度)
var point = mars3d.LatLngPoint.fromCartesian(cartesian3);

//地理坐标(弧度制)   转换为   笛卡尔空间直角坐标
var cartesian3 = Cesium.Cartesian3.fromRadians(lng, lat, height); //lng\lat为弧度制

//地理坐标(经纬度)  转换为  笛卡尔空间直角坐标
var cartesian3 = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); 

import * as mars3d from 'mars3d';

/* 地图放大 */
const zoomOutHandler = () => {
  let map = window.mainmap;
  let lngLat = map.getCenter();
  // 镜头拉进
  map.flyToPoint(new mars3d.LngLatPoint(lngLat.lng, lngLat.lat, -10000));
};
/* 地图缩小 */
const zoomInHandler = () => {
  let map = window.mainmap;
  let lngLat = map.getCenter();
  // 镜头拉进
  map.flyToPoint(new mars3d.LngLatPoint(lngLat.lng, lngLat.lat, 10000));
};

import { mars3dPlugin } from 'vite-plugin-mars3d/dist/index';

import { defineConfig } from 'vite'
import requireTransform from 'vite-plugin-require-transform' // 1. 引入插件

export default defineConfig({
    plugins: [
        // 2. 添加以下代码
        requireTransform({
            fileRegex: /.js$|.vue$/,
        }),
    ],
})