JavaScript API: Can I use setRenderingRule on an Image Service Layer to show above/below a given value?

6049
12
Jump to solution
03-27-2015 11:26 AM
JustinShepard
Occasional Contributor II

I have an image service that I want to let the user quickly show what from that layer is above and below a given value using a basic symbology of red being values less than the user specified value and green being values larger. Would this be an appropriate use for the ArcGISImageServiceLayer setRenderingRule method?

I looked through the API and all I can find from RasterFunction | API Reference | ArcGIS API for JavaScript is that raster functions are objects. I was thinking of creating a remap raster function, like you would in ArcMap/Catalog for a mosaic dataset, but I'm not sure how to set this up dynamically as part of a JavaScript application. So my question is really two parts 1) how do I write a raster function in JavaScript to handle the remap 2) how do I then set the symbology (assume remaped values indicate 1 = less than value of interest and 2 = greater than value of interest) so that it displays properly in the web application?

I haven't done this before so any help is appreciated, this might not even be the best approach so I'm open to other ideas.

Thanks!

12 Replies
KristianEkenes
Esri Regular Contributor

I also was able to set the symbology using RasterLayer. You can view the sample here. This is a little more complicated but it renders the symbology quickly. Basically the important part of this code to look at is the pixelFilter property inside the rasterLayer constructor. It references a custom function: reclassifyPixels() that defines the color for each pixel based on it's value.

Constructor:

        var rasterLayer = new RasterLayer(rasterUrl, {
            opacity: 1,
            pixelFilter: reclassifyPixels,
            imageServiceParameters: params
        });

pixelFilter:

// The pixel filter
        function reclassifyPixels(pixelData) {
            if (pixelData == null || pixelData.pixelBlock == null) {
                return;
            }
            var pixelBlock = pixelData.pixelBlock;
            var pixels = pixelBlock.pixels;
            var numPixels = pixelBlock.width * pixelBlock.height;


            if (pixels == null) {
                return;
            }
            var p = pixels[0];
            var pr = new Uint8Array(p.length); //set up array for red values
            var pg = new Uint8Array(p.length); //set up array for green values
            var pb = new Uint8Array(p.length); //set up array for blue values


            for (var i = 0; i < numPixels; i++) {
                //apply color based on temperature value of each pixel
                if (p>10) {
                    pr = 0;  //red
                    pg = 255;  //green
                    pb = 0;  //blue
                }
                if(p<=10){
                    pr = 255;  //red
                    pg = 0;  //green
                    pb = 0;  //blue
                }
            }
            pixelData.pixelBlock.pixels = [pr, pg, pb];  //assign rgb values to each pixel
            pixelData.pixelBlock.statistics = null;
            pixelData.pixelBlock.pixelType = "U8";
            return pixelData;
        }

Also keep in mind that RasterLayer is in beta right now, but you may find it very useful as it does processing/filtering on the client, thus speeding up your performance. See the following links for more information:

RasterLayer | API Reference | ArcGIS API for JavaScript

PixelBlock | API Reference | ArcGIS API for JavaScript

0 Kudos
JustinShepard
Occasional Contributor II

The raster layer looks really promising, but I ran into a problem when trying to recreate the sample using my own service. I created a service from the GMTED2010 data (I tried Map Service, Image Service - direct from raster and Image Service - from Mosaic dataset). I could see the service if I didn't use the RasterLayer, but when I did use the RasterLayer it never drew, the 'Loading' icon never went away either. I haven't had time to try to figure out if it's just too much data for the RasterLayer or what the cause it.

I was testing it in Google Chrome Version 41.0.2272.101 m

Services are from ArcGIS Server 10.2.2

Does the published raster need to be in a specific format or spatial reference?

0 Kudos
KristianEkenes
Esri Regular Contributor

Unfortunately RasterLayer only supports LERC format for image services. This was added in the 10.3 release. So yes, right now RasterLayer can only be used with 10.3 lerc services.

0 Kudos