echarts中如何设置geo3D地图背景图片，以及geo3D中如何使用effectScatter属性

92 阅读 0 评论 61 点赞

我是靠谱客的博主甜美裙子，这篇文章主要介绍echarts中如何设置geo3D地图背景图片，以及geo3D中如何使用effectScatter属性，现在分享给大家，希望可以做个参考。

geo3D地图背景纹理

属性 colorMaterial 官方详细介绍

注意：使用在colorMaterial 属性仅在 shading属性为'color'时有效。

复制代码

1
2
3
4
5
6
7
8
geo3D: {
         map: `海南`,
         shading: `color`,
         colorMaterial: {
           detailTexture: this.bg, // 纹理贴图 格式支持（string, HTMLImageElement, HTMLCanvasElement）
           textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
         }
}

geo3D中使用effectScatter

在echarts 中geo3D中是不能直接使用effectScatter的，但是三维地图是支持htmlCanvasElement纹理的。所以可以将二维地图作为3维地图的纹理贴图

上代码：

geo地图配置

复制代码

data () {
            return {
                bg: '',
                data: [],
                imageDom: null,
                chartOption: {
                    geo: {
                        // backgroundColor: {
                        //     color: {
                        //         image: this.imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        //         repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                        //     }
                        // },
                        show: true,
                        map: `海南`,
                        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`
                            }
                        }
                    },
                    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: [109.508268, 18.247872] },
                                { name: `五指山市`, value: [109.516662, 18.776921] }
                                //[109.508268, 18.247872, `三亚市`],
                                //[109.516662, 18.776921, `五指山市`]
                            ]
                        }
                    ]
                }
            }
        },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 data () {
            return {
                bg: '',
                data: [],
                imageDom: null,
                chartOption: {
                    geo: {
                        // backgroundColor: {
                        //     color: {
                        //         image: this.imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        //         repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                        //     }
                        // },
                        show: true,
                        map: `海南`,
                        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`
                            }
                        }
                    },
                    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: [109.508268, 18.247872] },
                                { name: `五指山市`, value: [109.516662, 18.776921] }
                                //[109.508268, 18.247872, `三亚市`],
                                //[109.516662, 18.776921, `五指山市`]
                            ]
                        }
                    ]
                }
            }
        },

将二维地图作为三维地图的纹理

复制代码

methods: {
            initChart () {
                echarts.registerMap(`海南`, hainan)
                const canvas = document.createElement(`canvas`)
                this.bg = echarts.init(canvas, null, {
                    width: 1024,
                    height: 1024
                })
                this.bg.setOption(this.chartOption)
                const options_ = {
                     geo3D: {
                        map: `海南`,
                        viewControl: {
                            autoRotate: false,
                            distance: 180
                        },
                        shading: `color`,
                        boundingCoords: [
                            [-180, 90],
                            [180, -90]
                        ],
                        colorMaterial: {
                            detailTexture: this.bg, // 纹理贴图
                            textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                        },
                        // 是否显示地面
                        groundPlane: {
                            show: false
                        }
                    }
                }
                const echartMap_ = echarts.init(document.getElementById(`chart`))
                echartMap_.setOption(options_)
                }
        },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
        methods: {
            initChart () {
                echarts.registerMap(`海南`, hainan)
                const canvas = document.createElement(`canvas`)
                this.bg = echarts.init(canvas, null, {
                    width: 1024,
                    height: 1024
                })
                this.bg.setOption(this.chartOption)
                const options_ = {
                     geo3D: {
                        map: `海南`,
                        viewControl: {
                            autoRotate: false,
                            distance: 180
                        },
                        shading: `color`,
                        boundingCoords: [
                            [-180, 90],
                            [180, -90]
                        ],
                        colorMaterial: {
                            detailTexture: this.bg, // 纹理贴图
                            textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                        },
                        // 是否显示地面
                        groundPlane: {
                            show: false
                        }
                    }
                }
                const echartMap_ = echarts.init(document.getElementById(`chart`))
                echartMap_.setOption(options_)
                }
        },

总代码，防止以后用到

复制代码

/**
* @date: 2020/10/16 9:32
* @update: 2020/10/16 9:32
* 一维作为三维地图的贴图
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
/**
* @date: 2020/10/16 9:32
* @update: 2020/10/16 9:32
* 一维作为三维地图的贴图
*/

<template>
    <div class="hainan">
        <div id="chart"></div>
        <img src="~@/assets/imgs/mapbg2.png" alt="">
        <div :v-html="bg"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import 'echarts-gl'
   // import '../../../../node_modules/echarts/map/js/province/hainan.js'
    import hainan from './hainan3.json'
    const geoCoordMap = {
        东方市: [108.653789, 19.10198],
        屯昌县: [110.102773, 19.362916],
        万宁市: [110.388793, 18.796216],
        临高县: [109.687697, 19.908293],
        昌江黎族自治县: [1109.053351, 19.260968],
        海口市: [110.33119, 20.031971],
        三亚市: [109.508268, 18.247872],
        儋州市: [109.576782, 19.517486],
        五指山市: [109.516662, 18.776921]
    }
    export default {
        name: `hainan`,
        data () {
            return {
                bg: '',
                data: [],
                imageDom: null,
                chartOption: {
                    geo: {
                        // backgroundColor: {
                        //     color: {
                        //         image: this.imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        //         repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                        //     }
                        // },
                        show: true,
                        map: `海南`,
                        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`
                            }
                        }
                    },
                    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: [109.508268, 18.247872] },
                                { name: `五指山市`, value: [109.516662, 18.776921] }
                                //[109.508268, 18.247872, `三亚市`],
                                //[109.516662, 18.776921, `五指山市`]
                            ]
                        }
                    ]
                }
            }
        },
        methods: {
            initChart () {
                echarts.registerMap(`海南`, hainan)
                const canvas = document.createElement(`canvas`)
                this.bg = echarts.init(canvas, null, {
                    width: 1024,
                    height: 1024
                })
                this.bg.setOption(this.chartOption)
                const options_ = {
                     geo3D: {
                        map: `海南`,
                        viewControl: {
                            autoRotate: false,
                            distance: 180
                        },
                        shading: `color`,
                        boundingCoords: [
                            [-180, 90],
                            [180, -90]
                        ],
                        colorMaterial: {
                            detailTexture: this.bg, // 纹理贴图
                            textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                        },
                        // 是否显示地面
                        groundPlane: {
                            show: false
                        }
                    }
                }
                const echartMap_ = echarts.init(document.getElementById(`chart`))
                echartMap_.setOption(options_)
                }
        },
        mounted () {
            this.initChart()
        }
    }
</script>

<style lang="scss" scoped>
    .hainan {
        height: 100vh;
        width: 100vw;
        //background-color: #34ffff;
        position: relative;
        display: flex;
        background-color: black;
        #chart {
            position: relative;
            width: 100vh;
            height: 100vh;
            z-index:1;
            //background: url(~@/assets/imgs/mapbg2.png) no-repeat center;
            background-size: 100% 100%;
            border: 1px dotted red;
        }
        img{
            width: 20%;
            height: auto;
        }
    }
</style>