echarts geo3D地图标记点自定义照片
使用symbol自定义照片时不显示原照片
symbol: 'image://'+this.img2,
symbolSize: [30, 50],
这时可以用label下的背景图片实现
img2:require('@/assets/images/positioning.png')
series:[
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
data: this.labelData,
itemStyle:{
depthTest: false, // 关闭深度测试（防止被地图遮挡）
color:"transparent",
},
label: { // 点击标记点显示队伍名称
show: true,
position: "top",
distance: -60,
formatter(params) {
return "2";
},
textStyle: {
color: "transparent",
padding: [20, 8],
backgroundColor: {
image: this.img2,
},
},
},
silent: false,
}
]设置完背景图后发现点击标记点时，点击区域太小而且不能点击自定义照片实现点击效果，这时可以去设置symbol的照片，然后把symbol照片隐藏掉，只需要symbol的点击区域就可以了
这里的value值需要设置三个参数
{
name: e.teamLevelName,
id:e.id,
value: [e.teamLocationLongitude, e.teamLocationLatitude,10],
symbol: 'image://'+this.img2,
symbolSize: [30, 50],
// opacity: 0 // 完全透明（双重保险）
}完整代码实现
var myChart = echarts.init(document.getElementById("mapEchart"));
echarts.registerMap("beijing", geoJson);
myChart.showLoading({text: 'loading'})
var regionsData = [
{
name:"房山区",
itemStyle:{
color:'rgba(36,121,207,1)',
// borderWidth:1.4,
// shadowColor: 'rgba(45,143,204,1)', // 设置阴影颜色
// shadowBlur: .2, // 设置阴影模糊程度
// shadowOffsetX: 2, // 设置阴影水平偏移
// shadowOffsetY: 3, // 设置
// borderColor:'pink',
}
},
{
name:"大兴区",
itemStyle:{
color:'rgba(68,205,253,1)'
}
},
{
name:"通州区",
itemStyle:{
color:'rgba(65,174,226,1)',
}
},
{
name:"丰台区",
itemStyle:{
color:'rgba(68,205,253,1)'
}
},
{
name:"门头沟区",
itemStyle:{
color:'rgba(36,121,207,1)'
}
},
{
name:"石景山区",
itemStyle:{
color:'rgba(69,150,249,1)'
}
},
{
name:"海淀区",
itemStyle:{
color:'rgba(68,198,205,1)'
}
},
{
name:"西城区",
itemStyle:{
color:'rgba(116,255,255,1)'
}
},
{
name:"东城区",
itemStyle:{
color:'rgba(116,255,255,1)'
}
},
{
name:"昌平区",
itemStyle:{
color:'rgba(34,166,255,1)'
}
},
{
name:"延庆区",
itemStyle:{
color:'rgba(30,100,203,1)'
}
},
{
name:"怀柔区",
itemStyle:{
color:'rgba(30,100,203,1)'
}
},
{
name:"密云区",
itemStyle:{
color:'rgba(40,131,218,1)'
}
},
{
name:"平谷区",
itemStyle:{
color:'rgba(38,124,222,1)'
}
},
{
name:"顺义区",
itemStyle:{
color:'rgba(75,181,220,1)'
}
},
{
name:"朝阳区",
itemStyle:{
color:'rgba(141,203,252,1)'
}
},
];
// 图表配置项
let option = {
// backgroundColor: '#ccc', // 全局背景色
geo3D: [
{
map: "beijing",
zlevel: 2, // 显示层级
// bottom:'8%',
// environment:this.img2,
roam: true,
boxHeight:6, // 地图高度（避免扁平效果）
// 地图视角控制（关键配置）
viewControl: {
projection: 'perspective', // 透视投影
autoRotate: false, // 关闭自动旋转
distance: 96, // 初始视角距离（控制缩放）
alpha: 40, // 水平旋转角度（经度方向）
beta: 0, // 垂直旋转角度（纬度方向）
center: [-9, 0, 10] // 视角中心点（默认居中） // 向右偏移 10 单位，向下偏移 5 单位
},
// 调整地图位置和大小（可选）
// left: '1%', // 地图左侧距离容器左侧的百分比
// top: '1%', // 地图顶部距离容器顶部的百分比
// right: '1%', // 地图右侧距离容器右侧的百分比
// bottom: '1%', // 地图底部距离容器底部的百分比
silent: true,
regions:regionsData,
label: {
show: true,
color: "#fff", //地图初始化区域字体颜色
borderWidth:0,
textStyle: {
color: "#fff", //地图初始化区域字体颜色
fontSize: 16,
fontWeight:900,
},
},
shading: "lambert",
light: {
//光照阴影
main: {
color: "#fff", //光照颜色
//shadowQuality: 'high', //阴影亮度
// shadowQuality: "medium", //阴影质量 ultra //阴影亮度
intensity:1, //光照强度
alpha: 15, // 光源水平角度（类似经度）
beta: -32, // 光源垂直角度（类似纬度）
shadow: true, // 启用阴影（需环境光遮蔽支持）
shadowQuality: 'low' // 阴影质量（high/medium/low）
},
ambient: {
intensity: 0.7 // 环境光强度（影响整体亮度）
}
},
itemStyle: {
borderWidth:1,
borderColor: 'rgba(255,255,255,1)', // 设置边界颜色
},
},
{ // 投影层
map: 'beijing',
zlevel: 1, // 置于主图层下方
// 地图视角控制（关键配置）
viewControl: {
projection: 'perspective', // 透视投影
autoRotate: false, // 关闭自动旋转
distance: 96, // 初始视角距离（控制缩放）
alpha: 40, // 水平旋转角度（经度方向）
beta: 0, // 垂直旋转角度（纬度方向）
center: [-9, 2, 10] // 视角中心点（默认居中） // 向右偏移 10 单位，向下偏移 5 单位
},
light: {
//光照阴影
main: {
color: "#fff", //光照颜色
shadow: true, // 启用阴影（需环境光遮蔽支持）
intensity:1, //光照强度
alpha: 60, // 光源水平角度（类似经度）
beta: -0, // 光源垂直角度（类似纬度）
shadowQuality: 'high' // 阴影质量（high/medium/low）
},
ambient: {
intensity: 0.6 // 环境光强度（影响整体亮度）
}
},
regions:regionsData,
// boxHeight:10, // 地图高度（避免扁平效果）
// 同步交互
roam: true,
silent: true // 禁止交互穿透
}
],
series:[
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
data: [
{
name: e.teamLevelName,
id:e.id,
value: [e.teamLocationLongitude, e.teamLocationLatitude,10],
symbol: 'image://'+this.img2,
symbolSize: [30, 50],
// opacity: 0 // 完全透明（双重保险）
}
],
itemStyle:{
depthTest: false, // 关闭深度测试（防止被地图遮挡）
color:"transparent",
},
label: { // 点击标记点显示队伍名称
show: true,
position: "top",
distance: -60,
formatter(params) {
return "2";
},
textStyle: {
color: "transparent",
padding: [20, 8],
backgroundColor: {
image: this.img2,
},
},
},
silent: false,
}
]
};
await myChart.setOption(option);