第一步：先上代碼！
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Point clustering - generate suggested configuration | Sample | ArcGIS API for JavaScript 4.20</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" target="_blank" rel="external nofollow" />
<script src="https://js.arcgis.com/4.20/"></script>
<style>
html, body, #viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#infoDiv {
background: white;
padding: 10px;
}
</style>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/smartMapping/labels/clusters",
"esri/smartMapping/popup/clusters"
], (Map, MapView, FeatureLayer, Legend, Expand,
clusterLabelCreator, clusterPopupCreator
) => {
let features = [];
var data=JSON.parse("[{\"id\":826,\"entName\":\"長春中西胃腸病醫院\",\"lat\":\"43.8933421433\",\"lng\":\"125.3175788127\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":992,\"entName\":\"長春市九台區污水處理站\",\"lat\":\"44.3006076888\",\"lng\":\"125.7569537709\",\"entKind\":1,\"regionCode\":\"220113\"},{\"id\":1047,\"entName\":\"吉林新華醫院\",\"lat\":\"43.8915575917\",\"lng\":\"125.3873503194\",\"entKind\":1,\"regionCode\":\"220105\"},{\"id\":1087,\"entName\":\"長春市二道區東站社群衛生服務中心\",\"lat\":\"43.8906942436\",\"lng\":\"125.3625299198\",\"entKind\":1,\"regionCode\":\"220105\"},{\"id\":1100,\"entName\":\"長春市神駿專用車制造有限公司\",\"lat\":\"43.9509252573\",\"lng\":\"125.1908700079\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":1152,\"entName\":\"長春市廣達汽車貿易有限公司正陽分公司\",\"lat\":\"43.9073986151\",\"lng\":\"125.2815566261\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":1155,\"entName\":\"長春立民老年病醫院有限公司\",\"lat\":\"43.8483855740\",\"lng\":\"125.3458732696\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":1158,\"entName\":\"吉林奧來德光電材料股份有限公司\",\"lat\":\"44.0499157772\",\"lng\":\"125.2085662842\",\"entKind\":1,\"regionCode\":\"220122\"},{\"id\":1159,\"entName\":\"本特勒長瑞汽車系統（長春）有限公司\",\"lat\":\"43.8094573870\",\"lng\":\"125.2284046077\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":1216,\"entName\":\"長春華陽豐田汽車銷售服務有限公司\",\"lat\":\"43.8828005170\",\"lng\":\"125.2790140972\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":1294,\"entName\":\"吉林省國興汽車貿易有限公司\",\"lat\":\"43.8892539007\",\"lng\":\"125.2529267977\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":1326,\"entName\":\"吉林中山醫院\",\"lat\":\"43.8828211473\",\"lng\":\"125.2819874732\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":1379,\"entName\":\"長春博大喜寶婦産醫院有限公司\",\"lat\":\"43.9273459436\",\"lng\":\"125.2999309874\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":1404,\"entName\":\"長春市南關區長通社群衛生服務中心\",\"lat\":\"43.9081026389\",\"lng\":\"125.3586845434\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":1415,\"entName\":\"長春一汽富晟特必克制動有限公司\",\"lat\":\"43.7996651505\",\"lng\":\"125.2068615043\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":1416,\"entName\":\"長春英平風濕醫院有限責任公司\",\"lat\":\"43.9068571050\",\"lng\":\"125.2812768363\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":1426,\"entName\":\"華能吉林發電有限公司長春熱電廠\",\"lat\":\"44.0664717157\",\"lng\":\"125.1877280218\",\"entKind\":1,\"regionCode\":\"220122\"},{\"id\":1518,\"entName\":\"南關區賢醫堂中醫門診部\",\"lat\":\"43.8857045870\",\"lng\":\"125.3574081411\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":1683,\"entName\":\"楚天華通醫藥裝置有限公司\",\"lat\":\"44.0153404938\",\"lng\":\"125.5154800108\",\"entKind\":1,\"regionCode\":\"220113\"},{\"id\":1684,\"entName\":\"長春市晟孚汽車銷售服務有限公司\",\"lat\":\"43.8891911538\",\"lng\":\"125.2501650158\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":1690,\"entName\":\"吉林省馳恒汽車銷售服務有限公司\",\"lat\":\"43.9513549226\",\"lng\":\"125.3347956580\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":1754,\"entName\":\"榆樹人民醫院\",\"lat\":\"44.8366149985\",\"lng\":\"126.5640617865\",\"entKind\":1,\"regionCode\":\"220182\"},{\"id\":1773,\"entName\":\"長春燒傷醫院\",\"lat\":\"43.9037846984\",\"lng\":\"125.3825971666\",\"entKind\":1,\"regionCode\":\"220105\"},{\"id\":1784,\"entName\":\"長春市人民醫院\",\"lat\":\"43.9097046898\",\"lng\":\"125.3382452994\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":1807,\"entName\":\"吉林省婦幼保健院\",\"lat\":\"43.8908828069\",\"lng\":\"125.3196131244\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":1877,\"entName\":\"吉林省久恒華勝汽車服務有限公司\",\"lat\":\"43.8036388054\",\"lng\":\"125.2275556722\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":1962,\"entName\":\"長春恒康中醫醫院\",\"lat\":\"43.8948604143\",\"lng\":\"125.3090520564\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":2107,\"entName\":\"長春市汽車沖壓件有限公司\",\"lat\":\"43.9018462932\",\"lng\":\"125.1349214918\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":2141,\"entName\":\"長春市彙澤汽車飾件有限公司\",\"lat\":\"43.7590999116\",\"lng\":\"125.2019745184\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":2163,\"entName\":\"長春市軒正汽車零部件有限公司\",\"lat\":\"43.8962416590\",\"lng\":\"125.3788743550\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":2241,\"entName\":\"長春市北銀印刷有限公司\",\"lat\":\"44.4360278172\",\"lng\":\"125.1943373046\",\"entKind\":1,\"regionCode\":\"220122\"},{\"id\":2326,\"entName\":\"康甯傑瑞（吉林）生物科技有限公司\",\"lat\":\"44.0006403198\",\"lng\":\"125.7029650390\",\"entKind\":1,\"regionCode\":\"220113\"},{\"id\":3263,\"entName\":\"長春生修堂中醫院有限公司\",\"lat\":\"43.8940922273\",\"lng\":\"125.3713066809\",\"entKind\":1,\"regionCode\":\"220105\"},{\"id\":3265,\"entName\":\"長春市朝陽區南湖第二社群衛生服務中心\",\"lat\":\"43.8500354776\",\"lng\":\"125.3080379863\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":3313,\"entName\":\"長春恒盛汽車塗裝有限公司\",\"lat\":\"43.7590999116\",\"lng\":\"125.2019745184\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":3457,\"entName\":\"長春市南關區潤堂林氏皮膚病門診部有限公司\",\"lat\":\"43.8997738837\",\"lng\":\"125.3510292737\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":3803,\"entName\":\"農安縣合隆鎮盛鑫汽車零部件加工廠\",\"lat\":\"44.0367335232\",\"lng\":\"125.1887294887\",\"entKind\":1,\"regionCode\":\"220122\"},{\"id\":3901,\"entName\":\"長春市朝陽區萬佳健康體檢中心有限公司\",\"lat\":\"43.8843551517\",\"lng\":\"125.3068614513\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":3926,\"entName\":\"長春市朝陽區桂林社群衛生服務中心\",\"lat\":\"43.8712591075\",\"lng\":\"125.3205822864\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":4014,\"entName\":\"長春華濤汽車塑膠飾件有限公司\",\"lat\":\"43.8406414750\",\"lng\":\"125.2954012559\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":4062,\"entName\":\"吉林省女子強制隔離戒毒醫院\",\"lat\":\"43.9116870138\",\"lng\":\"125.3409533832\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":4063,\"entName\":\"長春中醫藥大學聯影醫學影像診斷中心有限公\",\"lat\":\"43.8911132764\",\"lng\":\"125.3175288975\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":4075,\"entName\":\"吉林省亞信車之家汽車維修連鎖有限公司\",\"lat\":\"43.8483855740\",\"lng\":\"125.3458732696\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":4094,\"entName\":\"花花襪業（朝陽）\",\"lat\":\"43.8406414750\",\"lng\":\"125.2954012559\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":4363,\"entName\":\"吉林日報印刷廠\",\"lat\":\"43.8712765243\",\"lng\":\"125.3804675537\",\"entKind\":1,\"regionCode\":\"220105\"},{\"id\":4438,\"entName\":\"長春威奧軌道交通科技有限公司\",\"lat\":\"43.9812659328\",\"lng\":\"125.2053520573\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":4501,\"entName\":\"長春市婦幼保健計劃生育服務中心\",\"lat\":\"43.8967783263\",\"lng\":\"125.3476697908\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":4557,\"entName\":\"長春市寬城區醫院\",\"lat\":\"43.9076794487\",\"lng\":\"125.3323627269\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":4722,\"entName\":\"吉林省亞飛金屬材料有限公司\",\"lat\":\"44.0237179107\",\"lng\":\"125.5161489331\",\"entKind\":1,\"regionCode\":\"220113\"},{\"id\":4805,\"entName\":\"長春綠園區安泰綜合門診部有限公司\",\"lat\":\"43.9070333316\",\"lng\":\"125.2671789222\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":5011,\"entName\":\"長春卓誼生物股份有限公司\",\"lat\":\"43.6101281021\",\"lng\":\"125.5949839875\",\"entKind\":1,\"regionCode\":\"220112\"},{\"id\":5041,\"entName\":\"長春市中醫院平陽部\",\"lat\":\"43.8800751844\",\"lng\":\"125.3403873259\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":5067,\"entName\":\"農安縣中醫院\",\"lat\":\"44.4342370321\",\"lng\":\"125.1871733182\",\"entKind\":1,\"regionCode\":\"220122\"},{\"id\":5274,\"entName\":\"南關美奇醫療美容外科門診部\",\"lat\":\"43.8533799860\",\"lng\":\"125.3447121666\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":5361,\"entName\":\"長春聖安疼痛病醫院有限公司\",\"lat\":\"43.8782694127\",\"lng\":\"125.4039090157\",\"entKind\":1,\"regionCode\":\"220105\"},{\"id\":5402,\"entName\":\"長春金工表面工程技術有限公司\",\"lat\":\"43.8959011641\",\"lng\":\"125.1352260173\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":5460,\"entName\":\"吉林省亞信汽車維修有限責任公司\",\"lat\":\"43.8971138579\",\"lng\":\"125.3458127400\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":5477,\"entName\":\"長春市婦産醫院\",\"lat\":\"43.9027463788\",\"lng\":\"125.3406076623\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":5478,\"entName\":\"長春中妍奧拉克醫學美容醫院有限公司\",\"lat\":\"43.8200585309\",\"lng\":\"125.3714057173\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":5494,\"entName\":\"南關區雅森汽車維修服務中心\",\"lat\":\"43.8956970562\",\"lng\":\"125.3600442187\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":5563,\"entName\":\"長春市雙陽區福吉醫院\",\"lat\":\"43.5223756360\",\"lng\":\"125.6649742037\",\"entKind\":1,\"regionCode\":\"220112\"},{\"id\":5577,\"entName\":\"長春市雙陽區山河街道佟家社群衛生服務中心\",\"lat\":\"43.4710788885\",\"lng\":\"125.7933166390\",\"entKind\":1,\"regionCode\":\"220112\"},{\"id\":5636,\"entName\":\"長春百維慈康醫院\",\"lat\":\"43.9448426370\",\"lng\":\"125.3355659334\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":5711,\"entName\":\"吉林省一順藥業有限公司\",\"lat\":\"44.0322281233\",\"lng\":\"125.5154610431\",\"entKind\":1,\"regionCode\":\"220113\"},{\"id\":5761,\"entName\":\"南關區康雅口腔門診部\",\"lat\":\"43.9017871196\",\"lng\":\"125.3461363383\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":5775,\"entName\":\"吉林省華強醫藥有限公司\",\"lat\":\"43.9209371032\",\"lng\":\"125.3283454426\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":5887,\"entName\":\"長春精優藥業股份有限公司\",\"lat\":\"44.0001686337\",\"lng\":\"125.5071669883\",\"entKind\":1,\"regionCode\":\"220113\"},{\"id\":6152,\"entName\":\"長春易視頓眼科醫院有限公司\",\"lat\":\"43.8723548166\",\"lng\":\"125.3542258040\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":6185,\"entName\":\"吉林國健美容醫院有限公司\",\"lat\":\"43.9050530305\",\"lng\":\"125.2970313579\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":6227,\"entName\":\"長春瑞寶奔騰汽車銷售服務有限公司\",\"lat\":\"43.9826346791\",\"lng\":\"125.2933084439\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":6322,\"entName\":\"燦盛生化中間體（長春）有限公司\",\"lat\":\"44.8549475883\",\"lng\":\"126.5846930713\",\"entKind\":1,\"regionCode\":\"220182\"},{\"id\":6359,\"entName\":\"吉林省華之誠世達汽車銷售服務有限公司\",\"lat\":\"43.9398464399\",\"lng\":\"125.2994199091\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":6459,\"entName\":\"長春恒誠汽車銷售服務有限公司\",\"lat\":\"43.9826346791\",\"lng\":\"125.2933084439\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":6522,\"entName\":\"長春騰躍汽車銷售服務有限公司\",\"lat\":\"43.9826346791\",\"lng\":\"125.2933084439\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":6548,\"entName\":\"長春市綠園區青年社群衛生服務中心\",\"lat\":\"43.9276348882\",\"lng\":\"125.2961362263\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":6692,\"entName\":\"長春金達州瑞恒汽車銷售服務有限公司\",\"lat\":\"43.9826346791\",\"lng\":\"125.2933084439\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":6915,\"entName\":\"長春市華城汽車服務有限公司\",\"lat\":\"43.8944935422\",\"lng\":\"125.3537537041\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":7006,\"entName\":\"長春市南關區新春社群衛生服務中心\",\"lat\":\"43.8997439086\",\"lng\":\"125.3459201575\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":7011,\"entName\":\"長春市南關區桃源社群衛生服務中心\",\"lat\":\"43.9002163026\",\"lng\":\"125.3593288980\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":7021,\"entName\":\"南關區杏林堂綜合門診部\",\"lat\":\"43.8784872928\",\"lng\":\"125.3349070020\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":7042,\"entName\":\"吉林國健婦産醫院有限公司\",\"lat\":\"43.8918697402\",\"lng\":\"125.2862598295\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":7091,\"entName\":\"長春敏實汽車零部件有限公司\",\"lat\":\"43.8959011641\",\"lng\":\"125.1352260173\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":7102,\"entName\":\"長春市南關區曙光社群衛生服務中心\",\"lat\":\"43.8816246039\",\"lng\":\"125.3433777122\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":7103,\"entName\":\"長春市南關區民康社群衛生服務中心\",\"lat\":\"43.8885631347\",\"lng\":\"125.3494420002\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":7118,\"entName\":\"長春市金龍汽車修理有限公司\",\"lat\":\"43.8805741339\",\"lng\":\"125.3053529996\",\"entKind\":1,\"regionCode\":\"220104\"},{\"id\":7132,\"entName\":\"長春雙陽虹橋醫院\",\"lat\":\"43.5307505548\",\"lng\":\"125.6620829454\",\"entKind\":1,\"regionCode\":\"220112\"},{\"id\":7204,\"entName\":\"長春環通汽車維修有限公司\",\"lat\":\"43.8673534758\",\"lng\":\"125.2194474292\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":7508,\"entName\":\"吉林長龍實業有限公司\",\"lat\":\"43.8863406616\",\"lng\":\"125.4015282366\",\"entKind\":1,\"regionCode\":\"220122\"},{\"id\":7539,\"entName\":\"吉林省海洋醫藥有限公司\",\"lat\":\"43.9274671709\",\"lng\":\"125.3216020428\",\"entKind\":1,\"regionCode\":\"220103\"},{\"id\":7594,\"entName\":\"國藥一心制藥有限公司\",\"lat\":\"43.5310913091\",\"lng\":\"125.6714479322\",\"entKind\":1,\"regionCode\":\"220112\"},{\"id\":7646,\"entName\":\"長春市報廢汽車回收中心有限公司\",\"lat\":\"43.9315996527\",\"lng\":\"125.2951018506\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":7659,\"entName\":\"吉林省電力醫院\",\"lat\":\"43.8787255083\",\"lng\":\"125.3383575965\",\"entKind\":1,\"regionCode\":\"220102\"},{\"id\":7676,\"entName\":\"長春市第二醫院\",\"lat\":\"43.9008753210\",\"lng\":\"125.3042740610\",\"entKind\":1,\"regionCode\":\"220106\"},{\"id\":7712,\"entName\":\"長春市雙陽區奢嶺街道新安社群衛生服務中心\",\"lat\":\"43.7552816721\",\"lng\":\"125.6855022812\",\"entKind\":1,\"regionCode\":\"220112\"},{\"id\":7724,\"entName\":\"農安縣人民醫院\",\"lat\":\"44.4419831220\",\"lng\":\"125.1822620125\",\"entKind\":1,\"regionCode\":\"220122\"}]");
data.forEach(item => {
if (
item.lat != null &&
item.lng != null &&
item.lat != '' &&
item.lng != '') {
features.push({
geometry: {
type: "point",
x: item.lng,//經度
y: item.lat,//緯度
spatialReference: "4326",//坐标系
},
attributes: {
ObjectID: item.id,
crime_count: 10
}
})
}
})
let featurelayerOpt = {
geometryType: "point",
id: 'layerid',
layerid: 'layerid',
source: features,
title: "聚合",
fields: [{ name: "ObjectID", alias: "ObjectID", type: "oid" }, { name: "crime_count", alias: "crime_count", type: "integer" }],
objectIdField: "ObjectID",
visible:true
}
const layer = new FeatureLayer(featurelayerOpt);
const map = new Map({
basemap: "gray-vector",
layers: [ layer ]
});
const view = new MapView({
container: "viewDiv",
map,
center: [ 125, 43.12355 ],
zoom: 4
});
// Override the default symbol representing the cluster extent
view.popup.viewModel.selectedClusterBoundaryFeature.symbol = {
type: "simple-fill",
style: "solid",
color: "rgba(50,50,50,0.15)",
outline: {
width: 0.5,
color: "rgba(50,50,50,0.25)"
}
}
const legend = new Legend({
view,
container: "legendDiv"
});
const infoDiv = document.getElementById("infoDiv");
view.ui.add(
new Expand({
view,
content: infoDiv,
expandIconClass: "esri-icon-layer-list",
expanded: true
}), "top-right");
layer.when()
.then(generateClusterConfig)
.then((featureReduction) => {
layer.featureReduction = featureReduction;
const toggleButton = document.getElementById("toggle-cluster");
toggleButton.addEventListener("click", toggleClustering);
// To turn off clustering on a layer, set the
// featureReduction property to null
function toggleClustering() {
debugger
if(isWithinScaleThreshold()){
let fr = layer.featureReduction;
layer.featureReduction =
fr && fr.type === "cluster" ? null : featureReduction;
}
toggleButton.innerText =
toggleButton.innerText === "Enable Clustering"
? "Disable Clustering"
: "Enable Clustering";
}
view.whenLayerView(layer).then((layerView) => {
const filterSelect = document.getElementById("filter");
// filters the layer using a definitionExpression
// based on a religion selected by the user
filterSelect.addEventListener("change", (event) => {
const newValue = event.target.value;
const whereClause = newValue
? `religion = '${newValue}'`
: null;
layerView.filter = {
where: whereClause
};
// close popup for former cluster that no longer displays
view.popup.close();
});
});
view.watch("scale", (scale) => {
if(toggleButton.innerText === "Disable Clustering"){
layer.featureReduction = isWithinScaleThreshold() ? featureReduction : null;
}
})
}).catch((error) => {
console.error(error);
});
function isWithinScaleThreshold(){
return view.scale > 50000;
}
async function generateClusterConfig(layer){
// generates default popupTemplate
const popupTemplate = await clusterPopupCreator
.getTemplates({ layer })
.then(popupTemplateResponse => popupTemplateResponse.primaryTemplate.value);
// generates default labelingInfo
const { labelingInfo, clusterMinSize } = await clusterLabelCreator
.getLabelSchemes({ layer, view })
.then(labelSchemes => labelSchemes.primaryScheme );
return {
type: "cluster",
popupTemplate,
labelingInfo,
clusterMinSize
};
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
Filter by religion:
<select id="filter" class="esri-select">
<option value="">All</option>
<option value="Hindu">Hindu</option>
<option value="Christian">Christian</option>
<option value="Muslim">Muslim</option>
<option value="Buddhist">Buddhist</option>
<option value="Sikh">Sikh</option>
<option value="Jain">Jain</option>
</select>
<div style="padding-top: 10px;">
<button id="toggle-cluster" class="esri-button">Disable Clustering</button>
</div>
<div id="legendDiv"></div>
</div>
</body>
</html> 第二步：效果圖展示
感謝支援技術分享，請掃碼點贊支援：
技術合作交流qq:2401315930
