Fatal编程技术网
  • javascript/
  • Javascript 未捕获（承诺中）TypeError:无法读取未定义的属性图形

Javascript 未捕获（承诺中）TypeError:无法读取未定义的属性图形

javascript

Javascript 未捕获（承诺中）TypeError:无法读取未定义的属性图形,javascript,arcgis-js-api,Javascript,Arcgis Js Api,JavaScript非常新，尝试使用ArcGIS API for JavaScript 4x构建web地图，大致遵循以下教程： 我主要希望在允许缩放和平移的同时保留突出显示功能，所有这些都在使用我自己的web层的单个视图中 我在控制台中得到的错误是： 未捕获（承诺中）TypeError:无法读取未定义的属性“graphic” 我已经看了一些讨论类似错误的问题，但仍然不完全理解我在这里从教程代码中为抛出错误而错误编辑的内容。如果看到代码的其他部分会有所帮助，请告诉我。我的头撞到墙上了-任何帮助都将

JavaScript非常新，尝试使用ArcGIS API for JavaScript 4x构建web地图，大致遵循以下教程：

我主要希望在允许缩放和平移的同时保留突出显示功能，所有这些都在使用我自己的web层的单个视图中

我在控制台中得到的错误是： 未捕获（承诺中）TypeError:无法读取未定义的属性“graphic”

我已经看了一些讨论类似错误的问题，但仍然不完全理解我在这里从教程代码中为抛出错误而错误编辑的内容。如果看到代码的其他部分会有所帮助，请告诉我。我的头撞到墙上了-任何帮助都将不胜感激

以下是突出显示的功能代码：

// 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;
}
编辑：

下面是一个使用公共数据的完整工作示例。我认为这个问题与我同时拥有一个点层和一个多边形层有关。我只想在多边形层上使用highlight函数，但如果您在周围停留足够长的时间，控制台中会出现“uncaught（in promise）TypeError:cannotreadproperty 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>


创建具有复合视图的应用程序-4.15
html，
身体，
#mainViewDiv{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
}
#阿克维迪夫{
填充：0；
保证金：0；
身高：225px；
宽度：300px；
背景色：rgba（255、255、255、0.9）；
}
#hiViewDiv{
填充：0；
保证金：0；
高度：135px；
宽度：200px；
背景色：rgba（255、255、255、0.9）；
}
要求([
“esri/Map”，
“esri/views/MapView”，
“esri/图层/功能图层”，
“esri/widgets/Legend”
]，功能（地图、地图视图、要素图层、图例）{
var图层=新功能图层({
portalItem：{
id:“b234a118ab6b4c91908a1cf677941702”
},
外场：[“名称”、“州名称”、“空缺”、“HSE单位”]，
标题：“美国各州”
});
var layer2=新功能层({
url:“https://services1.arcgis.com/0MSEUqKaxRlEPj5g/arcgis/rest/services/ncov_cases_US/FeatureServer/0"
}); 
var映射=新映射({
层：[层，层2]
});
var mainView=新地图视图({
容器：“mainViewDiv”，
地图：地图，
弹出窗口：{
高亮度：错误，
可停靠的：是的，
文件选项：{
断点：false，
位置：“右上方”
}
},
范围：{
xmin:-3094834，
ymin:-44986，
xmax:2752687，
ymax:3271654，
空间参考：{
西九龙总区：5070
}
},
空间参考：{
//1983年全国大学美国大学
西九龙总区：5070
},
用户界面：{
组成部分：[“归属”]
}
});
mainView.ui.add(
新传奇({
视图：mainView
}),
“右下角”
);
主视图
.when（禁用PopupOnClick）
。然后（启用HighlightOnPointerMove）；
让highlight=null；
让lasthlight=null；
功能启用HighlightOnPointerMove（视图）{
视图。当layerView（层）。然后（函数（layerView）{
view.on（“指针移动”，函数（事件）{
查看.hitTest（事件）.然后（函数（响应）{
lastHighlight=高光；
//如果返回某个功能，请将其高亮显示
//并在弹出窗口中显示其属性
//如果未返回任何功能，则关闭弹出窗口
var id=null；
if（响应、结果、长度）{
var feature=response.results.filter（函数（结果）{
返回result.graphic.layer==layer；
})[0]。图形；
feature.poputpemplate=layer.poputpemplate；
id=feature.attributes.OBJECTID；
highlight=layerView.highlight（[id]）；
var selectionId=mainView.popup.selectedFeature
？mainView.popup.selectedFeature.attributes.OBJECTID
：null；
如果（突出显示&id！==selectionId）{
mainView.popup.open({
特色：[特色]
});
}
}否则{
如果（mainView.popup.visible）{
mainView.popup.close（）；
mainView.popup.clear（）；
}
}
//删除上一个突出显示
如果（最后突出显示）{
lastphighlight.remove（）；
lasthhighlight=null；
}
});
});
});
}
//防止用户通过单击打开弹出窗口
函数disablePopupOnClick（视图）{
查看（“单击”），功能（事件）{
event.stopPropagation（）；
});
返回视图；
}
});

我认为您正在努力实现的目标的示例。根据问题的ArcGIS示例，只需删除地图上停止导航的所有内容和额外视图


突出特色-4.15
html，
身体，
#mainViewDiv{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
}
要求([
“esri/Map”，
“esri/views/MapView”，
“esri/图层/功能图层”
]，功能（地图、地图视图、要素图层）{
var层=新Featu