[GIS] Define spatial reference of layer in ArcGis JavaScript API

arcgis-javascript-apicoordinate systemlayers

I get an error "Map: Geometry (wkid: 3301) cannot be converted to spatial reference of the map (wkid: 4326)" when I want to add only graphics layer.
I found that spatial reference for a map is defined either by the extent passed to the map constructor or by the first layer added to the map, so I think that problem is that my layer is defined without property about wkid. My question is how to properly define it.
My code is following (it works when I add wms layer first, but I want to add only the "vectorLayer"):

 var map;
    require([
        'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
        'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser',
        'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "dojo/_base/json" , "esri/request", 'dojo/domReady!'
    ], function (Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser, dojoJson, esriRequest, request, xhr) {
        parser.parse();
        var spatialReference2 = new esri.SpatialReference({"wkt": 'PROJCS["Estonian Coordinate System of 1997",GEOGCS["EST97",DATUM["D_Estonia_1997",SPHEROID["GRS_1980",6378137,298.257222101]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]],PROJECTION["Lambert_Conformal_Conic"],PARAMETER["standard_parallel_1",59.33333333333334],PARAMETER["standard_parallel_2",58],PARAMETER["latitude_of_origin",57.51755393055556],PARAMETER["central_meridian",24],PARAMETER["false_easting",500000],PARAMETER["false_northing",6375000],UNIT["Meter",1]]'
        });
        var map = new esri.Map("map",
                {
                    spatialReference: spatialReference2,
                    center: new esri.geometry.Point(550000, 6520000, new esri.SpatialReference({ wkid: 3301 })),
                    extent: new esri.geometry.Extent(350000, 6370000, 750000, 6630000, new esri.SpatialReference({"wkid": 3301})),
                    zoom: 4
                });
//        var wmsLayer = new WMSLayer('http://kaart.maaamet.ee/wms/alus?', {
//            resourceInfo: {
//                extent: new Extent(350000, 6370000, 750000, 6630000, {
//                    wkid: 3301
//                }),
//                layerInfos: new WMSLayerInfo({
//                    name: 'MA-ALUS',
//                    title: 'Maaameti WMS MA-ALUS'
//                })
//            },
//            visibleLayers: ['MA-ALUS']
//        });
//        map.addLayers([wmsLayer]);

        var vectorLayer = new esri.layers.GraphicsLayer();
        var layerUrl = 'http://loom-gis.geo.ut.ee:8080/geoserver/ermas/ows?service=WFS&' +
                'version=1.1.0&request=GetFeature&typeName=ermas:testdata_geopnt&' +
                'outputFormat=text/javascript&format_options=callback:loadFeatures&maxFeatures=300&' +
                'srsname=EPSG:3301&EPSG:3301';
        var loadFeatures = function (response) {
            for (var i = 0; i < response.features.length; i++) {
                var geometry = new esri.geometry.Point(response.features[i].geometry.coordinates[0], response.features[i].geometry.coordinates[1], new esri.SpatialReference({ wkid: 3301 }));
                var symbol = new esri.symbol.SimpleMarkerSymbol();
                var graphic = new esri.Graphic(geometry, symbol);
                vectorLayer.add(graphic)
            }
            map.addLayers([vectorLayer]);
        };
        window.loadFeatures = loadFeatures
        esri.request({
            url: layerUrl,
            content: { f: "json" },
            handleAs: "json",
            callbackParamName: "loadFeatures"
        });
    });

Best Answer

The solution is to add a dummy layer. We can create a "fake" feature layer from JSON to trick the map into the desired projection. This feature layer should have the target spatial reference.

 var layerDefinition = {
        "extent": {
            "xmin": 0,
            "ymin": 0,
            "xmax": 0,
            "ymax": 0,
            "spatialReference": {
                "wkid": 3301,
                "latestWkid": 3301
            }
        },
        "fields": [{
            "name": "OBJECTID",
            "type": "esriFieldTypeOID",
            "alias": "OBJECTID",
            "domain": null
        }]
    }

    var featureCollection = {
        layerDefinition: layerDefinition,
        featureSet: null
    };

    var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
        mode: esri.layers.FeatureLayer.MODE_SNAPSHOT
    });

    window.app.map.addLayers([featureLayer, vectorLayer]);

Related Solutions

[GIS] ArcGIS JavaScript API layer order

I'm sure there is a better way of doing this but here is how I did it:

I stored the layers to be added in a module level variable (layersToAdd) and in each layer onLoad event I pushed the layer in to this array. I then called a function addLayers which checked if the length of addLayers was equal to the total layers to be added. The function sorts the array based on index and then adds them.

For the missing layer in the onError event I removed the item from the array and called addLayer.

There will be a performance hit but I couldn't think of another way. I guess another option would be to add the layers as soon as they are available and then re-order the layers once the total count is reached.

for (var i = 0; i < mapConfig.Services.length; i++) {
    layer = this.loadMapService(mapConfig.Services[i], true);
    if (layer != null) {
        //In Internet Explorer, due to resource caching, the onLoad event is fired as soon as the layer is constructed. Consequently you should check whether the layer's loaded property is true before registering a listener for the onLoad event:
        //http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_events.htm
        layer.index = i;
        if (layer.loaded) {
            this.layersToAdd.push(layer);
            this.addLayers();
        }
        else {
            dojo.connect(layer, "onLoad", dojo.hitch(this, function (addlayer) {
                this.layersToAdd.push(addlayer);
                this.addLayers();
            }));

            dojo.connect(layer, "onError", dojo.hitch(this, function (err) {
                var self = this;
                //log error
                dojo.forEach(self.configData.Map.Services, function (entry, ix) {
                    if (entry.ServiceID == layer.id) {
                        self.configData.Map.Services.splice(ix, 1);
                    }
                }, self);
                self.addLayers();
            }));
        }
    }
};


addLayers: function () {
        if (this.layersToAdd.length == this.configData.Map.Services.length) {
            this.layersToAdd.sort(function(a, b) {
                return a.index - b.index;
            });
            dojo.forEach(this.layersToAdd, function (entry, i) {
                this.map.addLayer(entry);
            }, this);
            this.layersToAdd = null;
        }
 },

ArcGIS – Performing Spatial Query in ArcGIS Javascript API 3.1

Adapted from some code I have -- untested here -- the key is using the dojo DeferredList so that you know when all the queries to the seperate layers have returned.

When building the table I would reccomend the DataTables jquery based library -- works well for me, lots of features. http://www.datatables.net/

function selectFeaturesFromPolygon() {
    // CONNECT ON DRAW END EVENT
    drawToolbarDrawEndEvent = dojo.connect(drawToolbar, 'onDrawEnd', function (geom) {
        //clearCurrentSearchResults();
        var aDeferreds = [],
            deferredList,
            query = new esri.tasks.Query();

        query.geometry = geom;
        query.returnGeometry = true;
        query.outFields = ["*"];

        if (geom) {
            queryTask = new esri.tasks.QueryTask(FeatureServiceName1);
            //push multiple queries into this array
            aDeferreds.push(queryTask.execute(query));


            queryTask = new esri.tasks.QueryTask(FeatureServiceName2);
            //push multiple queries into this array
            aDeferreds.push(queryTask.execute(query));

            queryTask = new esri.tasks.QueryTask(FeatureServiceName3);
            //push multiple queries into this array
            aDeferreds.push(queryTask.execute(query));      

            // create a deferred list to aggregate the state for all identify queries
            deferredList = new dojo.DeferredList(aDeferreds);
            deferredList.then(function (aQueryResults) {
                //returns when all queries have finished
                //"aQueryResults" is 2D array of results
                //array[n][0] boolean true or false, success or failure of individual call
                //array[n][1] is the array of identity results returned
                buildTableFromMultipleResults(aQueryResults);
            }, function (err) {
                console.log("Error Occurred: " + err);
            });
        }       
        drawToolbar.activate(esri.toolbars.Draw.POLYGON);
    });
    drawToolbar.activate(esri.toolbars.Draw.POLYGON);
}


//datatable usage would be like this -- this is just a sample, you need to parse aQueryResults
//and put the values into cols, rows and data
//add some html somewhere <table id="tableSearchResults" cellpadding="0" cellspacing="0" border="0"   style="color: black;"></table>
function buildTableFromMultipleResults(aQueryResults) {

    var cols = [],
        row = [],
        data = [];

    //create columns
    $.each(results.fields, function (index, value) {
        cols.push({ 'sTitle': value.name });
    });

    //create rows and push into data
    $.each(results.features, function (index, value) {
        row = [];
        $.each(value.attributes, function (index2, value2) {
            row.push(value2);
        });
        data.push(dojo.clone(row));
    });

    oTable = $('#tableSearchResults').dataTable({
        "aaData": data,
        "aoColumns": cols,
        "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1] },
        { "bSearchable": false, "aTargets": [0, 1] },
        { "bVisible": false, "aTargets": currentSearchResults.hiddenFields },
        { "fnRender": function (o, val) {
            if (val !== null) {
                return Math.round(val * 1000) / 1000;
            }
            else {
                return "";
            }
        }, "aTargets": currentSearchResults.rounded
        }
        ],
        "aaSorting": [[5, 'asc']],
        "iDisplayLength": 25,
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "bDestroy": true,
        "sDom": 'liT<"clear">tp'    
    }); 
}

Best Answer

Related Solutions

[GIS] ArcGIS JavaScript API layer order

ArcGIS – Performing Spatial Query in ArcGIS Javascript API 3.1

Related Question