echarts中如何设置geo3D地图背景图片，以及geo3D中如何使用effectScatter属性
geo3D地图背景纹理
属性 colorMaterial 官方详细介绍
注意： 使用在colorMaterial 属性仅在 shading属性为'color'时有效。
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, `五指山市`]
]
}
]
}
}
},将二维地图作为三维地图的纹理
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
* 一维作为三维地图的贴图
*/
