echarts展示區(qū)域地圖添加紋理圖片操作指南

更新時間：2023年12月20日 11:03:14 作者：一介青煙小生

這篇文章主要給大家介紹了關于echarts展示區(qū)域地圖添加紋理圖片操作的相關資料,ECharts地圖組件支持使用圖片作為地圖區(qū)域的填充紋理,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

下面我們以廣西南寧的來做實例，來進行這個渲染和添加紋理圖片的操作。

首先我們先看看文檔，echarts 的geo的areaColor是可以支持通過圖片來對地圖的區(qū)域內容來進行紋理填充的，也可以進行顏色的修改。

文檔的具體位置：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

獲取對于區(qū)域的json文件，這個可以去下面網站獲取，也可以到gitHub上面直接獲取，各位各取所需

//阿里的獲取地圖json文件的
http://datav.aliyun.com/portal/school/atlas/area_selector
//gitHub上面可以直接獲取完整所有的省份和市區(qū)的
https://github.com/ljy-110/china-geojson-map

下面就是具體的代碼展示內容

（1）數據格式展示

dataMapList : [
    //坐標是為了展現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) { // 鼠標經過的回調函數  
                    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，延遲渲染

可能還有各種問題，歡迎大家一起來探討解決。

最后貼一張紋理圖片，大家也可以自己去截取。衛(wèi)星地圖方法去截取。