Highcharts · 地图Marker聚集点显示

Highcharts · 地图 series type: ‘mappoint’ 模式 聚集点属性配置

设置 地图鼠标点击 显示提示内容 聚集cluster及其tooltip浮动提示

plotOptions 属性下

mappoint 属性

plotOptions: {
    mappoint: {
        cluster: {
            enabled: true,
            allowOverlap: false,
            animation: {
                duration: 1000
            },
            layoutAlgorithm: {
                type: 'grid',
                gridSize: Props.blok == 'town' ? 1 : 45
            },
        },
        events: {
            click: function(e) {
                console.log('点击浮动聚合点数', e)
            }
        },
        point: {
            events: {
                click: function(e) {
                    console.log('点击触发 1', e)
                },
                mouseOut: function(e) {
                    console.log('鼠标指向触发 5', e)
                },
                mouseOver: function(e) {
                    console.log('鼠标指向触发 6', e)
                },
            },
    
        },
        visible: true, //显示浮动聚合点数量
        cluster: {
            enabled: true, //启用 浮动聚合模式
            allowOverlap: true, //防止折叠,
            drillToCluster: false, //鼠标点击 放大至聚合点
            events: {
                drillToCluster: function(e) {
                    console.log('鼠标点击聚合点', e);
                },
            },
            dataLabels: {
                format: "{point.clusterPointsAmount}", //聚合点显示点数量
            },
            tooltip: {
                clusterFormat: '{point.clusteredData.length}个设备2',
            },
            // layoutAlgorithm: {//聚集点 范围大小
            //     distance: 40,
            //     gridSize: 60,
            //     iterations: 50,
            //     kmeansThreshold: 50,
            // }
            marker: {
                enabled: true,
                fillColor: "#f11", //中心点背景颜色
                // height:undefined,
                lineColor: "#ffaa00", //边框
                lineWidth: 0.1,
                radius: 15,
                // width: 350,
            },
        },
        tooltip: { //浮动提示标签
            pointFormat: '单个点', //单个点 浮动提示标签
            clusterFormat: '{point.clusteredData.length}集中聚集点',
            footerFormat: '设备',
        },
    },
    },

series 属性

[{
    name: 'china',
    data: {
        type: "FeatureCollection",
        name: '中国地图map数据',
        features: [],
        },
    accessibility: {
        exposeAsGroupOnly: true
    },
    borderColor: '#fff',
    nullColor: 'rgba(0, 85, 127, 0.2)',
    dataLabels: {
        enabled: true,
        useHTML: true,
        format: '{point.name}',
        color: '#fff',
        style: {
            textOutline: 'none',
            fontWeight: 300,
            ointerEvents: 'none',
            zIndex: -1,
        },
    },
    }, {
    type: 'mappoint',
    enableMouseTracking: true, //鼠标指示
    name: '设备',
    data: Props.data.map(res => ({
				lat: parseFloat(res.latitude),
				lon: parseFloat(res.longitude),
				value: parseFloat(res.delivery_weight),
				name: res.sn,
				collection_weight: res.collection_weight,
				delivery_weight: res.delivery_weight,
				delivery_count: res.delivery_count,
				user_count: res.user_count,
			})),
    marker: {
        lineWidth: 1,
        lineColor: '#fff',
        radius: 5,
        states: {
            hover: {
                radius: 1 // 悬浮时放大
            },
        }
    },
    customZoom: 1, // 自定义放大属性
    dataLabels: {
        verticalAlign: 'top',
        allowOverlap: false, //重叠
        crop: true,
        inside: true,
        enabled: true,
        style: {
            color: '#fff',
            // fontSize: 8, // 标签字体大小
            fontWeight: 'bold', // 标签字体加粗
            fontStyle: 'italic', // 标签字体斜体
        },
        shape: 'mapmarker',
        // borderColor: '#f11',
        // borderWidth: 1,
        // backgroundColor: 'auto'
    },
    
        animationLimit: 1,    
    }],
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注