arcgis for js 使用自定义数据结合featurelayer实现聚合

最新推荐文章于 2024-06-13 11:14:03 发布
兴诚
最新推荐文章于 2024-06-13 11:14:03 发布
阅读量1.2k
点赞数 1
分类专栏： arcgis for js js
本文链接：https://blog.csdn.net/weixin_42496466/article/details/118639017
版权
js 同时被 2 个专栏收录
34 篇文章 2 订阅
订阅专栏
arcgis for js
16 篇文章 2 订阅
订阅专栏
第一步：先上代码！
<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
兴诚
关注
1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
arcgis for js 使用自定义数据结合featurelayer实现聚合

第一步：先上代码！<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 | S
复制链接

扫一扫