解決地圖點(diǎn)聚合功能加載效率問(wèn)題,上萬(wàn)條記錄1秒即可加載

發(fā)表人：金馬　|　2024-01-02

首先，我們來(lái)看看地圖的點(diǎn)聚合功能展示，如下圖：

地圖點(diǎn)聚合功能使用場(chǎng)景非常多，如用戶打卡，訪客IP分布統(tǒng)計(jì)等。

本次介紹的功能是網(wǎng)站訪客的地理位置分布統(tǒng)計(jì)展示。

首先，我們要收集網(wǎng)站訪客的IP地址信息，但是僅僅知道IP地址是無(wú)法做地圖點(diǎn)聚合統(tǒng)計(jì)展示的。

我們需要把IP地址轉(zhuǎn)換地圖的經(jīng)緯度坐標(biāo)信息，即lng和lat值。

把IP地址轉(zhuǎn)換成物理位置以及經(jīng)緯度坐標(biāo)等信息，這個(gè)需要轉(zhuǎn)換，這個(gè)轉(zhuǎn)換需要一個(gè)非常龐大的數(shù)據(jù)庫(kù)支撐，如IPV4的數(shù)據(jù)量大概是43億左右。

一般做轉(zhuǎn)換有兩種方法，一是使用開(kāi)源的離線庫(kù)（現(xiàn)在都商業(yè)化運(yùn)營(yíng)了，免費(fèi)的基本很少更新了），二是使用付費(fèi)API轉(zhuǎn)換。

本文展示的數(shù)據(jù)是通過(guò)金馬科技的IPV4 API JSON接口轉(zhuǎn)換的。

對(duì)于我們自己的數(shù)據(jù)表結(jié)構(gòu)至少需如下：

CREATE TABLE IF NOT EXISTS `ip_info` (
  `id` int(8) NOT NULL,
  `ip` varchar(16) DEFAULT NULL COMMENT 'ip地址',
  `browser` varchar(128) DEFAULT NULL COMMENT '瀏覽器',
  `addinfo` varchar(128) DEFAULT NULL COMMENT '物理位置',
  `isp` varchar(128) DEFAULT NULL COMMENT '網(wǎng)絡(luò)服務(wù)商',
  `lng` varchar(16) DEFAULT NULL,
  `lat` varchar(16) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `ip_info`
--
ALTER TABLE `ip_info`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `ip_info`
--
ALTER TABLE `ip_info`
  MODIFY `id` int(8) NOT NULL AUTO_INCREMENT;

這個(gè)ip_info數(shù)據(jù)表是最基本的訪客信息，大家可以根據(jù)實(shí)際情況做擴(kuò)展。

IPV4 API JSON接口轉(zhuǎn)換請(qǐng)參考《一招解決開(kāi)發(fā)難題：IP地址轉(zhuǎn)換物理地址與經(jīng)緯度僅需幾行代碼》的文章，這里就不再表述了。

有了數(shù)據(jù)之后，接下來(lái)就是地圖展示了。

一般1000個(gè)點(diǎn)以下的數(shù)據(jù)不需要使用聚合功能，客戶端展示也是比較流暢，但如果上萬(wàn)，或上十萬(wàn)等數(shù)據(jù)量時(shí)，就需要使用點(diǎn)聚合的功能了。

大家先看展示：

http://list.wzjm.cn/ipv4/v1/index

這個(gè)點(diǎn)聚合的功能就是把重復(fù)點(diǎn)用數(shù)字加樣式表示，這樣就完美避免了數(shù)據(jù)加載慢的問(wèn)題。

貼上關(guān)鍵性代碼：

<script type="text/javascript">
// 地圖API功能
var map = new BMap.Map("allmap");
 map.addControl(new BMap.NavigationControl());
 map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
 //map.enableScrollWheelZoom();
 
 var markers = [];
 var pt = null;
 var i = 0;
 var b=0;
var markerClusterer;

 function fn_test(message) {
             if(markers.length>0)
             {
            markerClusterer.removeMarkers(markers);
            markers=[];
            }
           var m=eval(message);
           for( i=0;i<m.length;i++)
           {
                 pt = new BMap.Point(m[i].GpsData.Longtitude,m[i].GpsData.Latitude);
                 markers.push(new BMap.Marker(pt));
                
           }

 }
 function fn_test2() {
           markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
 }


	var MAX = 10000;

	for (; i < MAX; i++) {
	   pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
	   
	   markers.push(new BMap.Marker(pt));
	}
	
	//最簡(jiǎn)單的用法，生成一個(gè)marker數(shù)組，然后調(diào)用markerClusterer類即可。
	var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
</script>

以上隨機(jī)生成一萬(wàn)個(gè)點(diǎn)，采用點(diǎn)聚合功能僅需1秒就加載好地圖了。

然后再加了點(diǎn)擊事件，如下圖：