您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了Openlayers實(shí)現(xiàn)聚合標(biāo)注的具體代碼,供大家參考,具體內(nèi)容如下
1、聚合標(biāo)注
聚合標(biāo)注是指在不同的地圖分辨率下,通過聚合的方式來展示標(biāo)注點(diǎn)的一種方法,其目的就是為了減少當(dāng)前視窗中加載的標(biāo)注點(diǎn)的數(shù)量,從而提高客戶端的渲染速度,有點(diǎn)類似于ArcGIS的點(diǎn)抽稀。
2、代碼實(shí)現(xiàn)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../lib/ol/ol.js"></script> <script type="text/javascript"> window.onload = function () { //初始化地圖 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: new ol.proj.fromLonLat([116.28, 39.54]), zoom: 8 }) }); //創(chuàng)建要素的數(shù)量 //10000個(gè)點(diǎn)沒有任何壓力,50000個(gè)點(diǎn)稍微有些卡了,100000個(gè)點(diǎn)可以把瀏覽器卡崩潰 var count = 10000; //創(chuàng)建一個(gè)要素?cái)?shù)組 var features = new Array(count); //坐標(biāo)偏移量 var e = 8500000; for (var i = 0; i < count; i++) { //要素坐標(biāo) var coordinates = [3 * e * Math.random() - e, 2 * e * Math.random() - e]; //新建點(diǎn)要素 features[i] = new ol.Feature(new ol.geom.Point(coordinates)); } //初始化矢量數(shù)據(jù)源 var source = new ol.source.Vector({ //要素 features:features }); //初始化聚合標(biāo)注數(shù)據(jù)源 var clusterSource = new ol.source.Cluster({ //標(biāo)注元素之間的間距 distance: 40, //數(shù)據(jù)源 source:source }); //樣式緩存 var styleCache = {}; //初始化矢量圖層 var clusters = new ol.layer.Vector({ //數(shù)據(jù)源 source: clusterSource, //樣式 style: function (feature, resolution) { //當(dāng)前聚合標(biāo)注數(shù)據(jù)源的要素大小 var size = feature.get('features').length; //定義樣式 var style = styleCache[size]; //如果當(dāng)前樣式不存在則創(chuàng)建 if (!style) { style = [ //初始化樣式 new ol.style.Style({ //點(diǎn)樣式 image: new ol.style.Circle({ //點(diǎn)的半徑 radius: 10, //筆觸 stroke: new ol.style.Stroke({ color: '#fff' }), //填充 fill: new ol.style.Fill({ color: '#3399cc' }) }), //文本樣式 text: new ol.style.Text({ //文本內(nèi)容 text: size.toString(), //填充 fill: new ol.style.Fill({ color: '#fff' }) }) }) ]; styleCache[size] = style; } return style; } }); //將聚合標(biāo)注圖層添加到map中 map.addLayer(clusters); //獲取添加聚合標(biāo)注按鈕 document.getElementById('addFeatures').onclick = function () { //獲取聚合標(biāo)注數(shù)據(jù)源中的要素 var currentFeatures = clusterSource.getSource().getFeatures(); //如果當(dāng)前數(shù)據(jù)源中沒有任何要素則添加 if (currentFeatures.length == 0) { clusterSource.getSource().addFeatures(features); clusters.setSource(clusterSource); map.addLayer(clusters); } }; //獲取移除聚合標(biāo)注的按鈕 document.getElementById('removeFeatures').onclick = function () { //清除聚合標(biāo)注數(shù)據(jù)源中的所有元素 clusterSource.getSource().clear(); //從map中移除聚合標(biāo)注圖層 map.removeLayer(clusters); }; }; </script> </head> <body> <input type="button" name="name" value="添加聚合標(biāo)簽" id="addFeatures" /> <input type="button" name="name" value="移除聚合標(biāo)簽" id="removeFeatures" /> <div id="map"></div> </body> </html>
3、結(jié)果展示
初始化界面
隨意更改地圖的分辨率(進(jìn)行縮放操作),標(biāo)注點(diǎn)的數(shù)量也會(huì)跟著改變
單擊左上角的移除聚合標(biāo)簽按鈕,則會(huì)清空界面上的所有標(biāo)注
單擊左上角的添加聚合標(biāo)簽按鈕,則會(huì)在界面上重新添加聚合標(biāo)注
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。