arcgis javascript how to layer`s custom field & value rendering

2462
6
09-28-2016 03:42 AM
ParkSeungHyun
New Contributor II

I try to rendering. To add custom statistics data to the layer.
when... returnGeometry = true
customdata added in the layer.
however, an error occurred when data was many layers
" Error: Error performing query operation(…)"
so the retrungeometry changed to false.
Then the data is not added to the layer.
How should I add?

var layer = new FeatureLayer(url, {
id : "SatisticsLayer",
outFields: ["*"],
mode: FeatureLayer.MODE_SNAPSHOT
});
var tempObject = new esri.layers.Field ({
alias : "STATISTICS",
name : "STATISTICS",
type : "esriFieldTypeInteger"
});

var randArr = [];
for(var i=0;i<17;i++){
randArr = (Math.floor(Math.random() * 100 )+1);
}
mapObject.Layers.addLayerObject(layer);
mapObject.addEvent('layer-add',lang.hitch(this,function(evt){
console.log("layer.fields ======",layer.fields);
layer.fields.push(tempObject);
queryTask = new QueryTask(url);
var query = new Query();
query.where = "1=1";
query.outFields = ["*"];
query.returnGeometry = true;
console.log("query ====",query);
layer.queryFeatures(query, function (featureSet) {
// queryTask.execute(query, function(featureSet){
resultObject = featureSet.features;
for(var i = 0, length = resultObject.length; i < length; i++){
resultObject.attributes.STATISTICS = randArr;
console.log("resultObject.attributes.STATISTICS======",resultObject.attributes.STATISTICS);
// console.log("layer.graphics =====",layer.graphics);

}
var symbol = new SimpleFillSymbol();
symbol.setColor(new Color([0, 216, 255, 0.5]));
var renderer = new ClassBreaksRenderer(null, "STATISTICS");
renderer.addBreak(0, 10, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
renderer.addBreak(11, 30, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
renderer.addBreak(31, 50, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addBreak(51, 90, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
renderer.addBreak(91, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

layer.setRenderer(renderer);
layer.redraw();

});


}));

Tags (2)
0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Emeritus

Park,

   I believe you issue was your random number generation was only going to 17. When I set the random number to 2001 (because a featurelayer by default will return a max feature count of 2000) it worked for me. I also changed some of your other code to be more conventional:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>FeatureLayer</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.18/"></script>

    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
                "esri/map",
                "esri/layers/FeatureLayer",
                "esri/layers/Field",
                "esri/tasks/query",
                "esri/tasks/QueryTask",
                "esri/symbols/SimpleFillSymbol",
                "esri/graphic",
                "esri/Color",
                "esri/renderers/ClassBreaksRenderer",
                "dojo/_base/lang",
                "dojo/domReady!"
            ],
            function(
                Map,
                FeatureLayer,
                Field,
                Query,
                QueryTask,
                SimpleFillSymbol,
                Graphic,
                Color,
                ClassBreaksRenderer,
                lang
            ) {

                var map = new Map("map", {
                    basemap: "hybrid",
                    center: [-122.304568, 47.608492],
                    zoom: 13
                });

                var url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Puget_Sound_BG_Food/FeatureServer/...";

                var layer = new FeatureLayer(url, {
                    id: "SatisticsLayer",
                    outFields: ["*"],
                    mode: FeatureLayer.MODE_SNAPSHOT
                });

                var tempObject = new Field({
                    alias: "STATISTICS",
                    name: "STATISTICS",
                    type: "esriFieldTypeInteger"
                });

                var randArr = [];
                for (var i = 0; i < 2001; i++) {
                    randArr[i] = (Math.floor(Math.random() * 100) + 1);
                }
                map.on("layer-add", lang.hitch(this, function(evt) {
                    layer.fields.push(tempObject);
                    queryTask = new QueryTask(url);
                    var query = new Query();
                    query.where = "1=1";
                    query.outFields = ["*"];
                    query.returnGeometry = true;
                    layer.queryFeatures(query, lang.hitch(this, function(featureSet) {
                        resultObject = featureSet.features;
                        for (var i = 0, length = resultObject.length; i < length; i++) {
                            resultObject[i].attributes.STATISTICS = randArr[i];
                            console.log("resultObject.attributes.STATISTICS======", resultObject[i].attributes.STATISTICS);
                        }
                        var symbol = new SimpleFillSymbol();
                        symbol.setColor(new Color([0, 216, 255, 0.5]));
                        var renderer = new ClassBreaksRenderer(null, "STATISTICS");
                        renderer.addBreak(0, 10, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
                        renderer.addBreak(11, 30, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
                        renderer.addBreak(31, 50, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
                        renderer.addBreak(51, 90, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
                        renderer.addBreak(91, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

                        layer.setRenderer(renderer);
                        layer.redraw();
                    }));
                }));
                map.addLayer(layer);
            });
    </script>
</head>

<body>
    <div id="map"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
ParkSeungHyun
New Contributor II

i was changed Max Record Count 25000.

but... Still it occurred error.

How Can I fix the error?

I try to perform a query, 6000

this is my mapserver.

Single Fused Map Cache: false

Initial Extent:

      XMin: -139536.26633984904

      YMin: 170894.84468518946

      XMax: 746819.6730386964

      YMax: 590921.7264056195

      Spatial Reference: PROJCS["Korean_1985_Korea_Central_Belt",GEOGCS["GCS_Korean_Datum_1985",DATUM["D_Korean_Datum_1985",SPHEROID["Bessel_1841",6377397.155,299.1528128]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",200000.0],PARAMETER["False_Northing",500000.0],PARAMETER["Central_Meridian",127.0028902777778],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",38.0],UNIT["Meter",1.0]]

Full Extent:

      XMin: -759134.2284

      YMin: -1539691.9265

      XMax: 978542.9778000009

      YMax: 568690.1628000122

      Spatial Reference: PROJCS["Korean_1985_Korea_Central_Belt",GEOGCS["GCS_Korean_Datum_1985",DATUM["D_Korean_Datum_1985",SPHEROID["Bessel_1841",6377397.155,299.1528128]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",200000.0],PARAMETER["False_Northing",500000.0],PARAMETER["Central_Meridian",127.0028902777778],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",38.0],UNIT["Meter",1.0]]

Units: esriMeters

Supported Image Format Types: PNG32,PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,BMP

Document Info:

      Title:

      Author:

      Comments: IndexMap

      Subject: IndexMap

      Category:

      Keywords: IndexMap

      AntialiasingMode: None

      TextAntialiasingMode: Force

Supports Dynamic Layers: false

MaxRecordCount: 25000

MaxImageHeight: 4096

MaxImageWidth: 4096

Supported Query Formats: JSON, AMF

Min Scale: 0

Max Scale: 0

 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Park,

   You are asking for something beyond the capability of the API and client browser. You can not expect the API to draw 25000 complex polygons on the client. When using FeatureLayer the actual geometry has to be rendered by the client (that means each vertex that makes up the polygon has to transferred to the client and processed). You will need to limit your returned features or do this rendering work on the server side by using a ArcGISDynamicMapService and configuring the renderer in your map services MXD instead.

ParkSeungHyun
New Contributor II

I want to receiving the customized statistical data to render it featurelayer.

I looked in the example source.

Class breaks renderer with dynamic layer | ArcGIS API for JavaScript 3.18 

If I could see the examples can perform the function that I want?

 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Park,

  That sample uses a dynamic layer which renders on the server so yes that would work. You just need to enable your map service for dynamic layer support.

0 Kudos
ParkSeungHyun
New Contributor II

Thanks.  I'll test it~!!! 

0 Kudos