Visualizar el Editor en el widget AttributeInspector y contenido de InfoWindow en un panel lateral

Resumen

AttributeInspector a menudo se muestra al utilizar una InfoWindow emergente en un mapa web. Para obtener más información sobre la ventana de información, consulte ArcGIS API for JavaScript: Clase: InfoWindow. El widget Editor, no obstante, se utiliza para editar los valores de las entidades seleccionadas de una o varias capas de entidades, de modo que se muestra mejor con un panel lateral. Las visualizaciones en paneles laterales muchas veces son necesarias para no limitar el tamaño de la ventana en cuanto a información.

La siguiente muestra de código presenta cómo crear un panel lateral para el widget AttributeInspector.

var attributeInspector = new AttributeInspector({layerInfos: featureLayerInfos}, "attributeDiv");  

var settings = {
map: map,
   layerInfos: featureLayerInfos,
   attributeInspector: attributeInspector 
};

Nota:
La muestra de código anterior presenta el contenido de atributos de un panel DIV con el Id. attributeDIV.

Procedimiento

Los widgets InfoWindow y AttributeInspector se deben utilizar de forma alterna. Para empezar, debe modificar la función setInfoWindowOnClick() inicial cambiando el valor a true o false. En este caso, debe establecerlo en false. Esta acción deshabilita la ventana emergente principal de la aplicación web y el widget Editor se habilita automáticamente. El widget AttributeInspector devuelve esta información con un panel lateral. El siguiente fragmento de código muestra el aspecto del script al habilitar el widget Editor:

map.setInfoWindowOnClick(false);

Nota:
En general, el método map.setInfoWindowOnClick() en una función de widget especificada se debe establecer en true para habilitar el widget y que funcione correctamente. No es habitual que el valor esté en false.

1. Establezca el método map.setInfoWindowOnClick() en false para mostrar el contenido de la ventana de información.

map.setInfoWindowOnClick(false);

2. Cree capas de entidades. Para obtener más información sobre cómo crear capas de entidades, consulte ArcGIS API for JavaScript: FeatureLayer en el segmento Crear una FeatureLayer. La siguiente muestra de código se utiliza para crear las capas de entidades.

var operationsPointLayer = new FeatureLayer("https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/HSEC/FeatureServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: template,
                    outFields: ["*"]
 });

                var operationsLineLayer = new FeatureLayer("https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/HSEC/FeatureServer/1", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: template,
                    outFields: ["*"]
 });

                var operationsPolygonLayer = new FeatureLayer("https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/HSEC/FeatureServer/3", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: template,
                    outFields: ["*"]
 });

3. Agregue las capas de entidades al mapa con la función map.addLayer(). A continuación, se presenta un fragmento de código de muestra utilizado para agregar las capas:

map.addLayer(operationsPointLayer);
map.addLayer(operationsLineLayer);
map.addLayer(operationsPolygonLayer);

4. Recupere la información del atributo del evento especificado para mostrar el atributo y agregue la información de la capa. A continuación, se muestra el fragmento de código:

map.on("layer-add-result", function(evt) {
	switch (evt.layer.name) {
        	case "HSEC Pipeline Status":
                	featureLayerInfos.push({
                		"featureLayer": evt.layer
 });
                	break;
                case "HSEC Area Status":
                	featureLayerInfos.push({
                        	"featureLayer": evt.layer
 });
                        break;
                case "HSEC Point Status":
                        featureLayerInfos.push({
                                "featureLayer": evt.layer
 });
                        break;
 }
});

5. Habilite la función de botón para simplificar el proceso de alternar entre la función InfoWindow y el widget Editor. Cree un controlador de eventos para habilitar la función InfoWindow una vez completadas las ediciones. Para activar la función InfoWindow tras completar una edición, destruya el widget Editor y establezca map.setInfoWindowOnClick() en true. El siguiente código se utiliza para habilitar la función de botón y destruir el widget Editor.

dom.byId("getContentBtn").disabled = false;

on(dom.byId("getContentBtn"), "click", getContentBtn);

function getContentBtn() {
	dom.byId("featureCount").style.visibility = "visible";
        if (editorWidget != null) {
        	//Destruya el widget Editor si ya existe.
        	editorWidget.destroy();
 }
        map.setInfoWindowOnClick(true);
        map.on("click", function(evt) {
        	//Oculte infowindow al hacer clic en el mapa porque el contenido de la ventana de información se muestra en el panel izquierdo
                map.infoWindow.hide();
 });
        initializeSidebar(map);
}

Nota:
No se puede activar el widget Editor si hay una función InfoWindow activa y el atributo se muestra en un panel lateral. 

6. Rellene el panel lateral con la información recuperada de la ventana de información con el siguiente código:

function initializeSidebar(map) {
	var popup = map.infoWindow;

	//Cuando cambie la selección, actualice el panel lateral para mostrar la información emergente de la entidad seleccionada en estos momentos
        connect.connect(popup, "onSelectionChange", function() {
        displayPopupContent(popup.getSelectedFeature());
        });

	//Una vez borrada la selección, borre el contenido emergente del panel lateral. 
        connect.connect(popup, "onClearFeatures", function() {
        //dom.byId replaces dojo.byId
        dom.byId("featureCount").innerHTML = "Click to select feature(s)";
        //registry.byId replaces dijit.byId
        registry.byId("leftPane").set("content", "");
        domUtils.hide(dom.byId("pager"));
        });

        //Cuando haya entidades asociadas a la ventana de información del mapa, actualice la barra lateral con contenido nuevo.                     connect.connect(popup, "onSetFeatures", function() {
        displayPopupContent(popup.getSelectedFeature());
        dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";

        //Habilite la navegación si tiene seleccionada más de una entidad 
        popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
});

7. Cree un evento de clic para activar el widget Editor y establezca map.setInfoWindowOnClick() en false. Se utiliza la siguiente muestra de código para comenzar la edición.

//Código para controlar el evento de clic en el botón
on(dom.byId("editingBtn"), "click", startEditing);

//Comience la edición
function startEditing() {
 	map.setInfoWindowOnClick(false);
 map.graphics.clear();
        registry.byId("leftPane").set("content", "");
        domUtils.hide(dom.byId("pager"));
        dom.byId("featureCount").innerHTML = "";
        if (featureLayerInfos.length < 1) {
        	alert("No layers to edit.");
                return;
 }

        attributeInspector = new AttributeInspector({
        	layerInfos: featureLayerInfos
        }, "attributeDiv");

        var settings = {
        	map: map,
                layerInfos: featureLayerInfos,
                attributeInspector: attributeInspector
 };

        var params = {
        	settings: settings
 };

        editorWidget = new Editor(params, 'editorDiv');
        editorWidget.startup();
        registry.byId("leftPane").set("content", attributeInspector.domNode);
        //La alineación tiene como valor predeterminado la tecla Cmd en Mac y la tecla Ctrl en PC.
        //Especifique la opción "snapKey" únicamente si desea otra combinación de teclas para la alineación
                    map.enableSnapping();
                    dom.byId("getContentBtn").disabled = false; //enable popup button
                    dom.byId("editingBtn").disabled = true; //disable editing button
 }
});

Nota:
Haga clic aquí para descargar un archivo HTML completo. La muestra de código del archivo HTML muestra el código completo con el botón de contenido Mostrar ventana emergente disponible en la parte superior del panel lateral. El script también proporciona el botón Comenzar la edición para que los usuarios editen los atributos de la entidad seleccionada disponible en el mapa web.