echarts展示區(qū)域地圖添加紋理圖片操作指南
更新時(shí)間：2023年12月20日 11:03:14 作者：一介青煙小生
這篇文章主要給大家介紹了關(guān)于echarts展示區(qū)域地圖添加紋理圖片操作的相關(guān)資料,ECharts地圖組件支持使用圖片作為地圖區(qū)域的填充紋理,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
下面我們以廣西南寧的來(lái)做實(shí)例，來(lái)進(jìn)行這個(gè)渲染和添加紋理圖片的操作。
首先我們先看看文檔，echarts 的geo的areaColor是可以支持通過(guò)圖片來(lái)對(duì)地圖的區(qū)域內(nèi)容來(lái)進(jìn)行紋理填充的，也可以進(jìn)行顏色的修改。
文檔的具體位置：https://echarts.apache.org/zh/option.html#color
但是這個(gè)紋理圖片的填充是*支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串，所以我們需要新構(gòu)建一個(gè)圖片內(nèi)容。
展示圖片我們可以使用下面兩者方法來(lái)進(jìn)行，當(dāng)然方法很多，也可以使用其他的方法，這里就不一一列舉了
//方法一
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
獲取對(duì)于區(qū)域的json文件，這個(gè)可以去下面網(wǎng)站獲取，也可以到gitHub上面直接獲取，各位各取所需
//阿里的獲取地圖json文件的 http://datav.aliyun.com/portal/school/atlas/area_selector //gitHub上面可以直接獲取完整所有的省份和市區(qū)的 https://github.com/ljy-110/china-geojson-map
下面就是具體的代碼展示內(nèi)容
（1）數(shù)據(jù)格式展示
dataMapList : [
//坐標(biāo)是為了展現(xiàn)label的定位
{name:"興業(yè)區(qū)",value:[108.320189,22.819511],datas:12},
...
]
（2）疊加層和發(fā)光效果可以參考代碼
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) { // 鼠標(biāo)經(jīng)過(guò)的回調(diào)函數(shù)
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時(shí)顯示
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.那個(gè)圖片展示可能會(huì)變得模糊
2.圖片無(wú)法展示可以使用setTimeout，延遲渲染
可能還有各種問(wèn)題，歡迎大家一起來(lái)探討解決。
最后貼一張紋理圖片，大家也可以自己去截取。衛(wèi)星地圖方法去截取。
總結(jié)
到此這篇關(guān)于echarts展示區(qū)域地圖添加紋理圖片的文章就介紹到這了,更多相關(guān)echarts展示區(qū)域地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了禁止IE用右鍵的JS代碼，有需要的朋友可以參考一下2013-12-12
layer彈出層自適應(yīng)高度,垂直水平居中的實(shí)現(xiàn)
今天小編就為大家分享一篇layer彈出層自適應(yīng)高度,垂直水平居中的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
使用JavaScript下載圖片并保存到本地的詳細(xì)解釋和代碼示例
在前端開(kāi)發(fā)中經(jīng)常會(huì)遇到需要將圖片從網(wǎng)絡(luò)上下載并保存到本地的需求,這篇文章主要給大家介紹了關(guān)于使用JavaScript下載圖片并保存到本地的詳細(xì)解釋和代碼示例,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07 
這篇文章主要介紹了javascript變量聲明,實(shí)例分析了javascript變量聲明的相關(guān)使用技巧,需要的朋友可以參考下
2015-04-04 
這篇文章主要介紹了如何在wxml中直接寫(xiě)js代碼(wxs),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11 
很棒的JavaScript選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07 
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)登錄框郵箱提示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10 
JavaScript中將number轉(zhuǎn)為string的5種方法
這篇文章主要給大家介紹了關(guān)于JavaScript中將number轉(zhuǎn)為string的5種方法,在JavaScript的值類(lèi)型轉(zhuǎn)換中,最常發(fā)生的就是string與number這兩種類(lèi)型值之間的相互轉(zhuǎn)換,需要的朋友可以參考下
2023-07-07 
這篇文章主要介紹了詳解Javascript繼承的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2016-03-03