2016-12-22 4 views
0

この質問は、ArcGIS Javascript API 3.18を使用して構築されたWebアプリケーションに関するものです。私はinfoWindowのタイトルにdojo selectを追加しようとしています。選択ボックスには、識別された結果のリストが表示されます。infoWindowにhtmlアイテムを追加する - ArcGIS Javascript API 3.18

1)HTMLを使用して宣言コンボボックスを追加:私は2つの異なる方法をしようとしている

var template = new esri.InfoTemplate(layerName + "<br/><select id="id_select" data-dojo-type="dijit/form/Select"</select>,"<br/> FID : ${FID}"); 

コンボボックスがありますが、私は(動的にオプションを追加するためのコンボボックスにアクセスする方法がわかりませんaddOptionsを介して)。私は通常dijit.byId( "id_select")を行いますが、それが作成されるまでは存在しないと考えて...私はこの方法についてどうやって行くのかは分かりません。

2)プログラムで 下のコードで、タイトルはdijit/form/selectウィジェット([object HTML TableElement])を表示しますが、ウィジェット自体に関する情報は表示されません。 dijitStartup()を使用してこれを修正することができますか?それを使用する方法はわかりません(現在myTemplate.startupDijits(mySelectBox)の行に沿って何かを試しています - これらの変数名ではありません)。私はこんにちは、これはちょっと古いですが、私はそれに打撃を与えるでしょう。このexample

var identifyTask, identifyParams, idPoint; 
var identifyResults; 

require([ 
    "esri/dijit/Popup", 
    "esri/tasks/IdentifyTask", 
    "esri/tasks/IdentifyParameters", 
    "dijit/form/Select", 
    "dojo/dom-construct", 
    "dojo/promise/all", 
    "dojo/domReady!" 
], function (
    Popup, IdentifyTask, IdentifyParameters, Select, domConstruct, All 
) { 
    var identifySelect; 

    //dojo.connect(window.myMap, "onLoad", mapReady); 
    mapReady(window.myMap); 

    function mapReady(map) { 
    dojo.connect(window.myMap, "onClick", runIdentifies); 
    } 

    function runIdentifies(evt) { 
    identifyResults = []; 
    idPoint = evt.mapPoint; 
    var layers = dojo.map(window.myMap.layerIds, function (layerId) { 
     return window.myMap.getLayer(layerId); 
    }); 
    layers = dojo.filter(layers, function (layer) { 
     if (layer.visibleLayers[0] !== -1) { 
     return layer.getImageUrl && layer.visible 
     } 
    }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers 
    var tasks = dojo.map(layers, function (layer) { 
     return new IdentifyTask(layer.url); 
    }); //map each visible dynamic layer to a new identify task, using the layer url 
    var defTasks = dojo.map(tasks, function (task) { 
     return new dojo.Deferred(); 
    }); //map each identify task to a new dojo.Deferred 
    var params = createIdentifyParams(layers, evt); 

    var promises = []; 

    for (i = 0; i < tasks.length; i++) { 
     promises.push(tasks[i].execute(params[i])); //Execute each task 
    } 

    var allPromises = new All(promises); 
    allPromises.then(function (r) { showIdentifyResults(r, tasks); }); 
    } 

    function showIdentifyResults(r, tasks) { 
    var results = []; 
    var taskUrls = []; 
    var resultNames = []; 


    r = dojo.filter(r, function (result) { 
     return r[0]; 
    }); 
    for (i = 0; i < r.length; i++) { 
     results = results.concat(r[i]); 
     for (j = 0; j < r[i].length; j++) { 
     taskUrls = taskUrls.concat(tasks[i].url); 
     } 
    } 
    results = dojo.map(results, function (result, index) { 
     var feature = result.feature; 
     var layerName = result.layerName; 
     var serviceUrl = taskUrls[index]; 

     resultNames.push({ 
     value: result.layerName, 
     label: result.layerName 
     }); 
     feature.attributes.layerName = result.layerName; 

     var identifiedList = getIdentifiedList(resultNames); 
     console.log(identifiedList); 

     var template = new esri.InfoTemplate(); 
     template.setTitle(identifiedList); 
     feature.setInfoTemplate(template); 

     var resultGeometry = feature.geometry; 
     var resultType = resultGeometry.type; 
     return feature; 
    }); 


    if (results.length === 0) { 
     window.myMap.infoWindow.clearFeatures(); 
    } else { 
     window.myMap.infoWindow.setFeatures(results); 
    } 


    window.myMap.infoWindow.show(idPoint); 

    identifySelect.on('change', function(evt) { 
     var identIndex = identifySelect.get("value"); 
     console.log(identIndex); 
     window.myMap.infoWindow.select(identIndex); 
    }); 

    return results; 
    } 

    function getIdentifiedList(options) { 
    identifySelect = new Select({ 
     name: "identifySelect", 
     id: "id_select", 
     options: options 
    }, domConstruct.create("select")); 
    return identifySelect.domNode; 
    } 

    function createIdentifyParams(layers, evt) { 
    var identifyParamsList = []; 
    identifyParamsList.length = 0; 
    dojo.forEach(layers, function (layer) { 
     var idParams = new esri.tasks.IdentifyParameters(); 
     idParams.width = window.myMap.width; 
     idParams.height = window.myMap.height; 
     idParams.geometry = evt.mapPoint; 
     idParams.mapExtent = window.myMap.extent; 
     idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE; 
     var visLayers = layer.visibleLayers; 
     if (visLayers !== -1) { 
     var subLayers = []; 
     for (var i = 0; i < layer.layerInfos.length; i++) { 
      if (layer.layerInfos[i].subLayerIds == null) 
      subLayers.push(layer.layerInfos[i].id); 
     } 
     idParams.layerIds = subLayers; 
     } else { 
     idParams.layerIds = []; 
     } 
     idParams.tolerance = 5; 
     idParams.returnGeometry = true; 
     identifyParamsList.push(idParams); 
    }); 
    return identifyParamsList; 
    } 

}); 
+0

あなたはフィドルや、いくつかの実行中のサンプルを作成することができます... –

答えて

0

ようdomConstructを使用してみました。これがあなたの質問に答えることを願っています

したがって、問題がinfoWindowにアクセスしている場合は、作成時にリスナーを設定する必要があります。

on(map.infoWindow, "show", function() { 
      // do something 
}) 

私は、作成時に情報ウィンドウにアクセスする方法を示しバイオリンを持っている: https://jsfiddle.net/kreza/jpLj5y4h/

関連する問題