javascript 在弹出窗口中显示“浏览要素”窗口，而不是“摘要”窗口

基本上，您必须使用aggregatedId查询层视图，聚合id是所选集群要素的objectId。
这里我给你举了一个例子，使用你作为基础的esri样本。关键部分，是当CustomContent被渲染（creator方法）的时候。
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

    <title>
        Point clustering - basic configuration | Sample | ArcGIS Maps SDK for
        JavaScript 4.25
    </title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background: rgba(50, 50, 50);
        }

        #infoDiv {
            padding: 10px;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/dark/main.css" />
    <script src="https://js.arcgis.com/4.25/"></script>

    <script>
        require([
            "esri/Map",
            "esri/layers/FeatureLayer",
            "esri/layers/GeoJSONLayer",
            "esri/views/MapView",
            "esri/widgets/Legend",
            "esri/widgets/Expand",
            "esri/widgets/Home",
            "esri/popup/content/CustomContent"
        ], (Map, FeatureLayer, GeoJSONLayer, MapView, Legend, Expand, Home, CustomContent) => {
            
            const layer = new GeoJSONLayer({
                title: "Earthquakes from the last month",
                url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
                copyright: "USGS Earthquakes",
                outFields: ["*"],
                popupTemplate: {
                    title: "Magnitude {mag} {type}",
                    content: "Magnitude {mag} {type} hit {place} on {time}"
                },
                renderer: {
                    type: "simple",
                    field: "mag",
                    symbol: {
                        type: "simple-marker",
                        size: 4,
                        color: "#69dcff",
                        outline: {
                            color: "rgba(0, 139, 174, 0.5)",
                            width: 5
                        }
                    }
                }
            });

            const baseLayer = new FeatureLayer({
                portalItem: {
                    id: "2b93b06dc0dc4e809d3c8db5cb96ba69"
                },
                legendEnabled: false,
                popupEnabled: false,
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        color: [65, 65, 65, 1],
                        outline: {
                            color: [50, 50, 50, 0.75],
                            width: 0.5
                        }
                    }
                },
                spatialReference: {
                    wkid: 5936
                }
            });

            const map = new Map({
                layers: [baseLayer, layer]
            });

            const view = new MapView({
                container: "viewDiv",
                extent: {
                    spatialReference: {
                        wkid: 5936
                    },
                    xmin: 1270382,
                    ymin: -1729511,
                    xmax: 2461436,
                    ymax: -953893
                },
                spatialReference: {
                    // WGS_1984_EPSG_Alaska_Polar_Stereographic
                    wkid: 5936
                },
                constraints: {
                    minScale: 15469455
                },
                map: map
            });

            view.popup.viewModel.includeDefaultActions = false;

            view.whenLayerView(layer).then(lv => {
                const layerView = lv;
                const customContentPromise = new CustomContent({
                    outFields: ["*"],
                    creator: (event) => {
                        const query = layerView.createQuery();
                        query.aggregateIds = [event.graphic.getObjectId()];
                        console.log(query);
                        return layerView.queryFeatures(query).then(result => {
                            console.log(result.features);
                            const contentDiv = document.createElement("div");
                            const featuresUl = document.createElement("ul");
                            let featureLi;
                            for (const feature of result.features) {
                                featureLi = document.createElement("li");
                                featureLi.innerText = `Magnitude ${feature.attributes.mag} ${feature.attributes.type} hit ${feature.attributes.place} on ${feature.attributes.time}`;
                                featuresUl.appendChild(featureLi);
                            }
                            contentDiv.appendChild(featuresUl);
                            return contentDiv
                        });
                    }
                });

                const clusterConfig = {
                    type: "cluster",
                    clusterRadius: "100px",
                    popupTemplate: {
                        title: "Cluster summary",
                        outFields: ["*"],
                        content: [customContentPromise],
                        actions: []
                    },
                    clusterMinSize: "24px",
                    clusterMaxSize: "60px",
                    labelingInfo: [
                        {
                            deconflictionStrategy: "none",
                            labelExpressionInfo: {
                                expression: "Text($feature.cluster_count, '#,###')"
                            },
                            symbol: {
                                type: "text",
                                color: "#004a5d",
                                font: {
                                    weight: "bold",
                                    family: "Noto Sans",
                                    size: "12px"
                                }
                            },
                            labelPlacement: "center-center"
                        }
                    ]
                };

                layer.featureReduction = clusterConfig;

                const toggleButton = document.getElementById("cluster");

                toggleButton.addEventListener("click", () => {
                    let fr = layer.featureReduction;
                    layer.featureReduction =
                        fr && fr.type === "cluster" ? null : clusterConfig;
                    toggleButton.innerText =
                        toggleButton.innerText === "Enable Clustering"
                            ? "Disable Clustering"
                            : "Enable Clustering";
                });
            });
            
            view.ui.add(
                new Home({
                    view: view
                }),
                "top-left"
            );

            const legend = new Legend({
                view: view,
                container: "legendDiv"
            });

            const infoDiv = document.getElementById("infoDiv");
            view.ui.add(
                new Expand({
                    view: view,
                    content: infoDiv,
                    expandIconClass: "esri-icon-layer-list",
                    expanded: false
                }),
                "top-left"
            );

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="infoDiv" class="esri-widget">
        <button id="cluster" class="esri-button">Disable Clustering</button>
        <div id="legendDiv"></div>
    </div>
</body>

</html>
javascript 在弹出窗口中显示“浏览要素”窗口，而不是“摘要”窗口

1条答案

相关问题

热门标签

最新问答
