nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Create extent to fit all points keeping centre fixed

Rupam_RanjanRana

Hi,

I'm trying to derive an extent out of a list of point geometries, so that all the geometries fit into the extent, keeping fixed to a provided centre. The problem I'm having with extent.union() is it, doesn't keep the extent centre fixed. And doing extent.centerAt() post all the union()s does not fit all the points. And extent.expand() does not take a point. Is there a similar solution as google.maps.LatLngBounds.extend(Point) in ARCGis to extend the extent to a given point keeping the centre fixed.

fitBounds<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>mapsterGeoJson<SPAN class="punctuation token">,</SPAN> boundCen<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> me <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> tempExtnt <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> resExtnt <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">createPointExtent</SPAN><SPAN class="punctuation token">(</SPAN>boundCen<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getValue</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>        
        mapsterGeoJson<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getVendorGeoJSON</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>graphics<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            tempExtnt <SPAN class="operator token">=</SPAN> me<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createPointExtent</SPAN><SPAN class="punctuation token">(</SPAN>graphics<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>resExtnt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">contains</SPAN><SPAN class="punctuation token">(</SPAN>tempExtnt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                resExtnt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">union</SPAN><SPAN class="punctuation token">(</SPAN>tempExtnt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>                        
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>        
        resExtnt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">centerAt</SPAN><SPAN class="punctuation token">(</SPAN>boundCen<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getValue</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        me<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getVendorView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>mapsterGeoJson<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getVendorGeoJSON</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN> 
        <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            me<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getVendorView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN>resExtnt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>          
        <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
createPointExtent<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>pointGeometry<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN>  <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">this<SPAN class="punctuation token">.</SPAN>mapObj<SPAN class="punctuation token">.</SPAN>apiInterface<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            xmin<SPAN class="punctuation token">:</SPAN> pointGeometry<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">,</SPAN>
            xmax<SPAN class="punctuation token">:</SPAN> pointGeometry<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">,</SPAN>
            ymin<SPAN class="punctuation token">:</SPAN> pointGeometry<SPAN class="punctuation token">.</SPAN>latitude<SPAN class="punctuation token">,</SPAN>
            ymax<SPAN class="punctuation token">:</SPAN> pointGeometry<SPAN class="punctuation token">.</SPAN>latitude            
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Najděte více příspěvků označených jako

Accepted answers

RobertScheitlin__GISP

Rupam,

I convert a point into an extent using a default 6 pixel tolerance. Normally I use this for getting an extent from a mouse click, but I think it will help in your situation.

pointToExtent<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>pointGeometry<SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">var</SPAN> clickOffset <SPAN class="operator token">=</SPAN> distance <SPAN class="operator token">||</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> centerPoint <SPAN class="operator token">=</SPAN> pointGeometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> mapWidth <SPAN class="operator token">=</SPAN> me<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getVendorView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> pixelWidth <SPAN class="operator token">=</SPAN> mapWidth <SPAN class="operator token">/</SPAN> me<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getVendorView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> tolerance <SPAN class="operator token">=</SPAN> clickOffset <SPAN class="operator token">*</SPAN> pixelWidth<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> queryExtent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">this<SPAN class="punctuation token">.</SPAN>mapObj<SPAN class="punctuation token">.</SPAN>apiInterface<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>xmin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> ymin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> xmax<SPAN class="punctuation token">:</SPAN> tolerance<SPAN class="punctuation token">,</SPAN> ymax<SPAN class="punctuation token">:</SPAN> tolerance<SPAN class="punctuation token">,</SPAN> spatialReference<SPAN class="punctuation token">:</SPAN> pointGeometry<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">return</SPAN> queryExtent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">centerAt</SPAN><SPAN class="punctuation token">(</SPAN>centerPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

Rupam_RanjanRana

Hi Robert,

The solution worked. So the code now looks as follows.

setBounds: function (mapsterGeoJson, singularity) {
        var me = this;
        me.getVendorView().whenLayerView(mapsterGeoJson.getVendorGeoJSON()).then(function () {
            var blackhole = me.createPointExtent(singularity.getValue()); //Create extent at the center            
            var maxDist = 0, tempDist = 0;
            mapsterGeoJson.getVendorGeoJSON().graphics.forEach(function (graphics) {
                tempDist = me.mapObj.apiInterface.geometry.geometryEngine.distance(singularity.getValue(),
                    graphics.geometry);
                if (tempDist > maxDist) {
                    maxDist = tempDist;
                }
            }); //Find the farthest distance from center
            /*Expand the extent to the farthest geometry. And acounting for device aspect ratio.*/
            blackhole.expand((maxDist + (maxDist * 1.5)) / blackhole.width); 
            me.getVendorView().goTo(blackhole);
        });
        return this;
    },
createPointExtent: function (pointGeometry) {
        var clickOffset = 6;
        var centerPoint = pointGeometry.clone();
        var mapWidth = this.getVendorView().extent.width;
        var pixelWidth = mapWidth / this.getVendorView().width;
        var tolerance = clickOffset * pixelWidth;
        var queryExtent = new this.mapObj.apiInterface.geometry.Extent({
            xmin: 1,
            ymin: 1,
            xmax: tolerance,
            ymax: tolerance,
            spatialReference: pointGeometry.spatialReference
        });
        return queryExtent.centerAt(centerPoint);
    },<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Thank you for the help.

RobertScheitlin__GISP

Rupam,

I convert a point into an extent using a default 6 pixel tolerance. Normally I use this for getting an extent from a mouse click, but I think it will help in your situation.

pointToExtent<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>pointGeometry<SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">var</SPAN> clickOffset <SPAN class="operator token">=</SPAN> distance <SPAN class="operator token">||</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> centerPoint <SPAN class="operator token">=</SPAN> pointGeometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> mapWidth <SPAN class="operator token">=</SPAN> me<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getVendorView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> pixelWidth <SPAN class="operator token">=</SPAN> mapWidth <SPAN class="operator token">/</SPAN> me<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getVendorView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> tolerance <SPAN class="operator token">=</SPAN> clickOffset <SPAN class="operator token">*</SPAN> pixelWidth<SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> queryExtent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">this<SPAN class="punctuation token">.</SPAN>mapObj<SPAN class="punctuation token">.</SPAN>apiInterface<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>xmin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> ymin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> xmax<SPAN class="punctuation token">:</SPAN> tolerance<SPAN class="punctuation token">,</SPAN> ymax<SPAN class="punctuation token">:</SPAN> tolerance<SPAN class="punctuation token">,</SPAN> spatialReference<SPAN class="punctuation token">:</SPAN> pointGeometry<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">return</SPAN> queryExtent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">centerAt</SPAN><SPAN class="punctuation token">(</SPAN>centerPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Rupam_RanjanRana

Robert,

Tried it, but doesn't work.

setBounds: function (mapsterGeoJson, boundCen) {
        var me = this;
        var tempExtnt = null;
        var resExtnt = this.createPointExtent(boundCen.getValue());                 
        mapsterGeoJson.getVendorGeoJSON().graphics.forEach(function (graphics) {
            tempExtnt = me.createPointExtent(graphics.geometry);
            if (!resExtnt.contains(tempExtnt)) {
                resExtnt.union(tempExtnt);
            }                        
        });        
        var clonedExtent = resExtnt.clone();
        resExtnt.centerAt(boundCen.getValue());
        resExtnt.union(clonedExtent);
        me.getVendorView().whenLayerView(mapsterGeoJson.getVendorGeoJSON()).then( 
        function () {
            me.getVendorView().goTo(resExtnt);
        });          
        return this;
    },<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Also couldn't use extent.expand() as it requires a factor to multiply and I have to test all the points after expand till all the points fit. And also the point extents have zero height and width so expand will not modify the extent at all.

RobertScheitlin__GISP

Rupam,

The one way I can think of is to clone the resExtnt to a new var before you center it. then union the centered resExtnt and the cloned one.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.