未捕获（在承诺中）类型错误：无法读取未定义的属性图形。

问题描述 投票：0回答：1

非常 新的JavaScript，并试图使用ArcGIS API for JavaScript 4x松散地按照这里的教程建立一个Web地图。https:/developers.arcgis.comjavascriptlatestsample-codeeviews-composite-viewsindex.html。

我主要是想保留高亮功能，同时允许缩放和平移，所有这些都是在一个单一的视图中使用我自己的网络层。

我在控制台得到的错误是:Uncaught (in promise) TypeError: 无法读取未定义的 "图形 "属性。

我看了几个讨论类似错误的问题，但还是不明白我这里到底是在教程代码中误删了什么，才会抛出错误。如果看到其他部分的代码会有帮助，请告诉我。

这里是高亮功能代码。

// highlight function

mainView
    .when(maintainFixedExtent)
    .then(disableNavigation)
    .then(enableHighlightOnPointerMove);

function maintainFixedExtent(view) {
    var fixedExtent = view.extent.clone();
    view.on("resize", function () {
        view.extent = fixedExtent;
    });
    return view;
}

let highlight = null;
let lastHighlight = null;

function enableHighlightOnPointerMove(view) {
    view.whenLayerView(basinsLayer).then(function (layerView) {
        view.on("pointer-move", function (event) {
            view.hitTest(event).then(function (response) {
                lastHighlight = highlight;

                var id = null;

                if (response.results.length) {
                    var feature = response.results.filter(function (result) {
                        return result.graphic.layer === basinsLayer;
                    })[0].graphic;

                    feature.popupTemplate = basinsLayer.popupTemplate;
                    id = feature.attributes.OBJECTID;
                    highlight = layerView.highlight([id]);
                    var selectionId = mainView.popup.selectedFeature
                        ? mainView.popup.selectedFeature.attributes.OBJECTID
                        : null;

                    if (highlight && id !== selectionId) {
                        mainView.popup.open({
                            features: [feature]
                        });
                    }
                } else {
                    if (mainView.popup.visible) {
                        mainView.popup.close();
                        mainView.popup.clear();
                    }
                }

                // remove the previous highlight
                if (lastHighlight) {
                    lastHighlight.remove();
                    lastHighlight = null;
                }
            });
        });
    });
}

function disableNavigation(view) {
    view.popup.dockEnabled = true;

    view.popup.actions = [];

    function stopEvtPropagation(event) {
        event.stopPropagation();
    }

    return view;
}

编辑：

这是一个使用公共数据的完整工作示例。我想这个问题与我同时拥有一个点层和一个多边形层有关。我只想在多边形层上使用高光函数，但如果你悬停够多，控制台中就会出现 "uncaught(in promise)TypeError: cannot read property graphic of undefined"，我想这与点层有关。有什么变通的办法吗？

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the views-composite-views sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/views-composite-views/index.html
  -->
<title>Create an app with composite views - 4.15</title>

    <style>
      html,
      body,
      #mainViewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #akViewDiv {
        padding: 0;
        margin: 0;
        height: 225px;
        width: 300px;
        background-color: rgba(255, 255, 255, 0.9);
      }

      #hiViewDiv {
        padding: 0;
        margin: 0;
        height: 135px;
        width: 200px;
        background-color: rgba(255, 255, 255, 0.9);
      }
    </style>

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

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/Legend"
      ], function(Map, MapView, FeatureLayer, Legend) {
        var layer = new FeatureLayer({
          portalItem: {
            id: "b234a118ab6b4c91908a1cf677941702"
          },
          outFields: ["NAME", "STATE_NAME", "VACANT", "HSE_UNITS"],
          title: "U.S. counties"
        });

       var layer2 = new FeatureLayer({
          url: "https://services1.arcgis.com/0MSEUqKaxRlEPj5g/arcgis/rest/services/ncov_cases_US/FeatureServer/0"
        }); 

        var map = new Map({
          layers: [layer, layer2]
        });

        var mainView = new MapView({
          container: "mainViewDiv",
          map: map,
          popup: {
            highlightEnabled: false,
            dockEnabled: true,
            dockOptions: {
              breakpoint: false,
              position: "top-right"
            }
          },
          extent: {
            xmin: -3094834,
            ymin: -44986,
            xmax: 2752687,
            ymax: 3271654,
            spatialReference: {
              wkid: 5070
            }
          },
          spatialReference: {
            // NAD_1983_Contiguous_USA_Albers
            wkid: 5070
          },
          ui: {
            components: ["attribution"]
          }
        });
        mainView.ui.add(
          new Legend({
            view: mainView
          }),
          "bottom-right"
        );


mainView
          .when(disablePopupOnClick)
          .then(enableHighlightOnPointerMove);

        let highlight = null;
        let lastHighlight = null;

        function enableHighlightOnPointerMove(view) {
          view.whenLayerView(layer).then(function(layerView) {
            view.on("pointer-move", function(event) {
              view.hitTest(event).then(function(response) {
                lastHighlight = highlight;

                // if a feature is returned, highlight it
                // and display its attributes in the popup
                // if no features are returned, then close the popup
                var id = null;

                if (response.results.length) {
                  var feature = response.results.filter(function(result) {
                    return result.graphic.layer === layer;
                  })[0].graphic;

                  feature.popupTemplate = layer.popupTemplate;
                  id = feature.attributes.OBJECTID;
                  highlight = layerView.highlight([id]);
                  var selectionId = mainView.popup.selectedFeature
                    ? mainView.popup.selectedFeature.attributes.OBJECTID
                    : null;

                  if (highlight && id !== selectionId) {
                    mainView.popup.open({
                      features: [feature]
                    });
                  }
                } else {
                  if (mainView.popup.visible) {
                    mainView.popup.close();
                    mainView.popup.clear();
                  }
                }

                // remove the previous highlight
                if (lastHighlight) {
                  lastHighlight.remove();
                  lastHighlight = null;
                }
              });
            });
          });
        }

        // prevents the user from opening the popup with click

        function disablePopupOnClick(view) {
          view.on("click", function(event) {
            event.stopPropagation();
          });
          return view;
        }
      });
    </script>
  </head>

  <body>
    <div id="mainViewDiv"></div>
    <div id="akViewDiv" class="esri-widget"></div>
    <div id="hiViewDiv" class="esri-widget"></div>
  </body>
</html>

enter image description here

javascript arcgis-js-api
1个回答
1
投票

我认为你要实现的例子。根据ArcGIS的问题示例，只要删除一切停止在地图上的导航，以及额外的视图。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>highlight features - 4.15</title>

    <style>
      html,
      body,
      #mainViewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function(Map, MapView, FeatureLayer) {
        var layer = new FeatureLayer({
          portalItem: {
            id: "b234a118ab6b4c91908a1cf677941702"
          },
          outFields: ["NAME", "STATE_NAME", "VACANT", "HSE_UNITS"],
          title: "U.S. counties"
        });

        var map = new Map({
          layers: [layer]
        });

        var mainView = new MapView({
          container: "mainViewDiv",
          map: map,
          popup: {
            highlightEnabled: false,
            dockEnabled: true,
            dockOptions: {
              breakpoint: false,
              position: "top-right"
            }
          },
          extent: {
            xmin: -3094834,
            ymin: -44986,
            xmax: 2752687,
            ymax: 3271654,
            spatialReference: {
              wkid: 5070
            }
          },
          spatialReference: {
            // NAD_1983_Contiguous_USA_Albers
            wkid: 5070
          },
          ui: {
            components: ["attribution"]
          }
        });
        
        mainView
          .when(disablePopupOnClick)
          .then(enableHighlightOnPointerMove);
        
        let highlight = null;
        let lastHighlight = null;

        function clearPopup() {
          if (mainView.popup.visible) {
            mainView.popup.close();
            mainView.popup.clear();
          }
        }

        function clearHighlight(lastHighlight) {
          if (lastHighlight) {
            lastHighlight.remove();
            lastHighlight = null;
          }
        }

        function enableHighlightOnPointerMove(view) {
          view.whenLayerView(layer).then(function(layerView) {
            view.on("pointer-move", function(event) {
              view.hitTest(event).then(function(response) {
                lastHighlight = highlight;
                var id = null;
                
                if (response.results.length) {
                  clearPopup();
                }

                var filterFeatures = response.results.filter(function(result) {
                  return result.graphic.layer === layer;
                });

                if (filterFeatures && filterFeatures.length > 0) {
                  var feature = filterFeatures[0].graphic;
                  feature.popupTemplate = layer.popupTemplate;
                  id = feature.attributes.OBJECTID;
                  highlight = layerView.highlight([id]);
                  var selectionId = mainView.popup.selectedFeature
                    ? mainView.popup.selectedFeature.attributes.OBJECTID
                    : null;

                  if (highlight && id !== selectionId) {
                    mainView.popup.open({
                      features: [feature]
                    });
                  }

                } else {
                  clearPopup();
                  console.log('filterFeatures is empty');
                }
                
                clearHighlight(lastHighlight);

              });
            });
          });
        }
        
        // prevents the user from opening the popup with click

        function disablePopupOnClick(view) {
          view.on("click", function(event) {
            event.stopPropagation();
          });
          return view;
        }
      });
    </script>
  </head>

  <body>
    <div id="mainViewDiv"></div>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.