Echarts 3D地图 标记实现

主要代码
3d地图实现

                const option = {
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 1,
                        calculable: true,
                        realtime: false,
                        inRange: {
                            color: ['#ddd', '#0a59ca']
                        },
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    geo3D: {
                        map: 'shanxi',
                        roam: true,
                        itemStyle: {
                            color: '#0a59ca',
                            opacity: 1,
                            borderWidth: 0.8,
                            borderColor: 'rgb(62,215,213)'
                        },
                        label: {
                            show: true,
                            distance: 0,
                            textStyle: {
                                color: '#ffffff', //地图初始化区域字体颜色
                                fontSize: 16,
                                opacity: 1,
                                backgroundColor: 'rgba(0,0,0,0)'
                                //backgroundColor: 'rgba(53,171,199,0)'
                            },
                        },
                        //shading: 'lambert',
                        light: { //光照阴影
                            main: {
                                color: '#fff', //光照颜色
                                intensity: 1.2, //光照强度
                                //shadowQuality: 'high', //阴影亮度
                                shadow: false, //是否显示阴影
                                alpha: 55,
                                beta: 10

                            },
                            ambient: {
                                intensity: 0.3
                            }
                        },
                        viewControl: {
                            panMouseButton: 'right',
                            panSensitivity: 1,
                            distance: 190,
                            center: [-15, -40, 0],
                            rotateMouseButton: 'left',
                            minDistance: 1,
                            beta: 0,
                            alpha: 45
                        },
                    },
                    series: seriesList,
                    animation: false
                };

类百度地图标记实现

                const data1 = dataList.map((item, index) => {
                    return {
                        name: item.title, value: [item.lng, item.lat, 0], id: item.relationid,
                        label: {
                            show: true,
                            position: "bottom",
                            distance: -57,
                            formatter(params) {
                                return " ";
                            },
                            textStyle: {
                                color: "transparent",
                                padding: [10, 13],
                                backgroundColor: {
                                    image: res[index],
                                },
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: "bottom",
                                distance: -57,
                                formatter(params) {
                                    return " ";
                                },
                                textStyle: {
                                    color: "transparent",
                                    padding: [10, 13],
                                    backgroundColor: {
                                        image: res[index],
                                    },
                                    radius:'100%'
                                },
                            }
                        }
                    }
                })
                seriesList.push({
                    name: "自定义图标",
                    type: "scatter3D",
                    coordinateSystem: "geo3D",
                    data: data1,
                    symbol: '',
                    symbolSize: [0, 50],
                    itemStyle: {
                        color: 'red',
                        borderColor:'transparent',
                        borderWidth:15
                    }
                })

补充一下图标的实现方法，使用canvas合成代码如下

import PositionBg from "./position.png";
export default function (URL) {
    // 假设你已经有了一个Image对象（例如从文件输入或网络加载） 
    return new Promise((resolve, reject) => {

        let img = new Image();
        let img1 = new Image();
        const url = URL ? URL: PositionBg;
        const width = 40
        const height = 50
        img1.src = PositionBg; // 替换为你的图片路径 
        img.crossOrigin = '*';
        // start
        // 创建一个Canvas元素  
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');

        // 设置Canvas的大小（这里假设与图片大小相同）  
        canvas.width = width;
        canvas.height = height;
        ctx.strokeStyle = "rgba(0,0,0,0)";
        ctx.strokeRect(0, 0, width, height);

        ctx.save()
        // 设置圆的半径  
        const radius = 15 + 2;
        // ctx.drawImage(img1, 0, 0, width, height);
        // 绘制圆形裁剪区域  
        ctx.beginPath();
        ctx.arc(width / 2, width / 2, radius, 0, Math.PI * 2);
        ctx.closePath();
        ctx.clip();
        // end
        img.onload = function () {
            ctx.drawImage(img, width / 2 - radius, width / 2 - radius, 2 * radius, 2 * radius);
            // 绘制图片  
            ctx.restore()
            setTimeout(()=>{
                ctx.drawImage(img1, 0, 0, width, height);
                // 使用toDataURL方法将Canvas内容转换为Data URL，并设置图片质量进行压缩  
                // 第二个参数是图片格式，第三个参数是图片质量（0.0到1.0之间，默认为1.0）  
                let dataUrl = canvas.toDataURL('image/png', 1); // 0.5为50%的质量   
                resolve(dataUrl)          
                console.log('--11--');      
            },1000)


        };
        img.onerror = err=>{
            console.log(err);
            ctx.restore()
            ctx.drawImage(img1, 0, 0, width, height);
            let dataUrl = canvas.toDataURL('image/png', 1); // 0.5为50%的质量   
            resolve(dataUrl)
        }
        img.src = url; // 替换为你的图片路径   
    })

}

这里有很多坑

1. 点击事件无法执行（解决方案，我是添加了scatter3D的散点，然后设置成透明）
2. scatter3D,标记的颜色（使用itemStyle.color）无法修改，解决方案（设置宽度为0，然后使用borderWidth来设置宽度）
3. 标记点不贴地（解决方案在代码里，通过distance属性来一点点调整）
4. 注意版本我的是v4.9.0,不同版本差异很大
5. 还有很多坑，有需要完整代码的小伙伴欢迎联系我