Uncaught (in promise) TypeError: cannot read property graphic of undefined
Uncaught (in promise) TypeError: cannot read property graphic of undefined
非常 JavaScript 的新功能并尝试使用 ArcGIS API 为 JavaScript 4x 松散地按照此处的教程构建网络地图: https://developers.arcgis.com/javascript/latest/sample-code/views-composite-views/index.html
我最想保留突出显示功能，同时允许缩放和平移，所有这些都在使用我自己的 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;
}
编辑：
这是一个使用 public 数据的完整示例。我认为这个问题与我同时拥有点层和多边形层有关。我只想在多边形图层上使用高亮功能，但如果你在鼠标上悬停足够多，"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>
我认为您正在努力实现的示例。根据问题的 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>
非常 JavaScript 的新功能并尝试使用 ArcGIS API 为 JavaScript 4x 松散地按照此处的教程构建网络地图: https://developers.arcgis.com/javascript/latest/sample-code/views-composite-views/index.html
我最想保留突出显示功能，同时允许缩放和平移，所有这些都在使用我自己的 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;
}
编辑：
这是一个使用 public 数据的完整示例。我认为这个问题与我同时拥有点层和多边形层有关。我只想在多边形图层上使用高亮功能，但如果你在鼠标上悬停足够多，"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>
我认为您正在努力实现的示例。根据问题的 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>