在我的程序中，我已经从mapView上的坐标在graphicsLayer上创建了多边形。当我将鼠标悬停在多边形上时，我想用橙色突出显示该多边形。
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"dojo/dom",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleLineSymbol"
], function (Map, MapView, Graphic, GraphicsLayer, Search, dom, UniqueValueRenderer, SimpleLineSymbol) {
map = new Map({
basemap: "streets-navigation-vector"
});
var center = app.addresses[0].center;
view = new MapView({
container: "viewDiv",
map: map,
center: center, // longitude, latitude
zoom: 15,
highlightOptions: {
color: "orange"
}
});
var search = new Search({
view: view,
container: "search"
});
graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
var i = 0;
app.addresses.forEach(function (address) {
var polygon = {
type: "polygon",
rings: address.polygon_rings
};
address.polygonGraphic = new Graphic({
geometry: polygon,
symbol: address.parking_zone
});
graphicsLayer.add(address.polygonGraphic);
i++;
});
view.on("click", function(event){
var screenPoint = {
x: event.x,
y: event.y
};
view.hitTest(screenPoint).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === graphicsLayer;
})[0].graphic;
// do something with the result graphic
ToggleSelectedAddress(parseInt(graphic.uid));
}
});
});
view
.when()
.then(function() {
return graphicsLayer.when();
})
.then(function(layer) {
// Set up an event handler for pointer-down (mobile)
// and pointer-move events (mouse)
// and retrieve the screen x, y coordinates
return view.whenLayerView(layer);
})
.then(function(layerView) {
view.on("pointer-move", eventHandler);
view.on("pointer-down", eventHandler);
function eventHandler(event) {
// the hitTest() checks to see if any graphics in the view
// intersect the x, y coordinates of the pointer
view.hitTest(event).then(getGraphics);
}
let highlight;
function getGraphics(response) {
// the topmost graphic from the hurricanesLayer
// and display select attribute values from the
// graphic to the user
if (response.results.length) {
const graphic = response.results.filter(function(result) {
if(result.graphic.layer === graphicsLayer){
layerView.highlight(result.graphic);
}
return result.graphic.layer === graphicsLayer;
})[0].graphic;
if(highlight) {
console.log("highlighted");
highlight.remove();
}
// highlight all features belonging to the same hurricane as the feature
// returned from the hitTest
highlight = layerView.highlight(graphic);
} else {
// remove the highlight if no features are
// returned from the hitTest
highlight.remove();
highlight = null;
}
}
});
});
我什至尝试创建可更改这些多边形图形上的符号的函数，但均未成功。我认为，最后的else语句永远不会执行。这意味着hitTest几乎总是返回结果。我调试了一下，然后看到结果是街道，建筑物等。过滤完这些结果后，我得到了希望突出显示的正确图形。但是，layerView.highlight（graphic）不起作用。这就是我创建mapView的方式：
view = new MapView({
container: "viewDiv",
map: map,
center: center, // longitude, latitude
zoom: 15,
highlightOptions: {
color: "orange"
}
});
[当我将鼠标悬停在图形上并将其符号更改为橙色时，它会突出显示，但是一旦我将鼠标悬停在元素上就不会高亮显示（因为else {}语句几乎从未执行过）。谁能解释为什么hitTest总是返回结果，为什么.highlight（）不起作用？
您的问题是，当highlight为空时，即在开始时或未击中任何功能后的第一击，您将突出显示。您需要更改，
if (highlight) {
return;
}
for
if (highlight) {
highlight.remove();
}
这意味着，如果突出显示某个功能，则将其删除。然后突出显示新的热门功能。
hitTest
返回与图层相交的每一层的最高要素指定的屏幕坐标
（[ArcGIS Doc - MapView hitTest）。
这是ArcGIS示例中的代码修改，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Access features with pointer events - 4.14</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
const hurricanesLayer = new FeatureLayer({
url:
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1",
outFields: ["*"]
});
const map = new Map({
basemap: "dark-gray",
layers: [hurricanesLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-61.125537, 35.863534],
zoom: 4,
highlightOptions: {
color: "orange"
}
});
view
.when()
.then(function() {
return hurricanesLayer.when();
})
.then(function(layer) {
const renderer = layer.renderer.clone();
renderer.symbol.width = 4;
renderer.symbol.color = [128, 128, 128, 0.8];
layer.renderer = renderer;
// Set up an event handler for pointer-down (mobile)
// and pointer-move events (mouse)
// and retrieve the screen x, y coordinates
return view.whenLayerView(layer);
})
.then(function(layerView) {
view.on("pointer-move", eventHandler);
view.on("pointer-down", eventHandler);
function eventHandler(event) {
// the hitTest() checks to see if any graphics in the view
// intersect the x, y coordinates of the pointer
view.hitTest(event).then(getGraphics);
}
let highlight, currentYear, currentName;
function getGraphics(response) {
// the topmost graphic from the hurricanesLayer
// and display select attribute values from the
// graphic to the user
if (response.results.length) {
const graphic = response.results.filter(function(result) {
return result.graphic.layer === hurricanesLayer;
})[0].graphic;
if (highlight) {
highlight.remove();
}
highlight = layerView.highlight(graphic);
} else {
// remove the highlight if no features are
// returned from the hitTest
highlight.remove();
highlight = null;
}
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>