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 = imgimage.onload = () => {const canvas = document.createElement(`canvas`)canvas.width = image.widthcanvas.height = image.heightconst ctx = canvas.getContext(`2d`)const x = canvas.width / 2const 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 = 4096canvas.height = 2048const context = canvas.getContext(`2d`)context.lineWidth = config.lineWidthcontext.strokeStyle = config.colorcontext.fillStyle = config.colorcontext.shadowColor = config.colorthis.image(word).then(image => {const m = image.heightconst n = image.widthconst 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 = 1context.stroke()if (idx > config.levels / 5 * 3) {context.globalAlpha = 0.01context.fill()}})opt.onupdate()}d3.timer(t => {var threshold = (t % 10000) / 10000update(threshold, 1)})this.initCharts(opt, config)update(config.threshold, config.levels)})},image (url) {return new Promise(resolve => {const image = new Image()image.src = urlimage.onload = function () {const canvas = document.createElement(`canvas`)canvas.width = image.width / 8canvas.height = image.height / 8const 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)})}}

echarts中设置地图背景图片相关推荐

CSS中设置页面背景图片
设置背景图片的用法与注意事项 1.背景图片 background-image:url("图片路径") 可以是相对路径和绝对路径例如: background-image: url( ...
html给按钮设置背景,设置按钮背景图片(HTML-CSS)
很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用JS去操作表单的提交,即当用户点击这个图片时响应一个JS来提交表单.其实还有一种方法,就是直接设置SUBMIT按钮的图片背景.设置它的图片 ...
html中body如何设置图片,如何调整body标记中的html背景图片的大小
我想在我的html中使用背景图片(bg.png),但我想调整图片的大小,所以它会始终填充整个页面.我这样做是这样的:如何调整body标记中的html背景图片的大小 .stretch { width:1 ...
java中窗体背景图片_Java Swing 之设置窗体背景图片
/** * 设置窗体背景图片 * @author gao */ package com.gao; import java.awt.Graphics; import java.awt.Image; im ...
【Echarts】Echarts给title添加背景图片
Echarts给title添加背景图片通过rich自定义样式,在rich中添加背景图片,然后应用到title上 myChart.setOption({title: {show: true,//主标题 ...
自定义背景android,Android自定义Button并设置不同背景图片的方法
本文实例讲述了Android自定义Button并设置不同背景图片的方法.分享给大家供大家参考,具体如下: 1.自定义MyButton类 public class MyButton extends Bu ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
Swing设置窗体背景图片
Swing设置窗体背景图片,简单的实现方法就是在窗体中放在一个JLabel标签组件,然后设置该标签的图标属性,最后设置该标签的大小与位置将其铺满窗体. // 设置背景 JLabel lblBackgr ...
Fulutter 设置圆角背景图片Container 设置边框、圆角、阴影
Fulutter 设置圆角背景图片&Container 设置边框.圆角.阴影在 Flutter 中,如何实现背景图片呢?又如何实现带圆角的背景图片呢? Fulutter 设置圆角背景图片使 ...

echarts中设置地图背景图片

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

2.geo3D地图背景

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

echarts中设置地图背景图片相关推荐

最新文章

热门文章