序文

環境知識のリーフレットエントリ開発シリーズの理解すべきポイント：

リーフレットAPIドキュメントの紹介、リーフレットの各クラスの機能と属性の詳細な紹介

リーフレットオンラインの例

リーフレットプラグイン、リーフレットプラグインライブラリ、非常に便利

コンテンツの概要

リーフレット集計グラフ関数
ソースコードデモダウンロード

効果のグラフは次のとおりです。

この記事では、主にリーフレットの公式Webサイトの集約効果プラグインであるLeaflet.markerclusterについて言及します：https : //github.com/Leaflet/Leaflet.markercluster。
この集約プラグインの具体的な使用方法については、githubアドレスを参照してください。詳細な手順と例があります。

シミュレーションデータのgeojson形式は次のとおりです。

var geojson = {"type"： "FeatureCollection"、 "features" ：[ 
{ "type"： "Feature"、 "geometry"：{"type"： "Point"、 "coordinates"：[113.16305738210656,23.13667404697526]}、 "properties"：{"Name_CHN"： "赤岗塔"、 "StationNum"：1、 "Status"：1 }}、
{ "type"： "Feature"、 "geometry"：{"type"： "Point" 、 "coordinates"：[113.18383377370634,23.100037587172096]}、 "properties"：{"Name_CHN"： "海心沙"、 "StationNum"：2、 "Status"：1 }}、
…… 
]};

さまざまなタイプのアイコンに対応する、シミュレートされたデータのさまざまな属性値に従って、マップを特定のレベルまで拡大します。

// さまざまなステータスタイプに応じてさまざまなアイコンを読み込みます
var img = './img/projectPoint_HGX.png' ;
 switch （properties.Status）{
 case 1 ：
img = './img/projectPoint_HGX.png' ;
 break ;
 case 2 ：
img = './img/projectPoint_JSZT.png' ;
 break ;
 case 3 ：
img = './img/projectPoint_XMXZ.png' ;
 break ;
 case 4 ：
img = './img/projectPoint_XMZS.png' ;
 break ; 
} 
var myIcon =L.icon（{ 
iconUrl：IMG、
iconSize：[ 25、25 ] 
}）。
VaRのマーカー= L.marker（新しい L.LatLngは（座標、[1]の座標[0 ]）、{ 
性質：特性、
アイコン：myIcon、
}）。

コアコードの一部、完全なソースコードのデモのダウンロードを参照してください

var map = L.map（ 'map' ）; 
L.tileLayer（ 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x} ' ）.addTo（map）; 
map.setView（L.latLng（ 22.95186415、113.90271877）、9）; // ズームレベルと中心点を設定
 
// 集計マップ
var projectPointLayer = L.markerClusterGroup（{ 
showCoverageOnHover：false 、
zoomToBoundsOnClick：true 、
chunkedLoading：true 、
maxClusterRadius： 40、// デフォルト80 
}）。addTo（マップ）; 
 
if（geojson）{
addProjectClusterLayers（geojson、projectPointLayer）; 
projectPointLayer.on（ "click"、function （e）{ 
e.layer.unbindPopup（）; 
var elements = getProjectPopupContent（
e.layer.options.properties 
）; 
e.layer.bindPopup（elements [ 0 ]）。OpenPopup（e.latlng）; 
}）; 
} 
 
/ * 
*コンテンツコンテンツのクリック
* / 
function getProjectPopupContent（item）{ 
const {toPopupItemStr} = this ; 
const me = this ;
 // コンテンツとクリックイベント 
const要素= $（
` <div>長さ; 、item.Name_CHN）}
$ {toPopupItemStr（ "站口个数" 、item.StationNum）}
 <a class="edit">详情</a>＆nbsp; 
</ div> ` ）;
要素を返す; 
} // 转转popup项function toPopupItemStr（name、value）{
 戻り値？`<b> $ {name}：</ b> $ {value} <br>`： "";
}; / * 
*追加機能統合図* / function addProjectClusterLayers（geojson、clusterlayer）{
 var markerList = [];
if（geojson.features.length> 0 ）{
 for（var i = 0; i <geojson.features.length;

 


 


VaRのプロパティ= geojson.features [I]の.properties;
 varが座標= geojson.features [I] .geometry.coordinates;
 // 異なるアイコンステータスロードの種類に応じて、
VARの IMG = './img/projectPoint_HGX.png'を、
 スイッチ（ properties.Status）{
 case 1 ：
img = './img/projectPoint_HGX.png' ;
 break ;
 case 2 ：
img = './img/projectPoint_JSZT.png' ;
 break ;
 case 3 ：
img = './img/projectPoint_XMXZ .png ' ;
 ブレーク;
ケース4 ：
img = './img/projectPoint_XMZS.png' ;
休憩; 
} 
VAR myIcon = L.icon（{ 
iconUrl：IMG、
iconSize：[ 25、25 ] 
}）。
VaRのマーカー= L.marker（新しい L.LatLngは（座標、[1]の座標[0 ]）、{ 
性質：特性、
アイコン：myIcon、
}）。
markerList.push（marker）; 
} 
} 
} 
clusterlayer.addLayers（markerList）; 
};

完全なデモソースコードについては、小さな列の最後を参照してください：小さな列

ソースコードは記事の最後にあります。このコラムに興味がある場合は、ウェーブに注意を払うことができます

リーフレット集計グラフ関数（ソースコードダウンロード付き）

序文

コンテンツの概要

おすすめ