plantScreen/src/components/areaMap.vue

<template>
    <div style="width: 45vw;height: 50vh;" id="myChart"></div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import axios from "axios";
import * as echarts from 'echarts';
import "echarts-gl"


const initCharts = () => {


}



onMounted(() => {
    const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'

    var scatterData = [
        {
            name: "荔湾",
            value: [104.679127, 31.467673, 5]
        },
        // {
        //     name: "花都",
        //     value: [113.211184, 23.39205, 5]
        // },

        // {
        //     name: "天河",
        //     value: [113.335367, 23.13559, 5]
        // },
        // {
        //     name: "黄埔",
        //     value: [113.450761, 23.103239, 5]
        // },
        // {
        //     name: "南沙",
        //     value: [113.53738, 22.794531, 5]
        // }
    ];
    var data3d = scatterData.map(el => {
        return {
            name: el.name,
            value: el.value,
        }
    });

    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
        .then(function (response) {
            let mapJson = response.data
            let data = mapJson.features.map((item) => {
                return {
                    name: item.properties.name,
                };
            });
            console.log(data, 666)

            const myChart = document.getElementById('myChart')
            const charts = echarts.init(myChart);
            let option = {
                geo3D: {
                    map: "luzhou",
                    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: true,
                        // position: "bottom",
                        color: "white", //地图初始化区域字体颜色
                        fontSize: 14,
                        lineHeight: 16,
                        // textStyle: {
                        //     color: "#fff", //地图初始化区域字体颜色
                        //     fontSize: 12,
                        //     opacity: 1,
                        //     backgroundColor: "red",
                        // },
                    },
                    shading: "lambert",
                    light: {
                        //光照阴影
                        main: {
                            // color: "#fff", //光照颜色
                            intensity: 0.8, //光照强度
                            shadowQuality: 'high', //阴影亮度
                            shadow: true, //是否显示阴影
                            shadowQuality: "medium", //阴影质量 ultra //阴影亮度
                            alpha: 55,
                            beta: 10
                        },
                        ambient: {
                            intensity: 0.7
                        }
                    }
                },
                series: [
                    {
                        type: "scatter3D",
                        coordinateSystem: "geo3D",
                        data: data3d,
                        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',
                                },
                            },
                        },
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         textStyle: {
                        //             backgroundColor: {
                        //                 // image: '/static/index/aa.png',
                        //             },
                        //         },
                        //     },
                        // },

                    },

                ],


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

            charts.setOption(option);



        })



})






</script>