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, fillscale: 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, fillscale: 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属性相关推荐

在Qt中如何设置窗体的背景图片
Qt中正确的设置窗体的背景图片的方法大致有两种,下面将逐个讲解: 一. 利用styleSheet设置窗体的背景图片使用stylesheet设置窗体的背景图片的时候,可以直接按照下图的操作去进行即可, ...
echarts中设置地图背景图片
1.geo设置背景 (设置 color) 官方属性说明实现效果: options配置: options: {tooltip: {triggerOn: `onmousemove`,trigger: ` ...
html根据PC手机设置不同背景图,Html-根据不同的分辨率设置不同的背景图片
@media only screen and (min-width: 1024px) //当分辨率width >= 1024px 时使用1.jpg作为背景图片 { .bg{ backgr ...
python作中国地图背景气泡图_exce表格中怎么制作中国地图背景数据气泡图
exce表格中怎么制作中国地图背景数据气泡图 exce表格中怎么制作中国地图背景数据气泡图?excel表格中想要在中国地图上显示气泡来看看地区分布情况,该怎么设置中国地图气泡图表呢?下面我们就来看看详 ...
python作中国地图背景气泡图_Excel图表中制作中国地图背景气泡图的操作方法
在一些商务PPT,经常能够看见以中国或世界地图作为背景的图表,并且使用气泡图反映数据的大小,如何实现这样的气泡图.今天,学习啦小编就教大家在Excel图表中制作中国地图为背景气泡图的操作方法. Exc ...
html图片滚动红点_HTML中更换或添加网站背景图片的代码怎么写？（示例）
本篇文章主要介绍了HTML代码中如何更换或添加网站背景图片?对于小白来说,最简单的方法就是,如果是更换背景图片的话. 我们可以在网页上点击鼠标右键查看网站源代码,然后找到css里面的背景图这一段代码, ...
php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面错误的写法:加到div中结合图片设置min-height, ...
CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
目录前言一.多个背景图片二.渐变颜色 1.线性渐变 2.径向渐变 3.浏览器前缀 4.opacity透明度写在最后前言在前面说了CSS怎样设置背景图片,与设置颜色的几种方式.如果你想查看可 ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
Android中替换头像图标和背景图片
一,修改头像图标和名称第一步:在res下的drawable--hdpi中导入图片第二步:在res下的androidManifest.xml中在代码中的application的icon中修改为插入图 ...

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

geo3D地图背景纹理

geo3D中使用effectScatter

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

最新文章

热门文章