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