Desarrollar aplicaciones web utilizando la API de ArcGIS para JavaScript

Preguntas y Respuestas

¿Cuál es la diferencia entre construir un mapa con una API Web de ArcGIS y el visor de mapas?
Las API web de ArcGIS y el visor de mapas están diseñados para crear mapas. Los mapas creados con el
los visores de mapas están dirigidos a una audiencia web no desarrolladora, ya que no se requiere programación,
pero las capacidades son limitadas.

Las API, por otro lado, están destinadas a desarrolladores que desean crear aplicaciones web. Estas
las aplicaciones se pueden compartir en el sitio web de ArcGIS Online, pero se crean y visualizan fuera de la
sitio web. Las API web de ArcGIS son interfaces de programación que te permiten agregar capacidades de SIG y
mapa servicios a tus aplicaciones web. Para ArcGIS API para JavaScript se requiere un servidor web, la API
necesita ser accesado a través de htt:// en lugar de [Link]

2. ¿Cómo usar un mapa web publicado en ArcGIS Online?

a. Obtén el ID del Mapa Web, como afe57755197c40a7aacf0ef370068ca0

b. Agrega el mapa web con el webmapID

Para obtener el ID del Mapa Web de las capas alojadas, mapas y mosaicos que has creado, primero debes
inicie sesión en su organización. Haga clic en mi contenido y vea una lista de los mapas, aplicaciones, mosaicos y
capas que has creado y publicado. La columna Tipo enumera el tipo de contenido que has
has creado. Si haces clic en un elemento, serás llevado directamente a una página de descripción con un
descripción del contenido y URL. Copia la URL y pégala directamente en tu código fuente
al crear una aplicación para ArcGIS o las API móviles.

Haga clic en el artículo para ser dirigido a la página de descripción.

Página de descripción que muestra la URL resaltada que se puede copiar y pegar en el código fuente de la aplicación.
 Pegue la URL como una capa de variable/capa de nueva característica dentro del código fuente de la API web de ArcGIS.

//Servicio de características de ArcGIS Online que muestra los tipos de agencias de servicios para personas sin hogar

var capa = nuevoCapaDeCaracterística("[Link]

TEST2/FeatureServer/1
outFields: ["*"]
});
[Link](capa);

3. ¿Cómo usar un mapa web publicado en ArcGIS for Server?

El siguiente enlace es una lista de instrucciones detalladas sobre cómo guardar y compartir tu ArcMap como servicio
que luego puede ser publicado en su servidor GIS deseado:
[Link]

También lee compartir tu mapa en una aplicación web:Contenido no traducible, enlace proporcionado no válido.
empezado/windows/compartiendo-tu-mapa-en-una-aplicació[Link]

a. Obten el URL del REST del mapa web

b. Agrega el mapa web con la URL REST

//El ID para el mapa de [Link] webmap = "e88fc77e54a844739a7a1c5affdc6c87"; //Ingresa un título,

Potencial de Gastos Minoristas
Centro de Seattle
y alrededores;

c. Agregar widgets adicionales:[Link]

4. ¿Cuáles son los siguientes términos y sus relaciones?

([Link]

a. Clase Mapa: crea un contenedor y la estructura DOM requerida para que el desarrollador pueda
para agregar capas, gráficos, ventanas de información y otra navegación. Es una plantilla del
métodos y variables en un tipo particular de objeto. Una clase contiene valores reales en su lugar
de variables. Normalmente se añade utilizando un contenedor DIV. Las clases pueden contener subclases
y crea una jerarquía de clases. Las clases también pueden ser empaquetadas como módulos que se ajustan
a los estándares de AMD.
 b. Instancia: una instancia es una realización de cualquier objeto cuando se utiliza la programación orientada a objetos.
programación. Una instancia puede ocurrir en cualquier momento que se ejecute un programa. Instanciar una clase significa

creando un objeto haciendo referencia o volviendo a esa clase.

c. Elemento: un elemento se utiliza para definir la sintaxis y puede representar tanto funciones como
datos. Por ejemplo, un elemento utilizado en ArcGIS para API JavaScript es una variable (<var>),
que se puede usar para documentar tareas de programación, conceptos e información de referencia.

d. Eventos de Mapa
i. Cargar: la primera capa se ha añadido al mapa
ii. Resultado de agregar capas: todas las capas en una llamada a [Link]() han sido añadidas
iii. Cambio de extensión: el centro x,y o nivel de detalle del mapa ha cambiado
iv. Pan: el mapa se está desplazando
v. Redimensionar: el ancho o alto del contenedor del mapa ha cambiado

e. Objeto: Un objeto se refiere a una instancia de una clase que representa variables, funciones y
estructuras de datos. Generalmente es un elemento que es autónomo y consiste en datos y
procedimientos como formas e imágenes (mapa base o características del mapa).

5. ¿Cuáles son los siguientes archivos y sus relaciones?

f. Lenguaje de Marcado de Hipertexto (*.html): HTML es un lenguaje de marcado que crea una base
estructura y wireframe compuestos de elementos y atributos. HTML define cómo
El contenido como encabezados, tablas y listas se visualiza en un navegador web.
<div id = "footer"></div>

g. JavaScript (*.js): JavaScript es un lenguaje de scripting que añade comportamiento a una página como
animación, interactividad y funcionalidad. Js apunta a los elementos HTML para interactuar con
es luego interpretado por el navegador web.
<script type="text/javascript">
var x = 5;
var y = 6;
var resultado = x + y;
</script>

h. Hojas de Estilo en Cascada (*.css): CSS te permite controlar el formato y diseño de

su documento. Interactúa con los elementos en HTML y puede cambiar el estilo, color,
tamaño y posición de los elementos. Se recomienda crear un archivo separado (externo)
Documento CSS que se puede referenciar en la página de índice HTML.
Código de muestra: { p
altura de línea: 3;
rojo
}
Referencia de hoja de estilo externa de muestra:
<cabeza>
<link rel="stylesheet" type="text/css" href="[Link]"
 >
</head>

6. ¿Cómo usar un widget?

¿Qué es un widget? : Los widgets configuran funcionalidades específicas para mapas y cartografí
aplicaciones. Widget (Dojo utiliza el término dijit) es una pieza visual autónoma
funcionalidad (clase) que se puede incorporar en aplicaciones de ArcGIS API para JavaScript.

j. ¿Cuáles son los widgets disponibles en la API?

Marcadores
vii. Análisis (geoprocesamiento, servicio de geometría, etc.)
viii. Direcciones
ix. Galería de Mapas de Fondo
x. Geocodificador
xi. Medición
xii. Botón de inicio
xiii. Botón de Localización

xiv. Gráficos
xv. Capas de imagen
xvi. Ventanas emergentes y ventanas de información
xvii. Consultar y Seleccionar

k. ¿Dónde encontrar los widgets integrados? Si el mapa fue creado usando el constructor de aplicaciones web entonces
se han añadido widgets fuera del panel y en el panel al mapa con un tema seleccionado.
Muchos de los widgets tienen parámetros que permiten la configuración y personalización.
l. ¿Dónde encontrar widgets desarrollados por otros? : Los widgets desarrollados por otros pueden ser
encontrado en la Biblioteca de API ([Link]
¿Cuáles son los widgets comúnmente utilizados?
I. Tabla de atributos: Muestra una vista tabular de los atributos de las capas operativas.
Actualmente, las capas del servicio de mapas, servicio de características y colección de características en el
los mapas son compatibles.
II. Coordenada—Muestra coordenadas en la proyección del mapa actual al moverse
el cursor en el mapa o en otros sistemas de coordenadas haciendo clic en el mapa.
III. Geocodificador: habilita la búsqueda de una ubicación en el mapa.
IV. Botón de inicio—Haga clic para hacer zoom hasta la extensión inicial del mapa.

V. Mi Ubicación—Detecta tu ubicación física y hace zoom en el mapa para ello.

VI. Mapa de visión general: Muestra la extensión espacial actual de la visualización del mapa como un gris
rectángulo en relación con la extensión espacial completa del servicio de mapas base.
VII. Barra de escala: Muestra una barra de escala en el mapa.
VIII. Splash--Muestra contenido en la pantalla de inicio.
IX. Deslizar--Muestra una porción de una capa o capas sobre un mapa.
X. Control deslizante de tiempo--Visualiza contenido dentro de un mapa que contiene capas sensibles al tiempo.
¿Cómo construir mi propio widget?[Link]
¿Cómo usar un widget?
Código de muestra: Selector de elementos que permite al usuario buscar elementos de tipos especificados.

require(['jimu/dijit/ItemSelector'],function(ItemSelector){
var itemSelector = new ItemSelector({
 [Link]
itemTypes: ['Feature Service','Map Service']
}, srcNodeRef);... });

Widget de Optimización de Búsqueda Personalizada que muestra Servicios cerca de Washington Park y OTR

Widget de alternancia de mapa base que muestra el área del centro/bancos

 7. ¿Cómo usar bibliotecas API?
p. ¿Qué son las bibliotecas de API?: Un conjunto de API preescritas
q. ¿Dónde encontrar bibliotecas de API? Las API recomendadas para aplicaciones web se pueden encontrar en el
API de ArcGIS para JavaScript alojada por ESRI.
r. ¿Cómo referenciar bibliotecas de API? Muchos desarrolladores y consumidores de la API utilizarán CDN
para hacer referencia a la biblioteca, pero también se puede descargar o usar en un optimizador web y
construcción compacta[Link]
<link rel="stylesheet"
href="[Link]
<script src="[Link]
s. ¿Cómo usar las bibliotecas de API? Las cadenas predeterminadas de las bibliotecas de API generalmente pueden ser
sobrescrito para que el desarrollador pueda crear un nuevo widget modificado con el
cadenas especificadas.
Código de ejemplo: API de Renderizador Simple donde el tamaño, color y características se pueden editar.

// AMD
require([
esri/símbolos/SimpleMarkerSymbol
esri/renderers/SimpleRenderer
dojo/_base/Color
] , función (SimpleMarkerSymbol, SimpleRenderer, Color, ...) {
varsymbol=newSimpleMarkerSymbol();
[Link]=SimpleMarkerSymbol.STYLE_CUADRADO;
[Link](8);
[Link](newColor([255,255,0,0.5]));
varrenderer=newSimpleRenderer(symbol);
});

// legado
varsymbol=[Link]();
[Link].STYLE_CUADRADO
[Link](8);[Link]([Link]([255,255,0,0.5]));
varrenderer=[Link](símbolo);

8. ¿Cuál es la sintaxis de definición de módulo asíncrono (AMD)?: API que especifica el mecanismo para
definiendo módulos para que el modelo y sus dependencias puedan ser cargados de manera asíncrona. AMD
hace referencia a variables locales y generalmente se expone a través de las funciones require() y define().
Los módulos compatibles con AMD permiten flexibilidad en cómo se nombran los módulos una vez que se cargan.
Dado que AMD no utiliza identificadores globales, depende de los desarrolladores nombrar los módulos adecuadamente.
en su código.

requiere(["dojo/dom", "dojo/domReady!"], función(dom){

[Link]("helloworld").innerHTML = "¡Hola!";
});
 9. ¿Cómo utilizar los mapas base de ArcGIS Online?
¿Cuáles son los mapas base disponibles?
xviii. satélite - Imágenes
xix. híbrido – Imágenes con Etiquetas
calles – Calles
xxi. gris – Lienzo Gris Claro
xxii. national-geographic – National Geographic
océanos - Océanos
xxiv. topo - Topográfico
xxv. osm - OpenStreetMap
u. ¿Cómo usar un mapa base? : los mapas base deben ser mapas de una sola capa creados con el map
visor. Si hay más de un mapa base, entonces la capa inferior se ajustará automáticamente
aparecer. Para definir el mapa base, establece basemapUrl= en la capa. Si no hay un mapa base
definido, el mapa base por defecto será el mapa topográfico mundial.

Código de muestra:

var mapa;
requiere(["esri/map", "dojo/domReady!"], function(Map) {
nuevo Mapa("mapDiv", {
center: [-56.049, 38.485],
zoom: 3,
calles
});
});

10. ¿Cómo utilizar un servicio de ArcGIS Online?

v. ¿Cuáles son los servicios listos para usar?
i. Búsqueda Geográfica y Geocodificación (Servicio de Geocodificación Mundial)

ii. Enrutamiento (Servicio de Análisis de Red)

iii. Mapas de Demografía y Estilo de Vida
iv. Mapa de Tráfico en Vivo
v. Imágenes (Landsat, MODIS, NAIP)
vi. Capas de Elevación
vii. Transmisiones en vivo (vientos, condiciones climáticas, huracanes activos e incendios forestales,...)
w. ¿Cómo usar un servicio? : Dentro de ArcGIS Online, utilizas los servicios web de ArcGIS Server como
capas para mapas o puedes agregarlas como elementos para compartir con miembros de tu
organización o el público.

11. ¿Qué es un optimizador web de ArcGIS API para JavaScript: [Link]?

x. ¿Qué es? : Una aplicación web que crea compilaciones personalizadas de la API de ArcGIS para
JavaScript. Ofrece alternativas a la construcción 'talla única' a través del CDN.
¿y. ¿Quién lo necesita? : Esto es más beneficioso para el desarrollo de aplicaciones web más pequeñas
porque puede reducir el número de solicitudes http durante el tiempo de carga. Debe tener un
Organización de ArcGIS Online o cuenta de ArcGIS para desarrolladores y versión 3.4 de la API JS o
más tarde.
z. ¿Cómo usarlo?
No se puede traducir el contenido de la URL proporcionada.
Genera compilaciones personalizadas subiendo una aplicación comprimida, haciendo referencia a una URL, subiendo un
lista de módulos o creación de una selección manual.

La figura muestra el proceso de seleccionar módulos, crear una compilación y ver el archivo comprimido.
archivos de carpeta ([Link]
12. ¿Cuáles son los diferentes tipos de capas?No se puede traducir el contenido de la URL proporcionada.
[Link]
a. Mapa base: proporcionado como una capa de mapa en mosaico.
i. Capa en mosaico: conectada a servicios de mapas en caché, ArcGISTiledMapServiceLayer
ii. Capa de mosaicos sin conexión: caché de mosaicos descargados del servidor a los clientes
dispositivo
b. Capa operativa: provisionada como un servicio de características o servicio de mapa dinámico.
iii. Capa dinámica: puede contener múltiples capas renderizadas por el servidor cada vez
se realiza la solicitud, ArcGISDynamicMapServiceLayer
iv. Capa de característica: mostrar datos de servicios destacados en línea y fuera de línea,
TablaDeCaracteristicasDeServicio, CapaDeCaracteristicas, TablaDeCaracteristicasDeGeodatabase, CapaDeCaracteristicas

c. Capa gráfica: utilizada para mostrar información no soportada por los otros tipos de capas
por lo general basado en las acciones del usuario, GraphicsLayer.

13. Cómo agregar una capa

a. ¿Cómo encontrar la URL de la capa en ArcGIS Online? La URL siempre comienza con
[Link] luego incluye específicos
parámetros como webmap=8505192e747d440098523e9e64419710.
b.

URL destacado en el navegador anterior

c. ¿Cómo encontrar la URL de la capa de un ArcGIS for Server?

d. ¿Cómo cargar una capa?
e. ¿Cómo configurar las características de una capa?

14. ¿Cómo configurar las referencias espaciales del mapa y las capas?
a. ¿Cuáles son las reglas para las referencias espaciales? : En la API, una clase de referencia espacial representa un
sistema de coordenadas. Contiene un sistema de coordenadas y métodos auxiliares para acceder y
úsalo. La clase de referencia espacial está asociada con varias otras clases de API que necesitan un
sistema de coordenadas a función.
b. ¿Cómo se llama un sistema de coordenadas espaciales? : Para definir una referencia espacial, utilizarás el
ID bien conocido (WKID) o una definición de texto completo que soporta Coordenada Geográfica
Sistemas y Sistemas de Coordenadas Proyectadas.
 c. ¿Cuándo y cómo cambiar la referencia espacial de un mapa o una capa? : Para utilizar una proyecció
además del valor predeterminado del servicio, define la referencia espacial de [Link] especificando
opción de constructor. Cuando se combinan capas y mapas con diferentes espaciales
las referencias entonces puede haber disparidades en la visualización y el análisis de los datos.
Las referencias espaciales pueden ser referidas por un ID bien conocido (WKID).

15. ¿Cómo configurar la visualización de un mapa web?

a. Extensión: si no incluyes información sobre la extensión, entonces la extensión predeterminada de las aplicaciones será
la extensión inicial del mapa.
b. Centro: punto central del mapa utilizando puntos de latitud y longitud en la extensión inicial de
mapa.
c. Tamaño: de gráficos variados de la extensión inicial del mapa.
d. Zoom: el nivel de zoom de la extensión inicial del mapa.

Código de muestra:

varmap;

requerir([
esri/map
esri/styles/size","dojo/domReady!"]},function(Map,esriStylesSize) {
nuevoMapa("mapa", {
topo
center: [-122.45,37.75],// longitude, latitude
13
});

16. ¿Cómo crear una leyenda?

Código de muestra:

var legendLayers =
[Link](respuesta);
var legendDijit = new Leyenda({
mapa
capasDeLeyenda
ui-legend
[Link]();

17. ¿Cómo imprimir un mapa web?: Usa un dijit de impresión para crear una plantilla de impresión para los usuarios.

Código de muestra:

<script>
varapp= {};
requerir([
 "esri/arcgis/utils","esri/dijit/Print",
"esri/tasks/PrintTemplate","esri/config",
"dojo/_base/array","dojo/dom","dojo/parser",
"dijit/layout/BorderContainer","dijit/layout/ContentPane",
dojo/domReady!
]function(
arcgisUtils
Plantilla de impresión
utilidadesDeArreglos
){
[Link]();

8315cf7d20f0484e869c4791f70f4f15
[Link]
[Link]
ls/GPServer/Exportar%20Mapa%20Web%20Tarea;

/proxy/

[Link]([Link],"map", {
mapOptions: {
center: [-85.673,38.21],
10
}
});
[Link](function(resp) {
[Link]
[Link]
crearImprimirDijit([Link]);
});

function crearImprimirDijit(tituloImpresion) {
varlayoutTemplate

// crear un arreglo de objetos que se utilizarán para crear impresión

plantillas
varlayouts= [{
Carta ANSI A Horizontal
Paisaje (PDF)
pdf
options: {
legendLayers: [],// empty array means no legend
Millas
imprimirTítulo + ", PDF de paisaje"
}
}, {
Carta ANSI A Retrato
Retrato (Imagen)
jpg
options: {
legendLayers: [],
Millas
 printTitle + ", Retrato JPG"
}
}];

// crear las plantillas de impresión

vartemplates=[Link](layouts,function(lo) {
nuevaPlantillaDeImpresión();
[Link]=[Link];
[Link]
[Link]
[Link]=[Link];
retorno;
});

nuevoImpresora({
[Link]
plantillas
[Link]
},[Link]("print_button");
[Link]();
}
});
</script>

18. ¿Cómo consultar una capa? : Al configurar una tarea de consulta, un usuario proporcionará entradas para la consulta.
lo que podría incluir seleccionar características en un mapa, seleccionar un valor de una lista o ingresar un valor
buscarNo se puede traducir el contenido de un enlace.).

Código de muestra:

functionejecutarConsultaTarea(población) {
//establecer consulta según lo que el usuario escribió para la población;
[Link]="POP04 > "+population;

//ejecutar consulta
[Link](query, mostrarResultados);
}

19. ¿Cómo editar una capa? : La edición basada en la web permite que un grupo más grande contribuya y mejore su
Los API incluyen widgets que te ayudan a agregar capacidades de edición a tu aplicación.
([Link]

Código de ejemplo:
requerir([
esri/mapa
],función(Map,EditorDeAdjuntos,dom,...){
varmap=newMap( ... );
[Link]("<div id='content' style='width:100%'></div>");
[Link](350,275);
var editorDeAdjuntos = nuevo EditorDeAdjuntos({}, [Link]("contenido"));
[Link]();
...
});

20. ¿Cómo mostrar una capa?

SimpleRenderer: un render que utiliza un solo símbolo
UniqueValueRenderer - el renderizador simboliza grupos de gráficos que tienen atributos coincidentes
ClassBreaksRenderer - renderizador que simboliza cada gráfico basado en el valor de algún
atributo numérico
DotDensityRender - proporciona la capacidad de crear visualizaciones de densidad de puntos sobre datos
HeatMapRender - renderiza datos de puntos en una visualización raster que enfatiza áreas de mayor
densidad o valores ponderados
TemporalRenderer - proporciona representación basada en el tiempo de características en una capa de características
ScaleDependentRenderer- proporciona la capacidad de aplicar múltiples renderizadores dependientes de la escala
a una capa

Propiedades de visualización del renderizador de capa de características

setColorInfo()-representa datos cuantitativos con una escala de colores
setRotaciónInfo()
setSizeInfo()
establecerInfoDeOpacidad

21. ¿Cómo crear un Popup? Puedes crear ventanas emergentes construyendo ventanas de información utilizando la API.
Las ventanas emergentes pueden incluir texto formateado, imágenes y gráficos.
([Link]

Código de muestra:
nuevaPlantillaEmergente({
Maratón de Boston 2013
{STATE_NAME}: {Percent_Fi} de los iniciadores terminaron
fieldInfos: [{//define field infos so we can specify an alias
Número_Ent
Participantes
},{
Número_Estado
Entrantes
},{
Número_Fin
Finalizadores
 }],
mediaInfos:[{//define the bar chart
caption
gráfico de barras
{
Dólar
fields:["Number_Ent","Number_Sta","Number_Fin"]
}
}]
});

22. ¿Cómo cambiar el orden de visualización de múltiples capas?

Use urls= para incluir más de una capa. Separe las capas con una coma. La visualización del mapa se basa en
en la última capa de la lista o la más lenta en cargar. Para definir las capas operativas que se superponen
el mapa base, usa webmap=, layers=, url=, o urls=. Si la capa es un elemento en el sitio web, usa layers=
así que obtienes todas las configuraciones de las capas. Si la capa no está en el sitio web, usa url= o urls=.

El parámetro layers= acepta un solo ID de ítem o múltiples IDs de ítem. Para múltiples capas, utiliza un
lista de IDs separados por comas (&layers=<itemID>,<itemID>,<itemID>). Por ejemplo:
[Link]
,a068913914cd4fecb302b9207a532d1a

23. Por favor, incluya todas las preguntas que queremos responder para el proyecto de personas sin hogar.

• ¿Dónde se publicarán los mapas/datos? ¿En el servidor de Trent?

• ¿Cuál es la relación entre la base de datos y el servidor de Trent?
• ¿Quién tendrá los privilegios para actualizar los datos? ¿El público o los administradores?