JS API de ArcGIS en PopupTemplate función anormal de imagen del módulo de carga

Descripción del problema

Cuando la interfaz de servicios de fondo para obtener una dirección URL de imagen, a continuación, la demanda es hacer que esta imagen en el panel emergente PopupTemplate API de ArcGIS JS proporcionado, permitiendo a los usuarios a hacer clic en una ubicación en el mapa, puede pop pop información detallada en este emergente en lugar de ellas para volver a partir de esta imagen, este efecto es similar al siguiente:

 

De hecho, se logra el efecto anterior, entonces es muy simple, sólo tenemos que pasar los valores correspondientes propiedades del objeto de representación cuando una instancia de pop en ella, como se muestra a continuación:

var test = new PopupTemplate({
	title: "{name}",
	location: 'top-right',
	content:
		"<img src='" + imgurl + "' style='width: 100%; height: 250px' />" +
		"<p style='margin-top: 20px'><b>分辨率：</b>{resolution}</p>" +
		"<p><b>波段：</b>{tag}</p>" +
		"<p><b>时间：</b>{acquisitiondate:DateFormat}</p>" +
		"<p><b>年份：</b>{year}</p>" +
		"<p><b>云量覆盖：</b>{cloudcover}</p>"
});

Como se muestra en el código anterior, queremos aumentar el estallido de la imagen requiere sólo la adición <img> en el contenido puede estar en el interior, para especificar con ello la etiqueta de atributo img url se puede añadir para completar la operación de la ventana de la imagen en la bomba, pero no lo hizo tenemos la imagen no se responda adecuadamente a la dirección de la imagen, que es nuestra dirección con los apoyos, como esta a continuación:

"http://10.10.10.111:8080/quickview/{33665132-754A-4180-842E-62FF292EA4C5}/{30023F9E-6362-11EA-881C-000C291A4B7F}.jpg"

Esta combinación de direcciones de la etiqueta img problema se produce después de los atributos de contenido entrantes, ya que en PopupTemplate entre llaves {} que sigue la sintaxis de la plantilla es para ES6, por lo que será nuestros apoyos contenido dentro de la dirección de la imagen como plantilla analizar la sintaxis, con el tiempo nos pondremos una dirección vacía analiza como sigue:

"http://10.10.10.111:8080/quickview//.jpg"

Dado que las direcciones se resuelven de una manera tal, que el pop imágenes ciertamente no puede cargados correctamente, de la siguiente manera:

 

 

soluciones

Ahora que hemos encontrado la causa del problema se debe a los errores de sintaxis plantilla de análisis causadas, entonces podemos hacer la siguiente solución apropiada.

Método uno:

error de sintaxis de la plantilla de análisis de los apoyos, por lo que condujo a la imagen dirección incorrecta, entonces añadir el carácter barra invertida delante de los paréntesis para pasar operación puede ah, esta forma es similar a la siguiente:

"http://10.10.10.111:8080/quickview/\{33665132-754A-4180-842E-62FF292EA4C5\}/\{30023F9E-6362-11EA-881C-000C291A4B7F\}.jpg"

Pero la operación real del método no encuentra presente.

Segundo método:

Utilizando el método encodeURI () de codificación de una imagen completa de la dirección, como sigue:

var imageurl = "http://10.10.10.111:8080/quickview/{33665132-754A-4180-842E-62FF292EA4C5}/{30023F9E-6362-11EA-881C-000C291A4B7F}.jpg";
var imgurl = encodeURI(imageurl);

Después de las pruebas, este enfoque es factible. En cuanto a la aplicación específica de estos métodos encodeURI (), por favor, encontrar sus propios recursos de la red para aprender.