欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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
        }
    ]
};

Scatter散点图缩放官网例子

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
                }
            }],

3D地图缩放官网例子

相关标签: 自己项目中总结