echarts中设置地图背景图片

1.geo设置背景 (设置 color)

官方属性说明

实现效果：

options配置：

 options: {
          tooltip: {
            triggerOn: `onmousemove`,
            trigger: `item`,
            // position: `top`,
            position: function (point, params, dom, rect, size) {
              // 鼠标坐标和提示框位置的参考坐标系
              let x = 0 // x坐标位置
              let y = 0// y坐标位置
              const pointX = point[0]
              const pointY = point[1]
              const boxHeight = size.contentSize[1]
              if (size.contentSize[0] > pointX) {
                x = 5
              } else {
                x = pointX - 10
              }
              if (boxHeight > pointY) {
                y = 5
              } else {
                y = pointY - boxHeight - 10
              }
              return [x, y]
            },
            backgroundColor: `rgba(0,0,0,0)`,
            formatter: function (params) {
              const str = `<div class="labelTool ${params.data.color}">
                <div>${params.name}信息</div>
                <div><span>${params.data.name === `人员` ? `姓名: ` : `车牌: `}</span>${params.data.number}</div>
                <div><span>风险排名：</span>${params.data.sort}名</div>
              </div>`
              return str
            }
          },
          geo: [
            {
              map: this.type,
              aspectScale: 1,
              roam: false, //是否允许缩放
              layoutSize: `95%`,
              layoutCenter: [`50%`, `50%`],
              label: {
                show: true,
                color: `#EEEEEE`,
                emphasis: {
                  areaColor: `#fff`,
                  color: `#EEEEEE`
                }
              },
              emphasis: {
                label: {
                  color: `#fff`
                }
              },
              itemStyle: {
                areaColor: `transparent`,
                borderColor: `#16ecfc`,
                borderWidth: 1,
                shadowBlur: 6,
                shadowOffsetY: 0,
                shadowOffsetX: 0,
                shadowColor: `#16ecfc`,
                emphasis: {
                  areaColor: `rgba(63, 218, 255, 0.1)`,
                  label: {
                    color: `#fff`
                  }
                }
              },
              z: 4
            }, {
              map: this.type,
              aspectScale: 1,
              roam: false, //是否允许缩放
              //zoom: 1.1, //默认显示级别
              layoutSize: `95%`,
              layoutCenter: [`50%`, `50%`],
              itemStyle: {
                color: {
                  image: this.bj, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                  repeat: `repeat` // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                },
                borderColor: `#37C1FD`,
                borderWidth: 2
              },
              z: 3,
              silent: true
            },
            {
              map: this.type,
              aspectScale: 1,
              roam: false, //是否允许缩放
              //zoom: 1.1, //默认显示级别
              layoutSize: `96%`,
              layoutCenter: [`50.1%`, `52.2%`],
              itemStyle: {
                areaColor: `#0C366F`,
                borderColor: `#0C366F`
              },
              z: 2,
              silent: true
            },
            {
              map: this.type,
              aspectScale: 1,
              roam: false, //是否允许缩放
              //zoom: 1.1, //默认显示级别
              layoutSize: `96%`,
              layoutCenter: [`50.1%`, `52.2%`],
              itemStyle: {
                areaColor: `#0C366F`,
                borderColor: `#16ecfc`,
                borderWidth: 4,
                shadowBlur: 60,
                shadowOffsetY: 0,
                shadowOffsetX: 0,
                shadowColor: `#239fe7`
              },
              z: 1,
              silent: true
            }
          ],
          series: [
            {
              name: `人员`,
              type: `scatter`,
              coordinateSystem: `geo`,
              data: [],
              zlevel: 5,
              symbol: ``,
              symbolSize: 34,
              itemStyle: {
                normal: {
                  //color: 'green',
                  borderWidth: 0
                }
              }
            },
            {
              name: `车辆`,
              type: `scatter`,
              coordinateSystem: `geo`,
              data: [],
              zlevel: 5,
              symbol: ``,
              symbolSize: 34,
              itemStyle: {
                normal: {
                  borderWidth: 0
                }
              }
            },
            {
              name: `船舶`,
              type: `scatter`,
              coordinateSystem: `geo`,
              data: [],
              zlevel: 5,
              symbol: ``,
              symbolSize: 34,
              itemStyle: {
                normal: {
                  borderWidth: 0
                }
              }
            }
          ]
        },
        width: 156,
        zoom: 1,
        lengeW: 150
      }

图片转换为base64的方法： 可直接（`image://${require(`@/assets/images/alliance.png`)}`）， 或使用如下方法

getImage (img) {
        return new Promise(resolve => {
          const image = new Image()
          image.src = img
          image.onload = () => {
            const canvas = document.createElement(`canvas`)
            canvas.width = image.width
            canvas.height = image.height
            const ctx = canvas.getContext(`2d`)
            const x = canvas.width / 2
            const y = canvas.height / 2
            // 将绘图原点移到画布中心
            ctx.translate(x, y)
            // 旋转角度
            ctx.rotate((Math.PI / 180) * (Math.floor(Math.random() * 6) * 10))
            // 将画布原点移动
            ctx.translate(-x, -y)
            // 绘制图片
            ctx.drawImage(image, 0, 0, image.width, image.height)
            const ext = image.src.substring(image.src.lastIndexOf(`.`) + 1).toLowerCase()
            const dataURL = canvas.toDataURL(`image/` + ext)
            console.log(dataURL)
            resolve(`image://` + dataURL)
          }
        })
      }

3.将图片设置为地图的背景

 methods: {
      setOptionsValue () {
        // 设置地图背景
        this.options.geo[1].itemStyle.color.image = this.bj
        // 设置scatter图片
        this.options.series[0].symbol = this.imageBase[0]
        this.mapChart.setOption(this.options, true)
      },
}

2.geo3D地图背景

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

3.globe地图设置背景 (baseTexture)

官方属性说明

效果： 参考官方DEMO

 

 methods: {
    getConfig () {
      const config = { // 扫描线条配置
        lineWidth: 0.5, // 扫描线条宽度
        color: `#00FFC2`, // 线条颜色
        levels: 1,
        intensity: 3, // 强度
        threshold: 0.01
      }
      const canvas = document.createElement(`canvas`)
      canvas.width = 4096
      canvas.height = 2048
      const context = canvas.getContext(`2d`)
      context.lineWidth = config.lineWidth
      context.strokeStyle = config.color
      context.fillStyle = config.color
      context.shadowColor = config.color
      this.image(word).then(image => {
        const m = image.height
        const n = image.width
        const values = new Array(n * m)
        const contours = d3.contours().size([n, m]).smooth(true)
        const projection = d3.geoIdentity().scale(canvas.width / n)
        const path = d3.geoPath(projection, context)
        for (var j = 0, k = 0; j < m; ++j) {
          for (var i = 0; i < n; ++i, ++k) {
            values[k] = image.data[(k << 2)] / 255
          }
        }
        const opt = {
          image: canvas
        }
        let results = []
        function update (threshold, levels) {
          context.clearRect(0, 0, canvas.width, canvas.height)
          var thresholds = []
          for (var i = 0; i < levels; i++) {
              thresholds.push((threshold + 1 / levels * i) % 1)
          }
          results = contours.thresholds(thresholds)(values)
          redraw()
        }
        function redraw () {
          results.forEach(function (d, idx) {
              context.beginPath()
              path(d)
              context.globalAlpha = 1
              context.stroke()
              if (idx > config.levels / 5 * 3) {
                  context.globalAlpha = 0.01
                  context.fill()
              }
          })
          opt.onupdate()
        }
        d3.timer(t => {
          var threshold = (t % 10000) / 10000
          update(threshold, 1)
        })
        this.initCharts(opt, config)
        update(config.threshold, config.levels)
      })
    },
    image (url) {
      return new Promise(resolve => {
        const image = new Image()
        image.src = url
        image.onload = function () {
          const canvas = document.createElement(`canvas`)
          canvas.width = image.width / 8
          canvas.height = image.height / 8
          const context = canvas.getContext(`2d`)
          context.drawImage(image, 0, 0, canvas.width, canvas.height)
          resolve(context.getImageData(0, 0, canvas.width, canvas.height))
        }
      })
    },
    initCharts (opt, config) {
      var contourChart = echarts.init(document.createElement(`canvas`), null, {
        width: 4096,
        height: 2048
      })
      var img = new echarts.graphic.Image({
        style: {
          image: opt.image,
          x: -1,
          y: -1,
          width: opt.image.width + 2,
          height: opt.image.height + 2
        }
      })
      contourChart.getZr().add(img)
      opt.onupdate = function () {
        img.dirty()
      }
      const myChart = echarts.init(document.getElementById(`earth_map_3D`))
      window.onresize = function () {
        myChart.resize()
      }
      myChart.setOption(
        {
          backgroundColor: `rgba(0,0,0,0)`,
          globe: {
            baseTexture: wordLight,
            displacementScale: 0.05,
            displacementQuality: `high`,
            shading: `realistic`,
            realisticMaterial: {
              roughness: 0.2,
              metalness: 0
            },
            light: {
              ambient: {
                intensity: 1
              },
              main: { // 主光源
                intensity: 0,
                shadow: false
              }
            },
            postEffect: {
              enable: true,
              bloom: {
                enable: true
              },
              depthOfField: {
                enable: false
              }
            },
            viewControl: {
              center: [0, 0, 0],
              alpha: 30,
              beta: 160,
              distance: 160,
              autoRotate: true,
              autoRotateAfterStill: 10,
              autoRotateSpeed: 20
            },
            layers: [{
              type: `blend`,
              blendTo: `emission`,
              texture: contourChart,
              intensity: config.intensity
            }]
          },
          series: [{ // 点
            type: `scatter3D`,
            blendMode: `lighter`,
            coordinateSystem: `globe`,
            showEffectOn: `render`,
            zlevel: 2,
            effectType: `ripple`,
            symbolSize: 15,
            rippleEffect: {
              period: 4,
              scale: 4,
              brushType: `fill`
            },
            emphasis: {
              itemStyle: {
                color: `red`,
                opacity: 1
              }
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: `rgba(235, 232, 6, 1)`
              }
            },
            data: [
              [51.511744, 25.292405],
              [30.5234, 50.450099],
              [24.940524, 60.170675],
              [30.30604, 59.933177]
            ]
          }
          ]
        }
      )
      myChart.on(`click`, (params) => {
        console.log(`dianji shijian`)
        this.$emit(`onEarthCallback`, params)
      })
    }
  }