Web AppBuilderカスタムウィジェット(3) 追加したレイヤーをレイヤーリストに表示する

前回追加したレイヤーが邪魔なので隠したいとき、GraphicsLayerのままだとレイヤーリストに表示されず、画面から操作できません。原因は追加したレイヤーがGraphicsLayerだからのようなので、FeatureLayerに切り替えれば解決できます。

Web AppBuilder for ArcGIS(Developer Edition)のカスタムウィジェットで、手元のCSVをアップロードして、地図上に表示するための開発の3回めです。

Table of Contents

シリーズ一覧

今回のゴール

前回作ったところで、レイヤーリストウィジェットを表示してみると、以下のとおり追加したレイヤーが表示されません。

この操作レイヤーに追加したCSV読込ウィジェットで追加したレイヤーを表示して、表示のオン／オフを自由に買えられるようにしたい。

調査

まずは、原因究明のため、ダウンロードした製品付属のLayerListウィジェットのWidget.jsを確認してみます。

特にレイヤー一覧を表示用に取得しているロジックを確認すると、

array.forEach(this.map.graphicsLayerIds, function(layerId) {
  var layer = this.map.getLayer(layerId);
  if (layer.isOperationalLayer) {
    operLayers.push({
      layerObject: layer,
      title: layer.label || layer.title || layer.name || layer.id || " ",isOperationalLayer
      id: layer.id || " "
    });
  }
}, this);

対象レイヤーの一覧らしき、「operLayers」変数に、layerオブジェクトを追加する際に「isOperationalLayer」プロパティをチェックしていますね。どうも前回作ったレイヤーではこれがオフ(false)のせいでレイヤーリストに表示されていない気がします。

APIドキュメントを漁ってみた限りでは、isOperationalLayerプロパティはなさそうですが……。

Layer

GraphicsLayer

FeatureLayer

ということで「WebAppBuilderForArcGIS\client\stemapp\」フォルダ内をプロパティ名でGrepしてみると、Drawというウィジェットでも使っていました。

このウィジェットには「マップの操作レイヤーとして描画を追加します」という設定があるのですが、名前から恐らくこれが、isOperationalLayerに相当するでしょう。

_initLayers: function(){
this._graphicsLayer = new GraphicsLayer();
 
if(this.config.isOperationalLayer){
    var layerDefinition = {
        "name": "",
        "geometryType": "",
        "fields": [{
            "name": this._objectIdName,
            "type": this._objectIdType,
            "alias": this._objectIdName
        }]
    };
    var pointDefinition = lang.clone(layerDefinition);
    pointDefinition.name = this.nls.points;//this.label + "_" +
    pointDefinition.geometryType = "esriGeometryPoint";
    this._pointLayer = new FeatureLayer({
        layerDefinition: pointDefinition,
        featureSet: null
    });
 
    var polylineDefinition = lang.clone(layerDefinition);
    polylineDefinition.name = this.nls.lines;
    polylineDefinition.geometryType = "esriGeometryPolyline";
    this._polylineLayer = new FeatureLayer({
        layerDefinition: polylineDefinition,
        featureSet: null
    });
 
    var polygonDefinition = lang.clone(layerDefinition);
    polygonDefinition.name = this.nls.areas;
    polygonDefinition.geometryType = "esriGeometryPolygon";
    this._polygonLayer = new FeatureLayer({
        layerDefinition: polygonDefinition,
        featureSet: null
    });
 
    var labelDefinition = lang.clone(layerDefinition);
    labelDefinition.name = this.nls.text;
    labelDefinition.geometryType = "esriGeometryPoint";
    this._labelLayer = new FeatureLayer({
        layerDefinition: labelDefinition,
        featureSet: null
    });
 
    var loading = new LoadingIndicator();
 
    loading.placeAt(this.domNode);
 
    LayerInfos.getInstance(this.map, this.map.itemInfo)
    .then(lang.hitch(this, function(layerInfos){
        if(!this.domNode){
            return;
        }
 
        loading.destroy();
        var layers = [this._polygonLayer, this._polylineLayer,
                      this._pointLayer, this._labelLayer];
        layerInfos.addFeatureCollection(layers, this.label + "_" + this.nls.results);
    }), lang.hitch(this, function(err){
        loading.destroy();
        console.error("Can not get LayerInfos instance", err);
    }));
}else{
    this._pointLayer = new GraphicsLayer();
    this._polylineLayer = new GraphicsLayer();
    this._polygonLayer = new GraphicsLayer();
    this._labelLayer = new GraphicsLayer();
    this.map.addLayer(this._polygonLayer);
    this.map.addLayer(this._polylineLayer);
    this.map.addLayer(this._pointLayer);
    this.map.addLayer(this._labelLayer);
}

操作レイヤーのとき→FeatueLayerを作って登録している

操作レイヤーでないとき→GraphicsLayerを作って登録している(前回私がやった方法)

ということで、FeatureLayerにすればいいのではないかという仮説を立てました。

ウィジェットで追加するレイヤーをFeatureLayerに変更

まずは、defineで読み込むクラスを変更します。

define(['dojo/_base/declare', 'jimu/BaseWidget', 'dojo/on', 'dojo/dom', 'dojo/_base/array', 
        'esri/geometry/Point', 'esri/layers/FeatureLayer', 'esri/graphic', 'esri/SpatialReference',
        'esri/Color','esri/symbols/SimpleMarkerSymbol'],
function(declare, BaseWidget, on, dom, array, Point, FeatureLayer, graphic, SpatialReference, 
         Color, SimpleMarkerSymbol) {

次にFeatureLayerを作成して登録。

GraphicsLayerなら、new GraphicsLayer()だけで住みますが、FeatureLayerのコンストラクタは、URLか、featureCollectionObjectを要求します。ここでいうURLはArcGIS for ServerのREST URLです。今は自分で作ったデータを登録しようとしているので、この方法は使えません。

必然的に、featureCollectionObjectを作る方法にします。featureCollectionObjectをつくのには今度はLayerDefinitionオブジェクトが必要です。細かいところは置いておいて、サンプルコードを参考に以下のように書きました。ポイント型のFeatureDefinitionをパラメータにFeatureLayerを作って、GraphicsLayerの代わりにMapに登録しています。

var pointDefinition = {
    "geometryType": "esriGeometryPoint",
    "fields": [{
        "name": "CSV読込",
        "type": "esriFieldTypeInteger"
    }]
};
this.myLayer = new FeatureLayer({
    layerDefinition: pointDefinition,
    featureSet: null
});
//this.myLayer = new GraphicsLayer();
this.map.addLayer(this.myLayer);