<template>
    <div ref="vChartRef" id="mars3d-container" class="mars3d-container"></div>
</template>
<script lang="ts" setup>
import {ref,onMounted, defineEmits} from 'vue'

import * as mars3d from "mars3d";

const emits = defineEmits(['mapOnLoad'])
let map: mars3d.Map; // 地图对象
let graphicLayer = null;

const vChartRef = ref<HTMLElement>()


onMounted(()=>{
    initMap();
})



const initMap = ()=>{
    map = new mars3d.Map(vChartRef.value, 
    {
        "scene": {
            "center": {
                "lat": 35.362625,
                "lng": 118.033886,
                "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": true,
            "baseLayerPicker": false,
            "sceneModePicker": true,
            "vrButton": false,
            "fullscreenButton": true,
            "navigationHelpButton": true,
            "animation": false,
            "timeline": false,
            "infoBox": false,
            "geocoder": false,
            "selectionIndicator": false,
            "showRenderLoopErrors": true,
            "contextmenu": {
                "hasDefault": true
            },
            "mouseDownView": true,
            "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": []
    });
    emits('mapOnLoad',map)

    
}

// 

const  bindLayerContextMenu =()=> {
  graphicLayer.bindContextMenu([
        {
        text: "删除对象",
        icon: "fa fa-trash-o",
        show: (event) => {
            const graphic = event.graphic
            if (!graphic || graphic.isDestroy || graphic.isPrivate || graphic.graphicIds) {
            return false
            } else {
            return true
            }
        },
        callback: (e) => {
            const graphic = e.graphic
            if (!graphic) {
            return
            }
            const parent = graphic.parent // 右击是编辑点时
            graphicLayer.removeGraphic(graphic)
            if (parent) {
            graphicLayer.removeGraphic(parent)
            }
        }
        },
        {
            text: "停止编辑对象",
            icon: "fa fa-edit",
            show: function (e) {
                const graphic = e.graphic
                if (!graphic || !graphic.hasEdit) {
                return false
                }
                return graphic.isEditing
            },
            callback: (e) => {
                const graphic = e.graphic
                if (!graphic) {
                return false
                }
                if (graphic) {
                graphic.stopEditing()
                }
            }
        },
  ])
}

const drawPint = async ()=>{
    const graphic = await graphicLayer.startDraw({
        type: "polylineP",
        style: {
        pixelSize: 12,
        color: "#3388ff",
        label: {
            // 不需要文字时，去掉label配置即可
            text: "可以同时支持文字",
            font_size: 20,
            color: "#ffffff",
            outline: true,
            outlineColor: "#000000",
            pixelOffsetY: -20
        }
        }
    })

        console.log("标绘完成", graphic.toJSON())
}
</script>
<style scoped>
.mars3d-container{
    width:100%;
    height:100%;
    background:red;
    
}
</style>