Echarts地图缩放(平面,3D,scatter(散点))
程序员文章站
2022-04-02 09:38:49
...
Echarts地图缩放(平面,3D,scatter(散点))
平面地图缩放设置(roam : true 允许缩放;false 禁止缩放):
bmap: {
type:'map',
//地图中心经纬度。
center: [116.46, 39.92],
//地图的缩放等级 一次性放大的大小
zoom: 10,
// 是否开启鼠标缩放和平移漫游。默认不开启。
如果只想要开启缩放或者平移,
可以设置成 'scale' 或者 'move'。设置成 true 为都开启
roam: true,
........
},
Scattter 散点地图(缩放 同样支持roam属性,只是与平面图不同的是所放置的位置不同(散点地图roam属性放置在service坐标类型里面)):
option = {
title: {... },
tooltip : {...},
//******同下方service坐标类型******
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
是否开启鼠标缩放和平移漫游。默认不开启。
如果只想要开启缩放或者平移,
可以设置成 'scale' 或者 'move'。设置成 true 为都开启
roam: true,
mapStyle: {
styleJson: [{... }
},
series : [
{
name: 'pm2.5',
type: 'scatter',
*******servise坐标类型********
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {... },
encode: {...},
label: {...},
itemStyle: {...},
emphasis: {... }
},
{
name: 'Top 5',
type: 'effectScatter',
******service坐标类型******
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {... }).slice(0, 6)),
symbolSize: function (val) {... },
encode: {...},
showEffectOn: 'render',
rippleEffect: {... },
hoverAnimation: true,
label: {... },
itemStyle: { ...},
zlevel: 1
}
]
};
echart 3d地图 geo3D缺少roam属性 所以也无法设置false
所以只能用其他方式来实现 ):
series: [{
type: 'map3D',
zoom: 1.25,
viewControl: {
projection: 'orthographic',
autoRotate: false,
/此处为动态
orthographicSize: orthographicSize,
alpha: 75, // 视角绕 x 轴,即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
beta: 0,
damping: 0,
// 旋转操作的灵敏度,值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转; rotateSensitivity: [0, 1]——只能纵向旋转。
rotateSensitivity: 0,
// *****缩放操作的灵敏度,值越大越灵敏。默认为1,设置为0后无法缩放******。
zoomSensitivity: 1,
panSensitivity: 0
}
}],
上一篇: caioj1206 【计算几何】最近点对的距离(分治)
下一篇: 3d场景中的平面转2维平面