Custom ArcGIS GraphicsLayer (JavaScript)

Question

Je travaille sur une application qui va récupérer des données de diverses sources et construire des objets ESRI GraphicsLayer à partir des données et les afficher sur une carte. J'ai déjà créé FeatureLayers personnalisé, mais ce projet nécessite l'utilisation de GraphicsLayers car je dois pouvoir basculer la visibilité des calques. Le code ci-dessous récupère les données de l'hôte et les place dans un GraphicsLayer.

define(["dojo/_base/declare", "dojo/_base/array", "dojo/request", "esri/graphic", "esri/geometry/Geometry", "esri/InfoTemplate"], 
    function(declare, array, request, Graphic, Geometry, InfoTemplate) { 
    return declare(null, { 
     getAllCurrentReadings: function() { 
     var rtn = []; 
     var stations = ["S", "SN", "AN", "UP", "GR", "PL", "SR", "J", "N", "FL"]; 
     array.forEach(stations, function(item, i) { 
      request.post("includes/buoybay_proxy.php", { 
      data: { 
       "method": "RetrieveCurrentReadings", 
       "params": "CBIBS," + item + ",113f8b...f27e0a0bb" // NOTE: id: 1 is necessary as well but is added manually by jsonRPCClient 
      }, 
      sync: true, 
      handleAs: "json" 
      }).then(
      function(response) { 
       var gfx, attr, t; 
       //console.log(response); 
       // Now build the Graphic Object and push it into rtn 
       gfx = new Graphic(); 
       gfx.spatialReference = { 
       wkid: 102100 
       }; 

       // Define attribute object 
       attr = {}; 
       attr["station"] = response.station; 
       attr["title"] = translateStationID(response.station); 
       for (var j = 0; j < response.measurement.length; j++) { 
       attr[String(response.measurement[j])] = response.value[j]; 
       } 
       gfx.attributes = attr; 

       // Define geometry object 
       gfx.geometry = new Geometry(gfx.spatialReference, "point"); 
       gfx.geometry.spatialReference = { 
       wkid: 102100 
       }; 
       gfx.geometry.type = "point"; 
       t = esri.geometry.geographicToWebMercator(new esri.geometry.Point(attr["longitude"], attr["latitude"], gfx.spatialReference)); 
       gfx.geometry.x = t.x; 
       gfx.geometry.y = t.y; 

       // Define infoTemplate object 
       gfx.infoTemplate = new esri.InfoTemplate(); 
       gfx.infoTemplate.setTitle(attr["title"]); 
       gfx.infoTemplate.setContent("${*}"); 

       // Define symbol 
       gfx.symbol = new esri.symbol.PictureMarkerSymbol("../images/marker.png", 15, 15); 

       //console.log(gfx); 
       rtn.push(gfx); 
      }, 
      function(error) { 
       console.log("Error: " + error + "\n"); 
      } 
     ) 
     }); 
     //console.log(rtn); 
     return rtn; 
     } 
    }) 
    }) 

Ce code semble construire les GraphicsLayers correctement mais quand je les ajoute à l'objet carte pas de points sont affichés sur la carte. Le code que j'utilise pour les ajouter à l'objet carte est ci-dessous.

require(["dojo/parser", "dojo/_base/array", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/ready", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "js/cbibsGfxModule", "dojo/domReady!"], 
    function(parser, array, BorderContainer, ContentPane, ready, map, ArcGISTiledMapServiceLayer, cbibsGfxModule) { 
    var Map, cbibs, gfxLayer, t = []; 

    function init() { 
     Map = new map("mapDiv", { 
     basemap: "oceans", 
     center: [-77.0357, 38.7877], 
     zoom: 7 
     }); 
     dojo.connect(Map, "onLoad", displayData); // Map didn't load until 3rd arg was a function name; why? 

     function displayData() { 
     cbibs = new cbibsGfxModule(); 
     t = cbibs.getAllCurrentReadings(); 
     gfxLayer = new esri.layers.GraphicsLayer(); 
     array.forEach(t, function(item) { 
      gfxLayer.add(item); 
      Map.graphics.add(item); 
     }); 
     gfxLayer.spatialReference = { 
      wkid: 102100 
     }; 
     //Map.addLayer(gfxLayer); // Add GraphicsLayer to Map object 
     console.log(Map); // Custom GraphicLayers are under _layers 
     }; 
    }; 
    dojo.ready(init); 
    } 
); 

Je me rends compte que gfxLayer.add(item) et Map.graphics.add(item) sont un peu redondant, mais même avec les données en deux endroits dans l'objet Map points ne sont pas encore affichés sur la carte.

Je travaille sur cela depuis un certain temps maintenant et je suis vraiment à court d'idées. Toute aide que quelqu'un pourrait offrir serait grandement appréciée. Je vous remercie.

Answer 1

Votre question (ou au moins une question) est dans la ligne où vous essayez de projeter vos coordonnées géographiques de Web Mercator:

t = esri.geometry.geographicToWebMercator(
new esri.geometry.Point(attr["longitude"], attr["latitude"], gfx.spatialReference)); 

Dans le constructeur de point vous passez correctement dans votre longitude et la latitude valeur, mais spécifiez ensuite la référence spatiale via gfx.spatialReference, qui est définie sur 102100. 102100 est le WKID pour Web Mercator. Mais vos données d'entrée sont des degrés décimaux géographiques, vous avez donc besoin d'une référence spatiale avec WKID = 4326 pour représenter GCS WGS84. Donc, votre ligne devrait être:

t = esri.geometry.geographicToWebMercator(
    new esri.geometry.Point(attr["longitude"], attr["latitude"], 
    new esri.SpatialReference(4326)); 

C'est votre problème principal.

En outre, la ligne:

gfx.spatialReference = { wkid: 102100 }; 

n'a pas d'effet. Il n'y a pas de propriété spatialReference sur l'objet Graphics - uniquement sur Graphics.geometry - où vous le définissez correctement. Juste un dernier commentaire - vous dites que vous utilisez ici un calque de géométrie au lieu d'un calque de fonction car vous devez pouvoir basculer la visibilité, mais vous pouvez basculer la visibilité de n'importe quelle couche, y compris les couches d'entités.