InfoWindow에 html 항목 추가하기 - ArcGIS Javascript API 3.18

Question

ArcGIS Javascript API 3.18을 사용하여 빌드 된 웹 응용 프로그램에 관한이 질문은 다음과 같습니다. infoWindow의 제목에 dojo select를 추가하려고합니다. 선택 상자에는 확인 된 결과 목록이 채워집니다.

1) HTML을 사용하여 선언적으로 콤보 상자를 추가 : 나는 두 가지 방법을 시도하고있다

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; 
    } 

}); 

Answer 1

처럼 domConstruct 사용했습니다. 이 질문에 대한 답변이되기를 바랍니다.

그래서 문제가 InfoWindow에 액세스하는 경우 생성시 청취자를 설정해야합니다.

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

내가 생성시 정보창에 액세스하는 방법을 보여줍니다 바이올린이 있습니다 https://jsfiddle.net/kreza/jpLj5y4h/