さまざまなソースからデータを取得し、データから ESRI GraphicsLayer オブジェクトを構築してマップ上に表示するアプリケーションに取り組んでいます。以前にカスタム FeatureLayers を作成しましたが、レイヤーの表示を切り替える必要があるため、このプロジェクトでは GraphicsLayers を使用する必要があります。以下のコードは、ホストからデータをフェッチし、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;
}
})
})
このコードは GraphicsLayers を適切に構築しているように見えますが、それらをマップ オブジェクトに追加すると、マップ上にポイントが表示されません。それらをマップ オブジェクトに追加するために使用するコードは次のとおりです。
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);
}
);
とは多少冗長ですがgfxLayer.add(item)
、Map.graphics.add(item)
Map オブジェクトの 2 つの場所にデータがある場合でも、ポイントはまだマップに表示されません。
私はこれにしばらく取り組んできましたが、本当にアイデアがありません。誰でも提供できるヘルプは大歓迎です。ありがとうございました。