第一步:先上代码!
<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" /> <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