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