Estoy escribiendo mi primera aplicación de mapas web de la API de ArcGIS Javascript y consumiendo un mapa web creado en ArcGIS Online. El mapa web de ArcGIS Online aparentemente hace la mayor parte del trabajo por mí en términos de simbología, plantillas de edición e incluso ventanas emergentes.
Para mi aplicación, estoy tratando de permitir que el usuario edite características, pero no todo el tiempo. Soy capaz de activar y desactivar el editor con el clic de un botón. El problema es que no he podido activar y desactivar las ventanas emergentes por defecto para que el usuario pueda editar los atributos. Incluso cuando la edición está activada, la ventana emergente no editable por defecto aparece cuando se hace clic en una característica. La única manera de evitar esto es utilizar el ignorePopups al llamar a esri.arcgis.utils.createMap . Sin embargo, esto significa que cuando la edición está desactivada no sucede nada cuando se hace clic en una característica.
Aquí está mi código. Todo esto ha sido adaptado de varios ejemplos proporcionados en la documentación de la API de ArcGIS Javascript.
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.StackContainer");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("esri.dijit.editing.Editor-all");
dojo.require("esri.map");
dojo.require("esri.IdentityManager");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.arcgis.utils");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("esri.dijit.Legend");
dojo.require("esri.layers.FeatureLayer");
var map;
var geometryService = "http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";
var layers;
var templatePicker;
var editorWidget;
// var clickHandle;
// var clickListener;
function init() {
esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var urlObject = esri.urlToObject(document.location.href);
var webmap = "0d6761afcb3c45c8840cdbb589f54fa7";
var bingMapsKey = "/*Please enter your own Bing Map key*/";
if (urlObject.query) {
webmap = urlObject.query.webmap;
bingMapsKey = urlObject.query.bingMapsKey;
}
var mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
mapOptions : {
slider : true
},
bingMapsKey : bingMapsKey,
ignorePopups : true,
geometryServiceURL : geometryService
});
mapDeferred.then(function(response) {
map = response.map;
dojo.byId("title").innerHTML = response.itemInfo.item.title;
// dojo.byId("snippet").innerHTML = response.itemInfo.item.snippet;
dojo.byId("dataSource").innerHTML = "<a target='_blank' href='http://www.arcgis.com/home/item.html?id=" + webmap + "'>View data details</a>";
layers = response.itemInfo.itemData.operationalLayers;
// clickHandle = response.clickEventHandle;
// clickListener = response.clickEventListener;
//add the legend
var layerInfo2 = dojo.map(layers, function(layer, index) {
return {
layer : layer.layerObject,
title : layer.title
};
});
if (layerInfo2.length > 0) {
var legendDijit = new esri.dijit.Legend({
map : map,
layerInfos : layerInfo2
}, "legendDiv");
legendDijit.startup();
}
var overviewMap = new esri.dijit.OverviewMap({
map : map
}, dojo.byId("overviewDiv"));
overviewMap.startup();
}, function(error) {
console.log("CreateMap failed: ", dojo.toJson(error));
});
}
function initEditor(bool) {
//initialize the editor
if (bool == true) {
// dojo.disconnect(clickHandle);
dojo.create("div", {id: "templateDiv"}, "rightPane")
dojo.create("div", {id: "editorDiv"}, "rightPane")
var layerInfo = [];
var templateInfo = [];
dojo.forEach(layers, function(layer) {
layerInfo.push({
'featureLayer' : layer.layerObject
});
templateInfo.push(layer.layerObject);
});
templatePicker = new esri.dijit.editing.TemplatePicker({
featureLayers : templateInfo,
grouping : true,
rows : 'auto',
columns : 'auto'
}, 'templateDiv');
templatePicker.startup();
var settings = {
map : map,
templatePicker : templatePicker,
geometryService : new esri.tasks.GeometryService(geometryService),
layerInfos : layerInfo,
toolbarVisible : true,
showAttributesOnClick : true,
enableUndoRedo : true
};
var params = {
settings : settings
};
editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');
editorWidget.startup();
} else {
if (editorWidget) {
editorWidget.destroy();
editorWidget = null;
}
if (templatePicker) {
templatePicker.destroy();
templatePicker = null
}
// dojo.connect(map, "onClick", clickListener);
}
}
//show map on load
dojo.addOnLoad(init);
</script>
<script type="text/javascript">
function showPane(pane, otherpane) {
if (dojo.style(dojo.byId(pane), "display") == "none") {
dojo.style(dojo.byId(pane), "display", "block");
initEditor(true);
} else {
dojo.style(dojo.byId(pane), "display", "none");
initEditor(false);
}
}
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<!-- <div id="snippet"></div> -->
<nav id="menu">
<ul>
<li>
<a href="#" onclick="showPane('rightPane', 'centerPane');">Edit</a>
</li>
</ul>
</nav>
</div>
<div id="leftPane" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">
<div data-dojo-type="dijit.layout.AccordionContainer">
<div data-dojo-type="dijit.layout.ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Pane 2'">
This pane could contain tools or additional content
</div>
</div>
</div>
<div id="centerPane" data-dojo-type="dijit.layout.BorderContainer" class="roundedCorners" data-dojo-props="region:'center',gutters:'false'">
<div id="map" data-dojo-type="dijit.layout.ContentPane" class="shadow" data-dojo-props="region:'center'" style="position:relative; overflow:hidden;">
<div id="ovWin" class="shadow" style="position:absolute; right:5px; top:5px; z-Index:998; width:100px;height:100px; ">
<div id="overviewDiv" style="width:100%;height:100%;"></div>
</div>
</div>
<div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
<div id="dataSource"></div>
</div>
</div>
<div id="rightPane" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="">
<!-- <div id="templateDiv"></div>
<div id="editorDiv"></div> -->
</div>
</div>
</body>Me doy cuenta de que podría recrear un InfoWindow y AttributeInspector pero como esto ya lo hace automáticamente la API, estaría bien no tener que hacerlo.
Intenté conseguir el clickEventHandle y clickEventListener a partir de la respuesta dada por mapDeffered.then() y luego connect y disconnect cuando el editor está desactivado y activado, pero las ventanas emergentes por defecto se mantuvieron incluso después de llamar a dojo.disconnect(clickEventHandle) .
Cualquier ayuda será muy apreciada.
