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; } } }

Jagged polygons at large scales - how to smooth them out?

MikeOnzay

Are the concepts that are presented in the generalize and performance samples under feature layers going to solve the problem of jagged edges at large scales?

I have one featurelayer (150 mb featureclass) that displays 1-4 features at a time at most. At large scales I get really jagged edges. The source data, as viewed in ArcMap, is more detailed. I have included the maxAllowableOffset parameter as described in the generalize features sample. This does help with the speed of initially displaying some of the larger features based on what I am seeing in firebug. However, I'm struggling to make sense of the two samples and how I should implement the code in my own application.

It seems that the code in the generalize sample might be all I need:

    var maxOffset = function maxOffset(map, pixelTolerance) {
      return Math.floor(map.extent.getWidth() / map.width) * pixelTolerance;
    };

but the performance sample uses a different calculation:

function calcOffset() {
        return (globals.map.extent.getWidth() / globals.map.width);
        // console.log('extent changed...maxOffset: ', globals.maxOffset);
      }

I'm not sure what to do or whether it will fix this problem.

Trouver plus de publications taguées avec

Accepted answers

All comments

derekswingley1

The performance sample is a simplified version of the code from the generalize sample. The performance sample assumes you don't want to display more than one vertex per pixel (anything more than that is wasted effort) so there's not pixel tolerance parameter. In other words, pixel tolerance is always 1. This is effectively the same as the generalize sample as the generalize sample always uses 1 for pixel tolerance.

Regarding your question about jagged edges, yes, max offset should be able to address this for you. The key is to generate the correct value. Two things would help get to the bottom of this:
-post a screen shot of your geometry in ArcMap as well as in your JS app
-post the code your using to generate max offset as well as the code that sets up the event listener to calculate max offset

The second point is relevant because it's possible that you're calculating max offset based on an old scale rather than the map's current scale.

MikeOnzay

[ATTACH=CONFIG]11168[/ATTACH][ATTACH=CONFIG]11169[/ATTACH]

Thanks for your help.

This is inside my init function:

dojo.connect(map, 'onLoad', function (theMap) {
                    //resize the map when the browser resizes
                    dojo.connect(dijit.byId('mapDiv'), 'resize', map, map.resize);
                    var maxOffset = function maxOffset(map, pixelTolerance) {
                            return Math.floor(map.extent.getWidth() / map.width) * pixelTolerance;
                        };
                });

This is a function that I use to query my feature and then add the graphic(s) to the map:

function zoomToEFH_Feature(name) {
  
                //set up maxOffset for performance
                var maxOffset = function maxOffset(map, pixelTolerance) {
                        return Math.floor(map.extent.getWidth() / map.width) * pixelTolerance;
                    };

                //create feature layer   
                var efhLayer = new esri.layers.FeatureLayer("http://<internal server>/ArcGIS/rest/services/NMFS/EFH_MapperData/MapServer/6", {
                    maxAllowableOffset: maxOffset(map, 1),
                    outFields: ["*"],
                    opacity: 0.75,
                    id: "efhL"
                });
                efhLayer.setDefinitionExpression("TYPE='EFH'");

                //initialize query
                EFH_Fquery = new esri.tasks.Query();
                EFH_Fquery.where = "DDBOX = '" + name + "' AND FMC = '" + regionName + "'";
                //console.log(EFH_Fquery.where);
    //execute query
                efhLayer.queryFeatures(EFH_Fquery, function showResults(featureSet) {
                    //console.log('inside show Results for EFH query');
                    map.graphics.clear();
                    var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID).setColor(new dojo.Color([255, 255, 0, 0.5]));
                    
                    //console.log(featureSet.features.length);
      var legendcode = '<table border=0 cellspacing="5" cellpadding="5"><caption>Lifestages</caption>';
     //Loop through features in the featureSet and add them to the map.
                    for (var i = 0, il = featureSet.features.length; i < il; i++) {
                        //Get the current feature from the featureSet.
                        //Feature is a graphic
                        var graphic = featureSet.features;
                        graphic.setSymbol(symbol);
                        var featureextent = graphic.geometry.getExtent();
                        map.setExtent(featureextent, true);
                        //Add graphic to the map graphics layer.
                        map.graphics.add(graphic);   })  
            }

arcmap.jpg

webapp.jpg

derekswingley1

Thanks. When is zoomToEFH_Feature called?

To make sure you're using the correct scale when you calculate max offset, I recommend re-caculating it each time onZoomEnd fires and storing that value in an app wide variable. This is what is done in the performance sample.

MikeOnzay

"When is zoomToEFH_Feature called?" - it is called from a select box on a form. The user chooses an item and it calls this function.

I do have maxOffset set as a global variable.

I was looking at my code again after your last response and I noticed that I used this twice:

var maxOffset = function maxOffset(map, pixelTolerance) {
                            return Math.floor(map.extent.getWidth() / map.width) * pixelTolerance;
                        };

once in the init function and once in the zoomtoEFH_Feature function. Is that right?

I also noticed that I am not using the setMaxAllowableOffset anywhere. Should I put that inside the zoomtoEFH_Feature function?

  dojo.connect(efhLayer, "onLoad", function() {
     dojo.connect(map, "onZoomEnd", function() {
     efhLayer.setMaxAllowableOffset(maxOffset(map,1));
     });
    });

derekswingley1

When you re-calculate max offset, you should also set it on your feature layer. This is shown in the performance sample:

dojo.connect(globals.map, 'onZoomEnd', function() {
  globals.maxOffset = calcOffset();
  dojo.forEach(globals.featureLayers, function(fl) {
    fl.setMaxAllowableOffset(globals.maxOffset);
  });
});

MikeOnzay

I'm having a hard time understanding how to solve this. Although I'm sure the answer is right in front of me. 🙂

derekswingley1

I'm having a hard time understanding how to solve this. Although I'm sure the answer is right in front of me. 🙂

Yep

. You need to set up an event listener for onZoomEnd. When that event fires, calculate a value for maxAllowableOffset and then pass it to your feature layer's setMaxAllowableOffset method. The feature layer will then update with new geometries that are appropriate for the map's new scale.

MikeOnzay

Yep . You need to set up an event listener for onZoomEnd. When that event fires, calculate a value for maxAllowableOffset and then pass it to your feature layer's setMaxAllowableOffset method. The feature layer will then update with new geometries that are appropriate for the map's new scale.

I have this partially solved. When I can get the feature to display and I zoom in/out for more/less detail my shapes are not jagged anymore (Yea!). However, if the feature is large it won't draw at all and I get a script error

Error: timeout exceeded
http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6
Line 14

plus a "script too large" error.

derekswingley1

if the feature is large it won't draw at all and I get a script error

Error: timeout exceeded
http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6
Line 14

plus a "script too large" error.

Post your code? Is your server endpoint public?

MikeOnzay

Post your code? Is your server endpoint public?

I'm hoping to have the endpoint public next week. And, when jsfiddle is back up I will post my code there. Until then I thought you might have another idea I could try.

derekswingley1

Do you see this in all browsers?

MikeOnzay

Do you see this in all browsers?

Firefox 9.01, 10 - yes;
Chrome 17.0.963.46 m - it does draw but it is really slow
IE 7,8 - I get a popup with "out of memory at line: 48" (the console shows this as line 48 in the javascript api). This is new. My app usually loads and brings in the interface and the basemap in IE. I had not checked IE for a while so it is possible that something I did the other day is causing this problem.

derekswingley1

Sounds like you're trying to push too much data to the client. It would be helpful to see exactly how you're setting maxAllowableOffset. Also, are you drawing especially large features (features that are much larger than the extent of the map that's viewed at one time)? You might want to explore setting up scale dependencies if that's the case because large features can sometimes overwhelm older browsers even when maxOffset is used correctly.

DonCavinessGeo

I have been trying to implement this functionality myself without any luck. I am adding a county polygon layer that has 82 features in the layer. The features get generalized when they are loaded but not when the map is zoomed. The onZoomEnd event listener is getting called but the setMaxAllowableOffset for the feature layer is not getting recalculated. What am I missing here?

Here is the code I am using.


               var maxOffset = function maxOffset(map, pixelTolerance) {
          return Math.floor(map.extent.getWidth() / map.width) * pixelTolerance;
        };

               var highlightCountyLayer = new esri.layers.FeatureLayer("countyURL", {
           mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
    maxAllowableOffset: maxOffset(map,1) 
         });
 
  dojo.connect(highlightCountyLayer, "onLoad", function() {
       dojo.connect(map, "onZoomEnd", function() {
   console.log('onZoomEnd highlightCountyLayer')
       highlightCountyLayer.setMaxAllowableOffset(maxOffset(map,1));
       });
  });
     
  map.addLayer(highlightCountyLayer);

derekswingley1

Hi Don,

At 2.7, we do this by default for feature layers in ONDEMAND mode so you no longer listen for onZoomEnd and update your features. Can you move to 2.7?

DonCavinessGeo

Hi Don,

At 2.7, we do this by default for feature layers in ONDEMAND mode so you no longer listen for onZoomEnd and update your features. Can you move to 2.7?

Thanks Derek! I was using version 2.6. Using 2.7 solves the issue i was having. If i were to use SNAPSHOT mode, would I need to use the onZoomEnd method for recalculating?

derekswingley1

Thanks Derek! I was using version 2.6. Using 2.7 solves the issue i was having.

Nice.

If i were to use SNAPSHOT mode, would I need to use the onZoomEnd method for recalculating?

SNAPSHOT pulls all features to the client when the layer is added to the map. Since you have all the features, you don't need to continuously update maxOffset.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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