echarts中的地图怎么弄这个背景地皮呢

问题遇到的现象和发生背景

echarts中的地图怎么弄这个背景地皮呢,是贴图还是什么?案例上的都是纯色的,请大唠指教,有偿!

img

用代码块功能插入代码,请勿粘贴截图
我想要达到的结果

img


会的请告诉我在哪里设置,需要些什么?最好是以代码的方式。
这个功能挺赶的,谢谢啦。

期望对你有所启发


var domImg = document.createElement('img')
domImg.style.height = domImg.height = domImg.width = domImg.style.width = '100px'
domImg.src = `data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAA…`//图片转换的base64格式太长了此处省略部分
itemStyle: {
      normal: {
        areaColor: {
          image: domImg,//配置图片
          repeat: 'repeat'//可选值repeat、no-repeat、repeat-x、repeat-y
        },
      }
  },

嗯,最后也将一篇写的很好的博文分享给你做参考:https://blog.csdn.net/liyoro/article/details/124755118

看看这个 希望能帮助到你 http://t.csdn.cn/kXaS9

itemStyle里面有个areacolor属性可以设置背景图。你可以创建一个img节点,然后将图片节点放到这个areacolor属性中。

var Imgdom = document.createElement('img')
Imgdom.style.height = Imgdom.height = Imgdom.width = Imgdom.style.width = '100px'
Imgdom.src = 'image.jpg'
//这里放到地图的js中
itemStyle: {
      normal: {
        areaColor: {
          image: Imgdom,//配置图片
          repeat: 'repeat'// 背景平铺,可选值repeat、no-repeat、repeat-x、repeat-y
        },
      }
  },

https://blog.csdn.net/tly599167/article/details/107069159?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-107069159-blog-120854667.pc_relevant_3mothn_strategy_recovery&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-107069159-blog-120854667.pc_relevant_3mothn_strategy_recovery&utm_relevant_index=1

看下这个 https://blog.csdn.net/AisinGioroGouzi/article/details/127122743
这里有完整代码 效果和你这差不多

itemStyle: {
color: {
image: piePatternImg,
repeat: 'repeat'
},
areaColor: {
image: piePatternImg,
repeat: 'repeat'
},
borderColor: '#bddee6',
borderWidth: 1,
}
可以设置 背景纹理图片的 ,
让你们设计单独吧每一个市的背景图片单独切出来 ,然后单独设置背景图片就行了

属性是这个
regions: [{
name: '广州市',
itemStyle: {
color: {
image: 广州市背景,
repeat: 'repeat'
},
}
}]

看下这个 https://blog.csdn.net/AisinGioroGouzi/article/details/127122743
这里有完整代码 效果和你这差不多

itemStyle: {
color: {
image: piePatternImg,
repeat: 'repeat'
},
areaColor: {
image: piePatternImg,
repeat: 'repeat'
},
borderColor: '#bddee6',
borderWidth: 1,
}
可以设置 背景纹理图片的 ,
让你们设计单独吧每一个市的背景图片单独切出来 ,然后单独设置背景图片就行了

属性是这个
regions: [{
name: '广州市',
itemStyle: {
color: {
image: 广州市背景,
repeat: 'repeat'
},
}
}]

感觉这篇更适合 ECharts地图,echarts自定义map地图,echarts添加标注,自定义坐标、图标、icon
解答你的疑问,希望能够帮到你

我左右方向键按了好久, 发现这两张图片一模一样啊

就是贴图,可以参考https://blog.csdn.net/weixin_54106595/article/details/123796644
var domImg = document.createElement('img')
domImg.style.height = domImg.height = domImg.width = domImg.style.width = '100px'
domImg.src = data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAA…//图片转换的base64格式太长了此处省略部分
itemStyle: {
normal: {
areaColor: {
image: domImg,//配置图片
repeat: 'repeat'//可选值repeat、no-repeat、repeat-x、repeat-y
},
}
},

首先echart只能做平面的地图,要是3d的建议threejs。如果可以平面的话,可以看一下这篇文章https://blog.csdn.net/weixin_41897680/article/details/125073974 完整代码在文章里面
效果图:

img

你好,可以看看这篇文章,有对参数详细说明
echarts中设置地图背景图片_Y...................的博客-CSDN博客_echarts设置地图背景图