使用api请求加载数据时，ArcGIS：h {名称：“ esri.layers.graphics.QueryEngine”，消息：“不支持的查询”，详细信息：未定义}

Question

我正面临要素图层的问题。使用本地数据绘制地图时。但是，当我在要素图层中使用托管数据时，“绘图”功能可以正常工作，并且对绘图数据的查询也可以正常运行。

但是，当我通过api请求使用本地系统数据时，在地图上绘制对象就可以了，但是查询过滤对要素层数据不起作用。下面是示例代码。

<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

<style>
    #viewDiv {
        height: 100%;
    }
    .popUpMapView {
        height: 400px;
        border: 1px solid #A8A8A8;
    }
    #drawActions {
        padding: 0 5px;
        background: #eee;
        border-left: 1px solid #999;
        border-right: 1px solid #999;
    }
    #drawActions ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #drawActions ul li {
        display: inline-block;
    }
    #drawActions ul li .esri-widget--button {
        background: #eee;
    }
    #drawActions ul li .esri-widget--button:hover {
        background: #fff;
    }
    .esri-ui-top-left .esri-component {
        margin-bottom: 0;
        border-top: solid 1px rgba(50,50,50,0.25);
    }
    .esri-popup.esri-widget {
      max-height: 100%;
    }

    .esri-view-width-xlarge .esri-popup__main-container {
      width: 580px;
    }

    .esri-view-height-less-than-medium .esri-popup__main-container {
      max-height: 500px;
    }

    .esri-view-height-small .esri-ui-corner .esri-component .esri-expand__content,
    .esri-view-width-greater-than-xsmall .esri-expand--auto .esri-expand__content {
        margin-left: 0;
        white-space: nowrap;
    }
    .esri-widget--button {
        outline: 0;
    }
    .esri-legend__layer-body {
        display: table;
        width: 100%;
        margin: 0;
    }
    .color-selection-item-container {
        cursor: pointer;
    }
    .item-selected .color-selection-item-container {
        opacity: 0.5;
    }
    .item-selected .color-selection-item-container.active {
        opacity: 1;
    }
    .item-selected .color-selection-item-container.active .esri-legend__layer-cell--info {
        color: #000;
    }
</style>


<script>
    var dojoConfig = {
        has: {
            "esri-featurelayer-webgl": 1
        }
    }
</script>
<script src="https://js.arcgis.com/4.8/"></script>
<script>
    let highlight;
    let highlightFields = [];
    let povLayer;
    let plantTypeFilterObj = [];
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/WebMap",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/layers/FeatureLayer",
        "esri/widgets/Home",
        "esri/widgets/Legend",
        "esri/widgets/Expand",
        "esri/geometry/Point",
        "esri/config",
        "esri/request",
        "dojo/domReady!"
    ], function(
        Map, MapView, WebMap, SketchViewModel, Graphic, GraphicsLayer, FeatureLayer, Home, Legend, Expand, Point, erisConfig, Request
    ) {

        const tempGraphicsLayer = new GraphicsLayer();

        var map = new Map({
            basemap: "dark-gray",
            layers: [tempGraphicsLayer]
        });

        const view = new MapView({
            map: map,
            container: "viewDiv",
            center: [-91.891111, 42.477778],
            zoom: 4,
            highlightOptions: {
              color: "black",
              haloOpacity: 0,
              fillOpacity: 0.45
            },
        });

        let highlightHandle = null;

        view.when(function() {

                getData()
                    .then(createGraphics)
                    .then(createLayer)
                    .catch(errback);
        });

        function getData() {
            let url = "http://localhost/arcgis/points-listing";
            return Request(url, {
                responseType: "json"
            });
        }

        function createGraphics(response) {
            let items = response.data.data;
            let geojson = items.map(function(item, i) {
                return {
                    geometry: new Point({
                        x: item.lng,
                        y: item.lat
                    }),
                    attributes: {
                        ObjectID:           item.plant_id,
                        name:               item.name,
                        address:            item.street_address,
                        city:               item.city,
                        state_code:         item.state_code,
                        zip:                item.zip,
                        county:             item.county,
                        lng:                item.lng,
                        lat:                item.lat,
                        nameplate_capacity: item.nameplate_capacity,
                        plant_type:         item.plant_type
                    }
                };
            });

            return geojson;
        }

        function createLayer(graphics) {

            let layer = new FeatureLayer({
                source: graphics,

                fields: getFields(), 
                objectIdField: "ObjectID",
                renderer: getRender(),
                geometryType: "point",
                popupTemplate: getTemplate(),
                elevationInfo: {
                    mode: "on-the-ground"
                }
            });

            var legend = new Legend({
                view: view,
                layerInfos: [{
                    layer: layer,
                    title: "Plants detail"
                }]
            });
            view.ui.add(legend, "top-right");
            map.add(layer);

            view.whenLayerView(layer).then(function(layerView) {
                sketchGraphics(layerView);
                setTimeout(function() {
                    hideShowPointsOnPlantTypeBasis();
                    colorSelectionClick();
                }, 1000);
            });
            return layer;
        }

        function hideShowPointsOnPlantTypeBasis()
        {
            let legendContainer = document.getElementsByClassName("esri-legend__layer-table--size-ramp")[0];
            legendContainer.className += " color-section";
            let legendInfoItem = legendContainer.getElementsByClassName("esri-legend__layer-cell--info");


            for (let i = 0; i < legendInfoItem.length; i++) {

                let element = legendInfoItem[i];
                let text = element.innerHTML;
                let value = (text.toUpperCase()).replace(" ", "_");

                checkbox = document.createElement("input");
                checkbox.setAttribute("type", "checkbox");
                checkbox.setAttribute("class", "plant-type-filtering-checkbox");
                checkbox.setAttribute("style", "display:none;");
                checkbox.setAttribute("value", value);

                element.parentNode.classList.add("color-selection-item-container");
                element.parentNode.insertBefore(checkbox, element.parentNode.firstChild);

            }
        }

        function colorSelectionClick() {
            $('.esri-expand__content').on('click', '.color-selection-item-container', function(e) {
                e.preventDefault();
                let $this = $(this);
                let $input = $this.find('input.plant-type-filtering-checkbox');
                let selectedVal = $input.val();

                if(!$input.is(':checked')) {
                    plantTypeFilterObj.push(selectedVal);
                    $input.prop('checked', true);
                    $this.addClass('active');

                } else {
                    $this.removeClass('active');
                    plantTypeFilterObj = plantTypeFilterObj.filter(function(value, index, arr){
                        return value != selectedVal;
                    });
                    $input.prop('checked', false);
                }

                let layerViews = view.layerViews;
                if(plantTypeFilterObj.length > 0) {
                    viewLayer.layer.definitionExpression = "nameplate_capacity > 0 AND plant_type IN ('" + plantTypeFilterObj.join("','") + "')";
                } else {
                    viewLayer.layer.definitionExpression = '';
                }

                let selectedCount = $('.esri-expand__content').find('.color-selection-item-container.active').length;
                if(selectedCount > 0) {
                    $('.esri-expand__content').addClass('item-selected');
                } else {
                    $('.esri-expand__content').removeClass('item-selected');
                }
            });
        }

        function sketchGraphics(layer) {

            viewLayer = layer;

            // create a new sketch view model
            const sketchViewModel = new SketchViewModel({
                view: view,
                layer: tempGraphicsLayer,
                pointSymbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    style: "square",
                    size: "16px"
                }
            });


            setUpClickHandler(view);
            sketchViewModel.on("create", createGraphic);
            sketchViewModel.on("create-complete", addGraphic);

            // Listen the sketchViewModel's update-complete and update-cancel events
            sketchViewModel.on("update-complete", updateGraphic);
            sketchViewModel.on("update-cancel", updateGraphic);


            var drawCircleButton = document.getElementById("circleButton");
            var drawRectangleButton = document.getElementById("rectangleButton");
            var drawPolygonButton = document.getElementById("polygonButton");

            drawCircleButton.onclick = function() {
              resetSketchView();
              sketchViewModel.create("circle");

              setActiveButton(this);
            };

            drawRectangleButton.onclick = function() {
              resetSketchView();
              sketchViewModel.create("rectangle");

              setActiveButton(this);
            };

            drawPolygonButton.onclick = function() {
                resetSketchView();

                sketchViewModel.create("polygon");
                setActiveButton(this);
            };

            view.on('click', function(event) {
                resetSketchView();
            });

            // reset all the changes from map on btn click.
            document.getElementById("resetBtn").onclick = function() {
                resetSketchView();
            };

            function addGraphic(event) {
                const graphic = new Graphic({
                    geometry: event.geometry,
                    symbol: sketchViewModel.graphic.symbol
                });
                tempGraphicsLayer.add(graphic);
                selectFeatures(event.geometry);
            }

            function createGraphic(event) {
                resetHideShowPoints();
            }

            function updateGraphic(event) {
              event.graphic.geometry = event.geometry;
              tempGraphicsLayer.add(event.graphic);

              editGraphic = null;
            }

            function setActiveButton(selectedButton) {

                view.focus();
                var elements = document.getElementsByClassName("active");
                for (var i = 0; i < elements.length; i++) {
                    elements[i].classList.remove("active");
                }
                if (selectedButton) {
                    selectedButton.classList.add("active");
                }
            }

            function resetSketchView() {
                sketchViewModel.reset();
                tempGraphicsLayer.removeAll();

                // remove existing highlighted features
                if (highlight) {
                    highlight.remove();
                }
            }
        }

        function selectFeatures(geometry) {

            view.graphics.removeAll();
            if (viewLayer) {

                let query = {};
                query.returnGeometry = true;
                query.outFields = ["*"];

                viewLayer.queryFeatures(query).then(function(results) {

                    const graphics = results.features;

                    if (graphics.length > 0) {

                        // remove existing highlighted features
                        if (highlight) {
                            highlight.remove();
                        }

                        highlight = viewLayer.highlight(graphics);
                    }
                })
                .catch(errback);
            }
        }

        function removeUnSelectedPoints(viewLayer, graphics)
        {
            graphics.forEach(item => {
                highlightFields.push(item.attributes.FID);
            });

            setTimeout(function() {
                viewLayer.layer.definitionExpression = "FID IN (" + highlightFields.join(",") + ")";
            }, 1000);
        }

        function resetHideShowPoints() {

            if(highlightFields.length > 0) {
                highlightFields = [];
                viewLayer.layer.definitionExpression = "";
                console.log('reset', highlightFields);
            }
        }

        function errback(error) {
            console.error(error);
        }

        function setUpClickHandler(mapview) {
            mapview.on("click", function(event) {

                event.stopPropagation();
                streetView(view, event)

                mapview.hitTest(event).then(function(response) {
                    var results = response.results;
                });
            });
        }

        function streetView(mainMapView, event) {

            // Make sure that there is a valid latitude/longitude
            if (event && event.mapPoint) {

                // Create lat/lon vars to display in popup title
                var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
                var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

                mainMapView.popup.open({
                    // Set the popup's title to the coordinates of the location
                    title: "Map view coordinates: [" + lon + ", " + lat + "]",
                    location: event.mapPoint, // Set the location of the popup to the clicked location
                    content: innerMapPopUp(
                        mainMapView,
                        mainMapView.center,
                        mainMapView.scale
                    )
                });
            } else {
                mainMapView.popup.open({
                    // Set the popup's title to the coordinates of the location
                    title: "Invalid point location",
                    location: event.mapPoint, // Set the location of the popup to the clicked location
                    content: "Please click on a valid location."
                });
            }
        }

        function innerMapPopUp(mainMapView, center, scale) {
            var popupDiv = document.createElement("div");
            popupDiv.classList.add("popUpMapView");

            var popupView = new MapView({
                container: popupDiv,
                map: new Map({
                    basemap: "topo"
                }),
                center: center,
                zoom: 8,
                ui: {
                    components: []
                }
            });
            console.log(popupView);
            // Return a dom node
            return popupView.container;
        }

        function getFields() {
            var fields = [
                {
                    name: "ObjectID",
                    alias: "ObjectID",
                    type: "oid"
                }, {
                    name: "name",
                    alias: "name",
                    type: "string"
                }, {
                    name: "address",
                    alias: "address",
                    type: "string"
                }, {
                    name: "city",
                    alias: "city",
                    type: "string"
                }, {
                    name: "state_code",
                    alias: "state_code",
                    type: "string"
                }, {
                    name: "zip",
                    alias: "zip",
                    type: "string"
                }, {
                    name: "county",
                    alias: "county",
                    type: "string"
                }, {
                    name: "plant_type",
                    alias: "plant_type",
                    type: "string"
                }, {
                    name: "nameplate_capacity",
                    alias: "nameplate_capacity",
                    type: "double"
                }
            ];
            return fields;
        }
        function getTemplate() {
            // Set up popup template for the layer
            var pTemplate = {
                title: "{name}",
                content: [{
                    type: "fields",
                    fieldInfos: [
                        {
                            fieldName: "street_address",
                            label: "Address",
                            visible: true
                        }, 
                        {
                            fieldName: "city",
                            label: "City",
                            visible: true
                        }, 
                        {
                            fieldName: "state_code",
                            label: "State Code",
                            visible: true
                        }, 
                        {
                            fieldName: "zip",
                            label: "Zip",
                            visible: true
                        },
                        {
                            fieldName: "county",
                            label: "County",
                            visible: true
                        },
                        {
                            fieldName: "plant_type",
                            label: "Plant Type",
                            visible: true
                        },
                        {
                            fieldName: "latitude",
                            label: "Latitude",
                            visible: true
                        },
                        {
                            fieldName: "longitude",
                            label: "Longitude",
                            visible: true
                        },
                        {
                            fieldName: "nameplate_capacity",
                            label: "Capacity (MW)",
                            visible: true
                        }
                    ]
                }]
            };
            return pTemplate;
        }

        function getRender() {

            var renderer = {
                type: "unique-value", // autocasts as new SimpleRenderer()
                // Define a default marker symbol with a small outline
                symbol: {
                  type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                  color: "#FFD733"
                },
                defaultLabel: "Other",
                field: "plant_type",
                label: "Plant Type",

                uniqueValueInfos: [
                    {
                        value: "HYDRO",
                        symbol: {
                            type: "simple-marker",
                            color: "hsla(345,80%, 65%, 1)"
                        },
                        label: "Hydro"
                    },
                    {
                        value: "NATURAL_GAS",
                        symbol: {
                            type: "simple-marker",
                            color: "hsla(213,80%, 65%, 1)"
                        },
                        label: "Natural Gas"
                    },
                    {
                        value: "BIOMASS",
                        symbol: {
                            type: "simple-marker",
                            color: "hsla(195,80%, 65%, 1)"
                        },
                        label: "Biomass"
                    },
                    {
                        value: "COAL",
                        symbol: {
                            type: "simple-marker",
                            color: "hsla(336,80%, 65%, 1)"
                        },
                        label: "Coal"
                    },
                    {
                        value: "NUCLEAR",
                        symbol: {
                            type: "simple-marker",
                            color: "hsla(224,80%, 65%, 1)"
                        },
                        label: "Nuclear"
                    },
                    {
                        value: "PETROLIUM",
                        symbol: {
                            type: "simple-marker",
                            color: "hsla(264,80%, 65%, 1)"
                        },
                        label: "Petrolium"
                    },
                    {
                        value: "SOLAR",
                        symbol: {
                            type: "simple-marker",
                            color: "hsla(287,80%, 65%, 1)"
                        },
                        label: "Solar"
                    },
                    {
                        value: "WIND",
                        symbol: {
                            type: "simple-marker",
                            color: "hsla(344,80%, 65%, 1)"
                        },
                        label: "Wind"
                    }
                ],
                visualVariables: [
                    {
                        type: "size",
                        field: "nameplate_capacity",
                        valueUnit: "unknown",
                        legendOptions: {
                              title: "Nameplate Capacity (MW)"
                        },
                        stops: [
                        {
                          value: 500,
                          size: 10,
                          label: "<500"
                        },
                        {
                          value: 2000,
                          size: 15,
                          label: "1000"
                        },
                        {
                          value: 3000,
                          size: 20,
                          label: "4000"
                        },
                        {
                          value: 5000,
                          size: 35,
                          label: "< 10000"
                        }]
                    }
                ]
            };

            return renderer;
        }

        // Set up a home button for resetting the viewpoint to the intial extent
        var homeBtn = new Home({
            view: view
        }, "homeDiv");

        // Instructions expand widget
        const drawIcons = document.getElementById("drawActions");
        instructionsExpand = new Expand({
          expandIconClass: "esri-icon-expand",
          expandTooltip: "Draw Actions",
          expanded: false,
          view: view,
          iconNumber: 4,
          content: drawIcons
        });

        view.ui.add(homeBtn, "top-left");
        view.ui.add(instructionsExpand, "top-left");

        // hide the instructions expand widget when the view becomes focused
        view.watch("focused", function(newValue, oldValue, property, object) {
          if (newValue) {
            instructionsExpand.expanded = false;
          }
        });
    });
</script>

下面是我遇到的问题的屏幕截图。

我花了太多时间来研究。但不幸的是，我找不到任何方法来解决此问题。 请给我一个线索，我想念的。

Answer 1

您似乎没有正确设置查询。你有：

let query = {};
query.returnGeometry = true;
query.outFields = ["*"];
viewLayer.queryFeatures(query)

您需要使用featureLayer's createQuery方法来创建查询对象：

let query = layer.createQuery();
query.returnGeometry = true;
query.outFields = ["*"];
viewLayer.queryFeatures(query)

此外，WebGL渲染仅支持ArcGIS Online或ArcGIS Server 10.6.1上托管的图层，因此突出显示和其他功能将不适用于不满足这些要求的图层。