echarts展示区域地图添加纹理图片操作指南
更新时间：2023年12月20日 11:03:14 作者：一介青烟小生
这篇文章主要给大家介绍了关于echarts展示区域地图添加纹理图片操作的相关资料,ECharts地图组件支持使用图片作为地图区域的填充纹理,文中通过代码介绍的非常详细,需要的朋友可以参考下
下面我们以广西南宁的来做实例，来进行这个渲染和添加纹理图片的操作。
首先我们先看看文档，echarts 的geo的areaColor是可以支持通过图片来对地图的区域内容来进行纹理填充的，也可以进行颜色的修改。
文档的具体位置：https://echarts.apache.org/zh/option.html#color
但是这个纹理图片的填充是*支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串，所以我们需要新构建一个图片内容。
展示图片我们可以使用下面两者方法来进行，当然方法很多，也可以使用其他的方法，这里就不一一列举了
//方法一
let img = document.createElement('img')
img.src = require('../../../assets/image/2.jpg')
//方法二
<img ref="mapSvg" id="mapSvg" v-show="false" hidden style="width:500px;height:500px;" src="../../../assets/image/2.jpg">
this.$refs.mapSvgAreaMap
获取对于区域的json文件，这个可以去下面网站获取，也可以到gitHub上面直接获取，各位各取所需
//阿里的获取地图json文件的 http://datav.aliyun.com/portal/school/atlas/area_selector //gitHub上面可以直接获取完整所有的省份和市区的 https://github.com/ljy-110/china-geojson-map
下面就是具体的代码展示内容
（1）数据格式展示
dataMapList : [
//坐标是为了展现label的定位
{name:"兴业区",value:[108.320189,22.819511],datas:12},
...
]
（2）叠加层和发光效果可以参考代码
initAreaMap(){
var myChart = echarts.init(this.$refs.areaMap);
//GuangXi 引入的地图json文件
echarts.registerMap("mapStype", GuangXi);
let option = {}
//label的图片引入
let mapLabel = require('../../../assets/image/home/mapLabel.png');
let data = this.dataMapList
option={
tooltip: {
trigger: "item",
formatter: function(params) {
return params.name;
}
},
geo: [
{
map: "mapStype",
geoIndex: 1,
zoom: 1,
layoutCenter: ["50%", "44%"],
layoutSize: "80%",
zlevel: 4,
show: true,
label: {
normal: {
show: false,
textStyle: {
color: "#fff",
fontSize: "16"
}
},
emphasis: {
show: true,
label: {
formatter: function(params) { // 鼠标经过的回调函数
return params.name
},
},
textStyle: {
color: "#fff"
}
}
},
roam: false, // 是否允许缩放
itemStyle: {
normal: {
areaColor:'rgb(0,0,0,0)',
borderWidth: 1,
borderColor: 'rgb(222, 238, 255,0.5)',
shadowColor: '#1773c3',
shadowBlur: 20,
},
emphasis: {
borderColor: 'rgb(222, 238, 255,0.5)',
areaColor:'rgb(26, 92, 158,0.6)',
}
}
},
{
map: "mapStype",
geoIndex: 3,
zoom: 1,
layoutCenter: ["50%", "44%"],
layoutSize: "80%",
zlevel: 2,
// aspectScale: 1,
silent: true,
label: {
emphasis: {
show: false
}
},
roam: false, // 是否允许缩放
itemStyle: {
areaColor: {
image: this.$refs.mapSvgAreaMap, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
}
},
{
map: "mapStype",
animation:true,
animationDurationUpdate:0,
geoIndex: 4,
zoom: 1,
layoutCenter: ["50%", "45.5%"],
layoutSize: "80%",
zlevel: 1,
// aspectScale: 1,
silent: true,
label: {
emphasis: {
show: false
}
},
roam: false, // 是否允许缩放
itemStyle: {
borderWidth: 1,
areaColor:'#030a17',
shadowColor: '#1773c3',
shadowBlur: 60,
}
}
],
series: [
{
type: 'map',
geoIndex: 1,
zoom: 1.2,
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
color: 'rgba(255,255,255,0.9)'
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: false,
data: data
},
{
type: "scatter",
coordinateSystem: "geo",
label: {
normal: {
show: true,
color: "#fff",
fontWeight:500,
fontSize:18,
verticalAlign:'top',
lineHeight:-26,
formatter: function(params) {
return params.data.name + ' '+ params.data.datas;
},
},
emphasis: {
show: false
},
},
itemStyle: {
opacity: 1
},
symbol:'image://' + mapLabel,
symbolSize: [160, 70],
symbolOffset: [0, 0],
zlevel: 6,
data: data
},
]
}
if (option && typeof option === 'object') {
myChart.setOption(option,true);
}
window.addEventListener('resize', myChart.resize);
},
tip
1.那个图片展示可能会变得模糊
2.图片无法展示可以使用setTimeout，延迟渲染
可能还有各种问题，欢迎大家一起来探讨解决。
最后贴一张纹理图片，大家也可以自己去截取。卫星地图方法去截取。
总结
到此这篇关于echarts展示区域地图添加纹理图片的文章就介绍到这了,更多相关echarts展示区域地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了禁止IE用右键的JS代码，有需要的朋友可以参考一下2013-12-12
今天小编就为大家分享一篇layer弹出层自适应高度,垂直水平居中的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了js实现新闻轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
使用JavaScript下载图片并保存到本地的详细解释和代码示例
在前端开发中经常会遇到需要将图片从网络上下载并保存到本地的需求,这篇文章主要给大家介绍了关于使用JavaScript下载图片并保存到本地的详细解释和代码示例,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了javascript变量声明,实例分析了javascript变量声明的相关使用技巧,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了如何在wxml中直接写js代码(wxs),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
很棒的JavaScript选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了原生JS实现登录框邮箱提示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
JavaScript中将number转为string的5种方法
这篇文章主要给大家介绍了关于JavaScript中将number转为string的5种方法,在JavaScript的值类型转换中,最常发生的就是string与number这两种类型值之间的相互转换,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了详解Javascript继承的实现的相关资料,需要的朋友可以参考下2016-03-03
最新评论