import { createApp } from 'vue'
import App from './App.vue'
import VMapCesium from 'vmap-cesium'
import 'vmap-cesium/dist/index.css'

// 引入 Element Plus（组件库依赖）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import locale from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)
app.use(ElementPlus, { locale })
app.use(VMapCesium)
app.mount('#app')

const mapConfig = {
  // 投影坐标系
  prj: "EPSG:4326",
  
  // Cesium相关配置
  vcConfig: {
    // Cesium库文件路径
    cesiumPath: '/public/Cesium/Cesium.js',
    // Cesium访问令牌
    accessToken: 'your-cesium-access-token',
    // 天地图Token
    tdtToken: 'your-tdt-token'
  },
  
  // 默认视图设置
  defaultView: {
    camera: {
      lon: 108.84,  // 经度
      lat: 35.15,   // 纬度
      height: 9500000,  // 高度
      heading: 0,   // 朝向角
      pitch: -89.74,  // 俯仰角
      roll: 0      // 翻滚角
    },
    zoom: 4,       // 默认缩放级别
    minZoom: 0,    // 最小缩放级别
    maxZoom: 18    // 最大缩放级别
  },
  
  // 默认底图层ID
  defaultBaseLayerId: "1",
  
  // 地形设置
  terrainProvider: {
    enabled: false, // 是否开启地形
    requestVertexNormals: false, // 是否开启顶点法线
    requestWaterMask: false // 是否开启水面遮罩
  },
  
  // 底图层配置
  baseLayers: [
    // 影像底图配置
    {
      id: "1",
      label: "影像",
      type: "tdt",
      children: [
        {
          id: "TDT_IMG",
          zIndex: 0,
          visible: true,
          type: "tdt",
          alpha: 1
        },
        {
          id: "TDT_IMG_LABEL",
          zIndex: 1,
          visible: true,
          type: "tdt",
          alpha: 1
        }
      ]
    },
    // 矢量底图配置
    {
      id: "2",
      label: "矢量",
      type: "tdt",
      children: [
        // 矢量底图图层配置...
      ]
    }
  ]
}

import { gwVizAPI } from 'gw-viz-cesium'

# 添加点
gwVizAPI.addPoint({
    id: "point", //id
    longitude: 108, //经度
    latitude: 38, //纬度
    height: 1000000, //高度
    name: "测试", //显示文字
    description: "测试", //描述
    color: "#df1919", //点颜色
    pixelSize: 10, //标注大小
    clampToGround: true, //是否贴地
    outlineColor: "#ef1a1a", //边框颜色
    outlineWidth: 2, //边框宽度
    image: "path", //图片路径
    imageScale: 0.1, //图片放大比例
    font: "14px Arial", //字体样式
    labelColor: "#f2f4f4", //标签文字颜色
    labelBackgroundColor: "#ffffff", //标签背景颜色
    showLabelBackground:true, //是否显示标签背景颜色
    labelPixelOffset: [0,-25], //标签偏移量
},(e)=>{
    console.log(e)
    console.log("添加成功")
})

#添加线
gwVizAPI.addPolyline({
    id:"polyline", //id
    coordinates:[[100,50,10],[100,10,1000]], //线数据经度、纬度、高度
    name: '测试线',//标签名称
    description: '测试线',//描述
    clampToGround:true,//是否贴地
    color: '#df3434', //线颜色
    width: 3, //线宽
    font: "14px Arial", //字体样式
    labelColor: "#f6e317", //标签字体颜色
    labelBackgroundColor: "#EC0000FC",//标签背景颜色
    showLabelBackground:true, //是否显示标签背景色
    labelPixelOffset: [0,-20], //偏移量
},(e)=>{
    console.log(e)
    console.log("添加成功")
})

#添加面
gwVizAPI.addPolygon({
    id:"polygon", //id
    //面数据
    coordinates:[],
    name: '北京', //标签文字
    description: '这是北京', //描述
    clampToGround:false,//是否贴地
    color: '#e61818',//面颜色
    outlineColor: '#77e82b',//边框线颜色
    outlineWidth:10000, //边框线宽度
    showOutline:true, //是否显示边框线
    height:1000000,//高度
    extrudedHeight:100,//多边形的挤压面与椭球面之间的距离
    font: "18px Arial",//字体样式
    labelColor: "#f6d817",//标签颜色
    labelBackgroundColor: "#0056d8",//标签背景色
    showLabelBackground:true,//是否显示标签背景色
    labelPixelOffset: [0,-20],//标签偏移量
},(e)=>{
    console.log(e)
    console.log("添加成功")
})

创建图层
const layer = gwVizAPI.createCustomLayer("layerId",true)  //参数1:图层id,参数2：图层是否显示 默认 true

#创建点实体
const entity = gwVizAPI.createPoint({
    id: "point", //id
    longitude: 108, //经度
    latitude: 38, //纬度
    height: 1000000, //高度
    name: "测试", //显示文字
    description: "测试", //描述
    color: "#df1919", //点颜色
    pixelSize: 10, //标注大小
    clampToGround: true, //是否贴地
    outlineColor: "#ef1a1a", //边框颜色
    outlineWidth: 2, //边框宽度
    image: "path", //图片路径
    imageScale: 0.1, //图片放大比例
    font: "14px Arial", //字体样式
    labelColor: "#f2f4f4", //标签文字颜色
    labelBackgroundColor: "#ffffff", //标签背景颜色
    showLabelBackground:true, //是否显示标签背景颜色
    labelPixelOffset: [0,-25], //标签偏移量
})
layer.add(entity) //把创建的点实体添加到图层layer中

#创建线实体
const entity = gwVizAPI.createPolyline({
    id:"polyline", //id
    coordinates:[[100,50,10],[100,10,1000]], //线数据经度、纬度、高度
    name: '测试线',//标签名称
    description: '测试线',//描述
    clampToGround:true,//是否贴地
    color: '#df3434', //线颜色
    width: 3, //线宽
    font: "14px Arial", //字体样式
    labelColor: "#f6e317", //标签字体颜色
    labelBackgroundColor: "#EC0000FC",//标签背景颜色
    showLabelBackground:true, //是否显示标签背景色
    labelPixelOffset: [0,-20], //偏移量
})
layer.add(entity) //把创建的线实体添加到layer图层中

#创建面实体
const entity = gwVizAPI.createPolygon({
    id:"polygon",//id
    //面数据
    coordinates:[],
    name: '北京', //标签文字
    description: '这是北京', //描述
    clampToGround:false,//是否贴地
    color: '#e61818',//面颜色
    outlineColor: '#77e82b',//边框线颜色
    outlineWidth:10000, //边框线宽度
    showOutline:true, //是否显示边框线
    height:1000000,//高度
    extrudedHeight:100,//多边形的挤压面与椭球面之间的距离
    font: "18px Arial",//字体样式
    labelColor: "#f6d817",//标签颜色
    labelBackgroundColor: "#0056d8",//标签背景色
    showLabelBackground:true,//是否显示标签背景色
    labelPixelOffset: [0,-20],//标签偏移量
})
layer.add(entity) //把创建的面实体添加到layer中

gwVizAPI.setCustomLayerVisible("layerId",true) //根据id设置图层显示隐藏

gwVizAPI.removeCustomLayer("layerId") //根据id移除图层

#添加地图遮罩
gwVizAPI.addMask({
    id:"mask", //id
    type:"Polygon", //类型  Polygon | MultiPolygon
    //遮罩挖空区域面数据
    coordinates:[],
    maskColor:'#00000082', //遮罩颜色
    areaColor: '#ffffff',//挖空区域颜色
    outline:false,//是否显示边框线
    outlineColor: '#e82bdf',//边框线颜色
    outlineWidth:0,//边框线宽度
    height: 0,//边框线高度
    extrudedHeight: 0 //多边形的挤压面与椭球面之间的距离
})

gwVizAPI.setMaskVisible("mask",true) //根据id设置地图遮罩显示隐藏

gwVizAPI.removeMaskById("mask") //根据id移除地图遮罩