echarts 3d

再echart中提供了geo3D，可以绘制3d地图

项目上需求，让在3d地图上绘制点和线，根据官方文档可以查看相应配置

1.如何在地图上绘制点  'scatter3D' 绘制三点 

2.如何 scatter3D  symbol png 图片 ? base64

3.如何绘制线  lines3D

​
var mapDate = [{
            name: '点1',
            value: [114.35, 32.10785000, 240]
        },
        {
            name: '点2',
            value: [114.34, 31.85940000, 240]
        },


    ];
    var pathSymbols = {
        fill1: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAADuUlEQVR42mL8//8/w0gGAAHExDDCAUAAjfgAAAigER8AAAE04gMAIIBGfAAABNCIDwCAABrxAQAQQCM+AAACaMQHAEAAjfgAAAigER8AAAE04gMAIIAYQJ0hUjFV7AWi/9rGQAykGYz/D5R/AAKIrgEA9jDIjWj4DLpYaNp/egUAQADRNAuAPILsMQYtoGBoGgMjAwMjMjZBYp8FyjNcm8UA16dtTNP+OkAA0SQFoHicQg8gApA4c0j1C0AAUT0A4EmaijEHCtAzRGYPUv0CEEBUDQB4UqdVaoWWIdQMAIAAoloAwGKe1rXWGQKBTKpfAAKIKgEAy/N0q7rxBAKpfgEIIIoDAOb5M7QurbGlhFBMO0n1C0AAURwAuBxCMC/DGkFQ9hkoTXzBaIy1UCTVLwABRFEAEFMoEdMQQm8UkZIV0NWT6heAAKIsAIiMfXhskYKJTA3/KQwAgAAiOwAgdTMRnofG+hkSPH+GhEBALxBJ9QtAAFEUAKA8THxLjoHkgCC2X3CGggAACCDyA4CIvAou3Ej1MFIgnSGyYQUuTKFZkVS/AAQQ2QFAqLBC7wgRTO741BBq/mqnwathUv0CEEBkBQAxDR+ykjseTGxhSKpfAAKIzO7wWSAkALSNGYzpPbgTSnpjDCCAyAwAwp47e/Us1Tx2lmg1pAc5QAAx0cpJxiQ4nlizCKq5RrptAAHERDsnMZAZJxSkAC3SbQMIICZaOeqsNvVKAGJTAOPqWYykmg0QQDRrBxBq95+hYrP4P1JHilS/AAQQzVIA49WzjGfxqDcmwXyQWQQdpEWePwACiLKmMAPpTWGSW4VE9AcoaQoDBBDFvUGCjgs1xtq8pV5nyJiizhBAAFEUAGeI7KwQMw5AbneY0vEAgAAa8AERrCkjlNixAEz7SfULQABRPiZIxhzAGWwpgkQzQIGErUNGql8AAojyMUFYr4/Og6K47CTVLwABNOKHxQECiJGc2V5GRkac3VFGMKKt5/HZQ6p/AAKIarPDMAedoXB6m1ChR+1ABggg6k+OIhVw1J4TPKNN/clRgACi2QIJaswSn0EeViMyVZHqF4AAoukKEYwFEnhGbsCehXryDPI8AqnVI4l+AQgguiyRAc8hYJkfAHsU66SJMdkph1S/AAQQ1WoBcvM20b09EgKAFAAQQIwjfcsMQACN+HWCAAE04gMAIIBGfAAABNCIDwCAABrxAQAQQCM+AAACaMQHAEAAjfgAAAigER8AAAE04gMAIIBGfAAABNCIDwCAAAMAeXtQaJR394AAAAAASUVORK5CYII='
    };
    var linecoordinates = [{
        coords: [
            [114.5, 31.41215504, 266.00],
            [115.05, 31.41168148, 266.26],
            [117.98, 31.46, 266.33],
           
        ],
        name: 'foo',

    }]
    var linePoints = [{
            name: '线路工程1',
            value: [116.01129567, 31.41215504, 240],
        },
        {
            name: '线路工程2',
            value: [116.01395087, 31.48274472, 240]
        },

    ];


var option = {
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                console.log(params.seriesName);
                if (params && (params.seriesName === "station")) {
                    return params.name;
                } else if (params && params.seriesName === "linePoints") {
                    return params.name;
                } else if (typeof (params.value)[2] == "undefined") {
                    return params.name + ' : ' + params.value;
                } else {
                    return params.name + ' : ' + params.value[2];
                }
            }
        },
        	{
            map: '安徽',
            // boxDepth: 50,//地图倾斜度
            boxHeight: 13,
            regionHeight: 12,
            roam: true,
            itemStyle: {
                // color: '#003852',
                color: '#3E7FB4',
                opacity: 1,
                borderWidth: 1.5,
                borderColor: '#4F8DBB',
            },
            viewControl: {
                alpha: 60,
                beta: -10,
                minBeta: -3600,
                maxBeta: 3600,
                distance: 170, // 地图视角 控制初始大小
                rotateSensitivity: 1, // 旋转
                zoomSensitivity: 1, // 缩放
            },
            label: {
                show: false,
                textStyle: {
                    color: '#A0F368',
                    fontSize: 13,
                    // fontWeight: '500',
                    // fontFamily:'Microsoft YaHei',
                    backgroundColor: "rgba(0,0,0,0)"
                }
            },
            emphasis: {
                label: {
                    show: false
                }
            },
            postEffect: true,
            light: {
                main: {
                    anchor: "map",
                    intensity: 1.0,
                    shadow: true,
                    color: '#fff',
                    shadowQuality: 'ultra',
                    alpha: 90,
                    beta: 0
                },
                ambient: {
                    color: '#fff',
                    intensity: 0.3
                },
                //ambientCubemap 会使用纹理作为环境光的光源，会为物体提供漫反射和高光反射。可以通过 diffuseIntensity 和 specularIntensity 分别设置漫反射强度和高光反射强度。
                ambientCubemap: {
                    exposure: 0,
                    //漫反射的强度。
                    diffuseIntensity: 5,
                    //高光反射的强度。
                    specularIntensity: 0,
                    //texture: 'pisa.hdr',
                    // 解析 hdr 时使用的曝光值
                    exposure: 0.0
                }
            },
            temporalSuperSampling: {
                enable: 'auto'
            }
        },
        series: [{
                type: 'lines3D',
                coordinateSystem: 'geo3D',
                effect: {
                    show: true,
                    constantSpeed: 60,
                    trailWidth: 6,
                    trailLength: 0.3,
                    trailOpacity: 1,
                    spotIntensity: 10,
                    period: 4
                },
                blendMode: 'lighter',
                polyline: true,
                lineStyle: {
                    width: 2.5,
                    color: '#00ccf4',
                    opacity: .5
                },
                data: coordinates,
                zlevel: 10
            },
            {
                name: 'scatter3D',
                type: "scatter3D",
                coordinateSystem: 'geo3D',
                symbol: 'circle',
                symbolSize: 10,
                animation: true,
                opacity: 0.5,
                label: {
                    show: true,
                    formatter: '{b}',
                    textStyle: {
                        backgroundColor: "rgba(0,0,0,0)",
                        color: '#fff',
                        fontSize: 15,
                        // fontWeight: '600'
                    }
                },
                itemStyle: {
                    color: '#9BF46E',
                    borderWidth: 0,
                    borderColor: '#fff' //气泡边的颜色
                },
                data: convertData(data)
            },
            {
                name: 'station',
                type: 'scatter3D',
                coordinateSystem: 'geo3D',
                symbol: pathSymbols.fill1,
                symbolSize: 20,
                opacity: 1,
                label: {
                    show: true,
                    position: 'left',
                    formatter: (params) => {

                        return params.data.name;
                    },
                    textStyle: {
                        color: '#EEEC0D',
                        fontSize: 13,
                        fontFamily: 'PingFangSC',
                        backgroundColor: 'transparent' // 更改label背景颜色
                    }
                },
                itemStyle: {
                    opacity: 1,
                    // borderWidth: 0.5,
                    // borderColor: '#fff'//气泡边的颜色
                },
                data: mapDate
            },
            {
                name: 'linecoordinates',
                type: 'lines3D',
                coordinateSystem: 'geo3D',
                polyline: 'true',
                blendMode: 'lighter',
                silent: true,
                effect: {
                    show: true,
                    trailWidth: 5,
                    trailOpacity: 1,
                    trailLength: 0.2,
                    constantSpeed: 5
                },
                lineStyle: {
                    width: 2.5,
                    color: '#00ccf4',
                    opacity: 1
                },
                data: linecoordinates,
            },
            {
                name: 'linePoints',
                type: 'scatter3D',
                coordinateSystem: 'geo3D',
                symbol: pathSymbols.fill1,
                symbolSize: 15,
                opacity: 1,
                itemStyle: {
                    opacity: 1,
                    color: '#EBE806',
                    // borderWidth: 0.5,
                    // borderColor: '#fff'//气泡边的颜色
                },
                label: {
                    show: false,
                },
                emphasis: {
                    label: {
                        show: false
                    }
                },

                data: linePoints
            },

​

4.鼠标滑到点上出现两个弹出框的，原因是 lable ，emphasis影响，设置show为 false