echarts中设置地图背景图片

淡淡的烟草味﹌ 2023-10-05 13:53 37阅读 0赞

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

[官方属性说明][Link 1]

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70][]

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属性][echarts_geo3D_geo3D_effectScatter]

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

[官方属性说明][Link 2]

效果： 参考[官方DEMO][DEMO]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70 1][]

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)
          })
        }
      }

[Link 1]: https://echarts.apache.org/zh/option.html#geo.itemStyle.color
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201119104405763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_16,color_FFFFFF,t_70
[echarts_geo3D_geo3D_effectScatter]: https://blog.csdn.net/yyXieDaiMa/article/details/109803063
[Link 2]: https://echarts.apache.org/zh/option-gl.html#globe.baseTexture
[DEMO]: https://gallery.echartsjs.com/editor.html?c=xnyknPF1R
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201119100813656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_16,color_FFFFFF,t_70