记录贴
echarts地铁图，3D地图的下穿
首先说平面的吧，平面地图的下穿通过echats的点击事件，获取到点击板块的名称，通过名称请求json数据，代码如下
myChart.on('click', function (params) {
//params.name 结果是“重庆=chongqing”
if (params.name.indexOf('=') > 0) {//后台传值geoname便于知道那个省市可以下穿
echarMap(params.name.indexOf('=')[1])//调用echartsMap,将geoname传递过去
}
}
//echarts地图配置
function echarMap(geoName){
let echartsMap = echarts.init(document.getElementById('echartsMap'));
echarts.registerMap(geoName, map[geoName]);//获取对应的json数据,最主要的
let option = {
geo: {
map: geoName,
left: myposition,
top: 30,
roam: true,
zoom: 1,
regions: regionsData[n],
label: {
show: geoName == 'chongqing_bananqu' ? true : false,
formatter: function (ad) {
return ad.name.split("=")[0]
},
color: '#fff',
emphasis: {
show: true,
color: "#fff",
formatter: function (data) {
if (data.name.indexOf('=') > 0) {
let arr = data.name.split('=');
return arr[0];
}
},
position: ['0%', '50%'],
},
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
};
}
json数据定义的规则如上图这样就可以动态设定下穿区域了
json数据也可以自定义画出你想要图图形，如室内图，片区图等这些都需要使用经纬度去画出来，需要全国省市区的json数据以及绘制工具的可以私信我哦
3D地图与平面地图下穿方式基本一样只是option定义的内容不一样，需要注意的是3D地图做下穿时，如果配置了3D柱状图以及气泡图,echarts监听不到地图板块点击事件，只能监听到series里面的数据，但是将map3D放到series里面如果有3Dbar等会报错，想要3D柱状图出现需要设置geo3D，将series里面的map3D移出去，option配置如下图
let option = {
title: {
x: 'left',
top: "0",
textStyle: {
color: '#000',
fontSize: 14
}
},
series: [
{
type: 'map3D', // 系列类型
name: 'map3D', // 系列名称
map: _this.mapJsonName,
roam: true,
itemStyle: {
opacity: 1,
borderWidth: 1,
borderColor: '#4bb5ff', // 地图边配色
},
shading:'realistic',
realisticMaterial:{
detailTexture:'images/index/地图表皮2.png',
},
label: {
show: true,
formatter: function (data) {
if (data.name.indexOf('=') > 0) {
let arr = data.name.split('=');
if (_this.mapJsonName == 'chongqing_bananqu') {
if (data.data.sl !=undefined ||data.data.sl !=null) {
return arr[0]+":"+ data.data.slAl+'台';
}else{
return arr[0]
}
}else{
return arr[0]
}
} else {
return data.name;
}
},
textStyle: {
color: '#fff', //地图初始化区域字体颜色
fontSize: 12,
borderColor:'transparent',
backgroundColor: 'transparent'
},
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
itemStyle: {
color: '#34ffc8', // 鼠标移入地图配色
areaColor: '#34ffc8',
},
label: {
show: true,
formatter: function (data) {
if (data.name.indexOf('=') > 0) {
let arr = data.name.split('=');
if (_this.mapJsonName == 'chongqing_bananqu') {
if (data.data.sl !=undefined ||data.data.sl !=null) {
return arr[0]+":"+ data.data.slAl+'台';
}else{
return arr[0]
}
}else{
return arr[0]
}
} else {
return data.name;
}
},
textStyle: {
color: 'black',
fontSize: 12,
zIndex:9999,
padding:[2,7,0,7],
lineHeight:20,
backgroundColor:'#34ffc8'
}
}
},
viewControl: { // 用于鼠标的旋转，缩放等视角控制。
projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
autoRotate: _this.mapAutoRotate, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
//autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
//damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
panMouseButton: 'left', // 平移操作使用的鼠标按键，支持:'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意:如果设置为鼠标右键则会阻止默认的右键菜单。)
rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持:'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
distance: mapPosition, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
alpha: 35, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
beta: 10, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
//minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
//maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
minBeta: -720, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
maxBeta: 720, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
animation: true, // 是否开启动画。[ default: true ]
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
},
// light: { //光照阴影
// main: {
// color: '#fff', //光照颜色
// intensity: 1.2, //光照强度
// //shadowQuality: 'high', //阴影亮度
// shadow: true, //是否显示阴影
// alpha: 55,
// beta: 10
// },
// ambient: {
// intensity: 0.3
// }
// },
data: []
},
]
};
效果图3D地图
平面地图
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
