第一步：先上代码！
<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
