Durante la CCU 2018 en el track de Servicios Públicos mostramos un ejemplo de cómo implementar un visor para cumplir con la resolución 030 de la CREG. La presentación está disponible acá: CCU 2018 - ArcGIS como Apoyo en Temas de Regulación
El esquema de implementación se puede ver abajo.
En este documento se va enfocar en la configuración de la ventana emergente usando expresiones de Arcade con el fin de obtener el siguiente resultado:
Para la simbología se visualiza 2 veces la misma capa de puntos de conexión, cada uno con un estilo diferente y una expresión Arcade distinta.
La situación en la tabla de contenido del mapa es así y entramos en este caso a cambiar el estilo del mapa:
En la ventana de cambiar el estilo podemos elegir el atributo para mostrar los features. Al final de la lista, cuando no se haya definido ninguna expresión de Arcade todavía, se puede elegir la opción "nueva expresión". En este caso ya tenemos la expresión y nos muestre el nombre "Sym Clfy Potencia" que pusimos:
Al hacer clic sobre nueva expresión, se nos abre la ventana para definir la expresión, y podemos incluir la lógica:
En este caso definimos una variable "potencia" y le asignamos el valor de cada feature en su atributo "PotenciaTot". Luego hacemos uso de "if else" para validar el valor de % de capacidad de potencia en uso con el fin de asignar un texto de clasificación:
Condición | Texto a asignar |
---|---|
potencia <= 9.0 | inferior a 9% |
potencia <= 12.0 | 9% a 12% |
potencia <= 15.0 | 12% a 15% |
todo lo demás (else) | superior a 15% |
Luego asignamos para cada uno de los valores un símbolo correspondiente (en este caso haciendo uso del estilo "Firefly").
Para la capa de energía hacemos algo similar con la expresión (solamente el atributo y los clases son diferentes):
... y el estilo:
La combinación de los dos estilos genera el efecto que permite apreciar tanto la capacidad de energía como la de potencia que está en uso:
Potencia:
var potencia = $feature.PotenciaTot;
var clase = "inferior a 9%";
if (potencia <= 9.0) {
clase = "inferior a 9%";
} else if (potencia <= 12.0) {
clase = "9% a 12%";
} else if (potencia <= 15.0) {
clase = "12% a 15%";
} else {
clase = "superior a 15%";
}
return clase;
Energía:
var energia = $feature.EnergiaTot;
var clase = "inferior a 30%";
if (energia <= 30.0) {
clase = "inferior a 30%";
} else if (energia <= 40.0) {
clase = "30% a 40%";
} else if (energia <= 50.0) {
clase = "40% a 50%";
} else {
clase = "superior a 50%";
}
return clase;
La configuración de la ventana emergente consiste de 3 partes:
Al entrar a la configuración de la ventana emergente, podemos seleccionar la opción "Una visualización de atributo personalizado" y hacer clic sobre el botón "CONFIGURAR":
En la parte inferior izquierda de los botones, se encuentre el botón "ver Fuente HTML" que nos permite ver y escribir código HTML para la configuración de la ventana emergente:
El código HTML que usamos se puede ver abajo:
<table style="width:100%">
<tr>
<td style="text-align:center;">Validación según la <b><div style="color:blue;">Potencia</div></b></td>
<td style="text-align:center;">Validación según <b><div style="color:blue;">Energía</div></b></td>
</tr>
<tr>
<td style="text-align:center;"></br><img src="{expression/expr0}" width="61" height="125"></td>
<td style="text-align:center;"></br><img src="{expression/expr1}" width="61" height="125"></td>
</tr>
<tr>
<td style="color:{expression/expr4};text-align:center;"><b>{expression/expr2}</b></td>
<td style="color:{expression/expr5};text-align:center;"><b>{expression/expr3}</b></td>
</tr>
</table>
<br/>
<table style="width:100%">
<tr>
<td style="text-align:right;width:20%"><img src="https://www.shareicon.net/data/2015/11/18/173775_ok_256x256.png" width="20" height="20"></td>
<td style="text-align:left;width:75%;"><a href="{expression/expr6}"><b>Solicitud de Conexión</b></a></td>
</tr>
</table>
Básicamente consiste de 2 tablas. La superior tiene 3 filas y 2 columnas. En la primera fila incluimos el texto de Potencia (izquierda) y Energía (derecha). La segunda fila contiene las imágenes de las semáforos. La fuente de las imágenes ("src") contiene una expresión. La expresión nos va devolver la URL de la imagen que corresponde a la clasificación de la capacidad de potencia y energía. La tercera fila contiene un texto de la clase de la capacidad donde además modificamos el color del texto según su clase. Al final en la segunda tabla se incluye un enlace para abrir el formulario de Survey123 for ArcGIS con los datos relevantes ya pre-llenados usando el esquema de URL.
En total hay 7 expresiones de Arcade en la ventana emergente que usamos. Para definir una expresión Arcade desde la configuración de la ventana emergente, encuentre debajo del "Contenido de la ventana emergente" la parte de "Expresiones de atributos". Con el botón AGREGAR se puede crear una nueva expresión.
Los primeros dos son para definir la URL de las imágenes de semáforos, los siguientes dos para el texto de la clasificación de la capacidad y luego hay 2 para definir el color del texto de la clase. Es importante respetar el orden de las expresiones o en caso contrario será necesario ajustar el código HTML para referenciar la expresión en el lugar que es. Las expresiones se reconocen con el texto "{expression/expr#}. El "#" indique el orden empezando con 0.
Las imágenes usadas son:
img Semaforo Potencia {expression/expr0}
Dependiendo de la clase de potencia se construye la URL de la imagen a usar:
var base_url = "http://geoportal.esri.co/SP/Imagenes/";
var potencia = $feature.PotenciaTot;
var img = "verde250.png";
if (potencia <= 9.0) {
img = "verde250.png";
} else if (potencia <= 12.0) {
img = "amarillo250.png";
} else if (potencia <= 15.0) {
img = "naranja250.png";
} else {
img = "rojo250.png";
}
var img_url = base_url + img;
return img_url;
img Semaforo Energía {expression/expr1}
Dependiendo de la clase de energía se construye la URL de la imagen a usar:
var base_url = "http://geoportal.esri.co/SP/Imagenes/";
var energia = $feature.EnergiaTot;
var img = "verde250.png";
if (energia <= 30.0) {
img = "verde250.png";
} else if (energia <= 40.0) {
img = "amarillo250.png";
} else if (energia <= 50.0) {
img = "naranja250.png";
} else {
img = "rojo250.png";
}
var img_url = base_url + img;
return img_url;
Texto Semaforo Potencia {expression/expr2}
Dependiendo de la clase de potencia se define el texto de la clase (es la misma expresión que la que se usó para el estilo de la capa de potencia):
var potencia = $feature.PotenciaTot;
var clase = "inferior a 9%";
if (potencia <= 9.0) {
clase = "inferior a 9%";
} else if (potencia <= 12.0) {
clase = "9% a 12%";
} else if (potencia <= 15.0) {
clase = "12% a 15%";
} else {
clase = "superior a 15%";
}
return clase;
Texto Semaforo Energía {expression/expr3}
Dependiendo de la clase de energía se define el texto de la clase (es la misma expresión que la que se usó para el estilo de la capa de energía):
var energia = $feature.EnergiaTot;
var clase = "inferior a 30%";
if (energia <= 30.0) {
clase = "inferior a 30%";
} else if (energia <= 40.0) {
clase = "30% a 40%";
} else if (energia <= 50.0) {
clase = "40% a 50%";
} else {
clase = "superior a 50%";
}
return clase;
Color Semaforo Potencia {expression/expr4}
Dependiendo de la clase de potencia se define el color del texto.
var potencia = $feature.PotenciaTot;
var color = "darkgreen";
if (potencia <= 9.0) {
color = "darkgreen";
} else if (potencia <= 12.0) {
color = "gold"; // yellow
} else if (potencia <= 15.0) {
color = "orange";
} else {
color = "red";
}
return color;
Color Semaforo Energía {expression/expr5}
Dependiendo de la clase de energía se define el color del texto.
var energia = $feature.EnergiaTot;
var color = "darkgreen";
if (energia <= 30.0) {
color = "darkgreen";
} else if (energia <= 40.0) {
color = "gold"; // yellow
} else if (energia <= 50.0) {
color = "orange";
} else {
color = "red";
}
return color;
La expresión para definir la URL es un poco más compleja y consiste de diferentes funciones:
URL Formulario {expression/expr6}
function MetersToLatLon(x, y) {
// Converts XY point from Spherical Mercator EPSG:900913 to lat/lon in WGS84 Datum
// Fuente: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
var originShift = 2.0 * PI * 6378137.0 / 2.0;
var lon = (x / originShift) * 180.0;
var lat = (y / originShift) * 180.0;
lat = 180.0 / PI * (2.0 * Atan( Exp( lat * PI / 180.0)) - PI / 2.0);
return [lat, lon];
}
function Semaforo() {
var potencia = $feature.PotenciaTot;
var energia = $feature.EnergiaTot;
var sema_pot = "";
if (potencia<=9) {
sema_pot = "verde";
} else if (potencia<=12) {
sema_pot = "amarillo";
} else if (potencia<=15) {
sema_pot = "naranja";
} else {
sema_pot = "rojo";
}
var sema_ene = "";
if (energia<=30) {
sema_ene = "verde";
} else if (energia<=40) {
sema_ene = "amarillo";
} else if (energia<=50) {
sema_ene = "naranja";
} else {
sema_ene = "rojo";
}
return [sema_pot, sema_ene];
}
function CreateURLSurvey(lat, lon, sema_pot, sema_ene) {
var url_encuesta = "https://survey123.arcgis.com/share/f817517fbeba493d844b7f0edb5fc1b3";
// var carga = Round($feature.CargaProyMW, 3);
var nuevo = "si";
var url = url_encuesta + "?";
url = url + "field:nuevo_cliente=" + nuevo;
url = url + "&field:semaforo1=" + sema_pot;
url = url + "&field:semaforo2=" + sema_ene;
url = url + "&field:estado=abierta";
url = url + "¢er=" + lat + "," + lon;
Console(url);
return url;
}
var latlon = MetersToLatLon(Geometry($feature).X, Geometry($feature).Y);
var semaforos = Semaforo();
var url = CreateURLSurvey(latlon[0], latlon[1], semaforos[0], semaforos[1]);
return url;
La forma de especificar los parámetros del Survey123 for ArcGIS dependen del diseño del formulario.