<template>
    <div style="width: 45vw;height: 50vh;" id="myChart"></div>
    <div style="width: 45vw;height: 50vh;" id="chart2"></div>
    <img src="/static/index/aa.png" id="img" style="opacity: 0;" alt="">

</template>
<script setup>
import { ref, onMounted } from "vue"
import axios from "axios";
import * as echarts from 'echarts';
import "echarts-gl"


const initData = (data) => {

    var data3d = data.map(el => {
        return {
                                    name: el.properties.name,
                                    value:el.properties.center,
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'right',
                                            formatter: '{b}',
                                            color: 'white',
                                            fontWeight: "bold",
                                            fontSize: 18
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#FFB923'
                                        }
                                    },
                                }


    });
    return data3d
}



onMounted(() => {
    const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
        .then(function (response) {
let dot=document.getElementById('img')
            let mapJson = response.data
            let    chartOption= {
                    geo: {
                        backgroundColor: {
                            color: {
                                image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                                repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                            }
                        },
                        show: true,
                        map: `lz`,
                        left: '0',
                        top: `0%`,
                        right: '8%',
                        bottom: '0',
                        itemStyle: {
                            // normal: {
                            //     areaColor: `rgba(115, 219, 249, 0)`,
                            //     borderwidth: 3,
                            //     borderColor: `#37C1FD`,
                            //     shadowBlur: 20,
                            //     shadowOffsetY: 4,
                            //     shadowOffsetX: 4,
                            //     shadowColor: `#ddd`
                            // },
                            areaColor: {
                    image: dot,
                    repeat: 'repeat'
                },
                        }
                    },
                    series: [
                         {
                            type: `effectScatter`,
                            coordinateSystem: `geo`,
                            rippleEffect: { //涟漪特效
                                period: 4, //动画时间，值越小速度越快
                                brushType: `stroke`, //波纹绘制方式 stroke, fill
                                scale: 8 //波纹圆环最大限制，值越大波纹越大
                            },
                            itemStyle: {
                                // normal: {
                                //     color: `orange`,
                                //     shadowBlur: 2
                                // },
                               
                            },
                            symbolSize: 8,
                            data: [
                                { name: `三亚市`, value: [ 104.065735, 30.659462] },
                                { name: `五指山市`, value: [104.773447,29.352765] }
                                //[109.508268, 18.247872, `三亚市`],
                                //[109.516662, 18.776921, `五指山市`]
                            ]
                        }
                    ]
                }

            


            echarts.registerMap(`lz`, mapJson)
            // const myChart2 = document.getElementById('chart2')
            // const bg = echarts.init(myChart2);
            // bg.setOption(chartOption)

                const canvas = document.createElement(`canvas`)
               let bg = echarts.init(canvas, null, {
                    width: 1024,
                    height: 1024
                })
                bg.setOption(chartOption)
            const myChart = document.getElementById('myChart')
            const charts = echarts.init(myChart);
            let option = {




                // geo3D: {
                //         map: `海南`,
                //         viewControl: {
                //             autoRotate: false,
                //             distance: 180
                //         },
                //         shading: `color`,
                //         boundingCoords: [
                //             [-180, 90],
                //             [180, -90]
                //         ],
                //         colorMaterial: {
                //             detailTexture: this.bg, // 纹理贴图
                //             textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                //         },
                //         // 是否显示地面
                //         groundPlane: {
                //             show: false
                //         }
                //     },


                geo3D: {
                      
                    map: "luzhou",
                    shading: `color`,
        //            
                    roam: true,
                    itemStyle: {
                        // color: "#014281",
                        opacity: 0.9,
                        borderWidth: 0.4,
                        borderColor: "#000",
                        normal: {
                            areaColor: 'red',
                            borderWidth: 4, //设置外层边框
                            // borderColor: '#f8911b',
                        },
                        emphasis: {
                            show: false,
                            // areaColor: '#01215c'
                        }


                        // areaColor: '#fff'
                    },
                    viewControl: {
                        autoRotate: true,
                        autoRotateAfterStill: 3,
                        distance: 90,
                        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },

                    emphasis: {
                        disabled: true, //是否可以被选中
                        label: {
                            //移入时的高亮文本
                            show: true,
                        },
                        itemStyle: {
                            color:


                                "#B17049" //显示移入的区块变粉色

                        }
                    },
                    label: {
                        show: false,
                        // position: "bottom",
                        color: "white", //地图初始化区域字体颜色
                        fontSize: 14,
                        lineHeight: 16,
                        // textStyle: {
                        //     color: "#fff", //地图初始化区域字体颜色
                        //     fontSize: 12,
                        //     opacity: 1,
                        //     backgroundColor: "red",
                        // },
                    },
                    shading: "color",
                    light: {
                        //光照阴影
                        main: {
                            // color: "#fff", //光照颜色
                            intensity: 0.8, //光照强度
                            shadowQuality: 'high', //阴影亮度
                            shadow: true, //是否显示阴影
                            shadowQuality: "medium", //阴影质量 ultra //阴影亮度
                            alpha: 55,
                            beta: 10
                        },
                        ambient: {
                            intensity: 0.7
                        }
                    },
                    colorMaterial: {
                            detailTexture: bg, // 纹理贴图
                            textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                        },
                },
                series: [
                    {
                        type: "scatter3D",
                        coordinateSystem: "geo3D",
                        data: initData(mapJson.features),
                        // symbol: "circle",
                        symbolSize: 20,
                        // itemStyle: {
                        //     color: "transparent",
                        // },
                        label: {
                            show: true,
                            position: "top",
                            distance: -10,
                            formatter(params) {
                                return "2";
                            },

                            textStyle: {
                                // color: "transparent",
                                padding: [15, 20],
                                backgroundColor: {
                                    image: '/static/index/aa.png',
                                },
                                // backgroundColor:""
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                textStyle: {
                                    backgroundColor: {
                                        // image: '/static/index/aa.png',
                                    },
                                },
                            },
                        },

                    },

                ],


            };
            // 地图注册，第一个参数的名字必须和option.geo.map一致
            echarts.registerMap("luzhou", mapJson)

            charts.setOption(option);



        })



})






</script>