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