我是靠谱客的博主 甜美裙子，最近开发中收集的这篇文章主要介绍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
* 一维作为三维地图的贴图
*/
<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>
最后
以上就是甜美裙子为你收集整理的echarts中如何设置geo3D地图背景图片，以及geo3D中如何使用effectScatter属性的全部内容，希望文章能够帮你解决echarts中如何设置geo3D地图背景图片，以及geo3D中如何使用effectScatter属性所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复