实现地图渲染见另外一篇:https://www.jianshu.com/p/78f9d1ee1790。
这里只记录实现气泡功能。项目采用react 选用的是Highcharts 和 highcharts-react-official库。实现气泡功能与highcharts-react-official没有关系,主要还是Highcharts。highcharts-react-official只是封装了一层,让Highcharts能用react组件的形式渲染。
在项目中,按照官网设置series如下:
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.capital}'
},
name: 'Cities',
data: data,
maxSize: '12%',
color: H.getOptions().colors[0]
}]
但设置后页面如下:没有显示气泡。
进一步对比,发现在html中还引入一个js,
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
在项目的index.html引入后,地图气泡图渲染完成。