I am using feature reduction for a map layer, but I need to be able to pull the geometry from each of the features included in a given cluster. I have looked at the _clusterManager properties and there is no property that includes this information. I want to add a mouseover event that shows the extent of all of the features in a cluster. Please see pic below.
I have my cluster radius set to 70, and according to esri docs, this is measured in points. I have no idea what kind of conversion I need to do to find all features that are within 70 pts of the cluster center. Also, do the points represent map points, or screen points? Here is my code:
gLyr.on("mouse-over", lang.hitch(this, function(evt) {
map.setMapCursor("pointer");
let eCtr = evt.screenPoint;
let w = window.screen.width;
let h = window.screen.height;
let ext = map.extent;
let spArr = []
if(evt.graphic.hasOwnProperty("_aggregationInfo")) {
QueryGraphics.forEach(function(g) {
//console.log("graphics geometry ", g.geometry);
//let mapCoord = webMercatorUtils.lngLatToXY(g.geometry.x,
//g.geometry.y);
let Pt = new Point(g.geometry.x, g.geometry.y);
let sp = screenUtils.toScreenPoint(ext, w, h, Pt);
let dist = Math.sqrt(Math.pow((eCtr.x - sp.x),2) +
Math.pow((eCtr.y - sp.y),2));
console.log("graphics distance = ", dist);
if ( dist <= 70) {
spArr.push(g);
console.log("cluster graphic ", g);
}
});
console.log("graphics array ", spArr); //returns empty array
}
I have assumed that the distance calculation is based on screen points and am converting the lat/lon coordinates of each feature into screen points using screenUtils. I then apply a distance calculation to get the distance between each feature and the screen point of the cluster, but it isn't returning any features within the cluster radius. Does anyone know what I am doing wrong, and what units of measurement I should be using if not screen points?
Thanks!
Solved! Go to Solution.
I finally figured out how to get the geometry for the clustered graphics, so I don't need to try and re-invent to wheel by trying to recalculate the distances for all of the features from the clusters. Here is the working code for anyone who is interested in showing extent of clustered features.
gLyr.on("mouse-over", lang.hitch(this, function(evt) {
map.setMapCursor("pointer");
const geoHashes = evt.graphic._aggregationInfo.geohashes;
if(evt.graphic.hasOwnProperty("_aggregationInfo")) {
let graphicsArray = []
let hash;
QueryGraphics.forEach(function(g) {
hash = g.geometry.cache._geohash;
if (new RegExp(geoHashes.join("|")).test(hash)) {
graphicsArray.push(g);
}
});
var clusterPoints = array.map(graphicsArray, function(graphic){
return graphic.geometry;
});
gs.convexHull(clusterPoints, function(polygon) {
clustExtentLayer.add(new Graphic(polygon, feSymbol, null));
map.addLayer(clustExtentLayer, 1);
})
}
I finally figured out how to get the geometry for the clustered graphics, so I don't need to try and re-invent to wheel by trying to recalculate the distances for all of the features from the clusters. Here is the working code for anyone who is interested in showing extent of clustered features.
gLyr.on("mouse-over", lang.hitch(this, function(evt) {
map.setMapCursor("pointer");
const geoHashes = evt.graphic._aggregationInfo.geohashes;
if(evt.graphic.hasOwnProperty("_aggregationInfo")) {
let graphicsArray = []
let hash;
QueryGraphics.forEach(function(g) {
hash = g.geometry.cache._geohash;
if (new RegExp(geoHashes.join("|")).test(hash)) {
graphicsArray.push(g);
}
});
var clusterPoints = array.map(graphicsArray, function(graphic){
return graphic.geometry;
});
gs.convexHull(clusterPoints, function(polygon) {
clustExtentLayer.add(new Graphic(polygon, feSymbol, null));
map.addLayer(clustExtentLayer, 1);
})
}