<\/P>
Landsat Lens es una aplicación amigable para touch y mouse para explorar imágenes satelitales Landsat<\/A> pasadas y presentes alojadas por Esri<\/A>.<\/P>Haz clic aquí<\/A> para la aplicación en vivo.<\/P>Haz clic aquí<\/A> para el código fuente.<\/P><\/P>Usando un mouse, un lens puede moverse alrededor del mapa con una operación estándar de clic izquierdo y arrastrar. Desplazar la rueda del mouse aumentará o disminuirá el tamaño de un lens dependiendo de la dirección.<\/P><\/P>Con un dispositivo táctil como un iPad, un lens puede moverse con una intuitiva presión y arrastre. Para cambiar el tamaño, pellizca o expande dos o más dedos dentro de un lens. De igual manera, rotar un lens se logra girando dos o más dedos. A diferencia del mouse, las pantallas táctiles permiten al usuario manipular dos o más lenses simultáneamente.<\/P><\/P>Por defecto, la app inicia con un lens fechado en 2017 ubicado cerca de Palm Jebel Ali<\/A> en Dubai<\/A>. Para elegir una ubicación predefinida selecciona una de las entradas del menú desplegable Bookmarks<\/STRONG>. Alternativamente puedes desplazar o hacer zoom a cualquier área de interés.<\/P><\/P>Para una de las ubicaciones predefinidas, o tu propia área de interés, puede que quieras ver cambios a lo largo del tiempo. Para hacerlo, usa el menú desplegable Windows<\/STRONG> para añadir una ventana mostrando imágenes de 2002, 2005, 2010, 2015 o 2017. Al deslizar los lenses sobre el basemap y entre sí puedes ver fácilmente cambios en vegetación, líneas costeras, ríos y actividad humana. Usa la última opción en el menú desplegable para eliminar todos los lenses del mapa.<\/P><\/P>Problemas conocidos:<\/STRONG><\/P>El soporte para los eventos táctiles W3C<\/A>'s touch events<\/A> varía enormemente entre navegadores y sistemas operativos. Sin embargo, el autor señala que el comportamiento más consistente ha sido con navegadores <A href="https:\/\/www.google.com\/chrome\/\
Haz clic
Usando un mouse, un lens puede moverse alrededor del mapa con una operación estándar de clic izquierdo y arrastrar. Desplazar la rueda del mouse aumentará o disminuirá el tamaño de un lens dependiendo de la dirección.<\/P>
Con un dispositivo táctil como un iPad, un lens puede moverse con una intuitiva presión y arrastre. Para cambiar el tamaño, pellizca o expande dos o más dedos dentro de un lens. De igual manera, rotar un lens se logra girando dos o más dedos. A diferencia del mouse, las pantallas táctiles permiten al usuario manipular dos o más lenses simultáneamente.<\/P>
Por defecto, la app inicia con un lens fechado en 2017 ubicado cerca de
rcarmichael-esristaff
That is exactly what I needed thank you
-Rickey
Hi dafiter,
Below is an example of using the text in the dropdown menu as the label in an imagery window.
Hope this helps.
Cheers,
Richie
line ~152 of index.js
if ($(this).parent().parent().hasClass('rc-year')) {
// Get year.
var year = $(this).attr('data-year');
var label = $(this).html();
// Close all popups if user picks last entry.
if (year === 'close-all'){
$('.rc-window').remove();
return;
}
// Add new lens.
addLens(
year,
DEFAULT_SIZE,
label
);
line ~180 of index.js
// Function that adds a new lens.
function addLens(year, size, label) {
line ~278 of index.js
// Add year text
window.append(
$(document.createElement('div')).css({
position: 'absolute',
left: '0',
top: '0',
color: 'rgba(255, 255, 255, 0.5)',
'font-size': '24px',
'font-weight': 700,
'pointer-events': 'none',
'margin-top': '1px',
'margin-left': '5px'
}).html(label)
rcarmichael-esristaff How difficult would it be to change the text on the lens?
I am using data-year to define the lens source. This results in a random folder name being put into the title
Could we use the same text as the drop down or add a new variable?
That works perfectly! Thank you!
I am now planning to add more years imagery and some old maps.
Your imagery is published as map service rather than an image service. This means that some of the url parameters are slightly different. Copy and replace the getImageUrl code block below to show an Ashland imagery lens in your app.
function getImageUrl(year) {
// Calculate scale (if image width or height exceeds maximum).
var max = Math.max(_view.width, _view.height);
var scale = max <= MAX_IMAGE ? 1 : MAX_IMAGE / max;
// Get url/function from user defined selection.
var url = 'http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch_jason/MapServer';
url += '/export?f=image';
url += string.substitute('&bbox=${xmin},${ymin},${xmax},${ymax}', {
xmin: _view.extent.xmin,
ymin: _view.extent.ymin,
xmax: _view.extent.xmax,
ymax: _view.extent.ymax
});
url += '&bboxSR=' + _view.spatialReference.wkid;
url += '&imageSR=' + _view.spatialReference.wkid;
url += string.substitute('&size=${w},${h}', {
w: Math.min(Math.round(scale * _view.width), MAX_IMAGE),
h: Math.min(Math.round(scale * _view.height), MAX_IMAGE)
url += '&format=' + 'jpg';
return url;
//var url = $('.rc-theme li.active a').attr('data-url');
//var fxn = $('.rc-theme li.active a').attr('data-function');
//// Construct map request url.
//url += '/exportImage?f=image';
//url += string.substitute('&bbox=${xmin},${ymin},${xmax},${ymax}', {
// xmin: _view.extent.xmin,
// ymin: _view.extent.ymin,
// xmax: _view.extent.xmax,
// ymax: _view.extent.ymax
//});
//url += '&bboxSR=' + _view.spatialReference.wkid;
//url += '&imageSR=' + _view.spatialReference.wkid;
//url += string.substitute('&size=${w},${h}', {
// w: Math.min(Math.round(scale * _view.width), MAX_IMAGE),
// h: Math.min(Math.round(scale * _view.height), MAX_IMAGE)
//url += string.substitute('&time=${f},${t}', {
// f: 0,
// t: Date.UTC(year, 0, 1)
//url += '&format=' + 'jpg';
//url += '&interpolation=' + 'RSP_BilinearInterpolation';
//url += '&mosaicRule=' + '{mosaicMethod:\'esriMosaicAttribute\',sortField:\'AcquisitionDate\',sortValue:\'2017/02/06, 12:00 AM\',ascending:true,mosaicOperation:\'MT_FIRST\',where:\'CloudCover<=0.1\'}';
//url += '&renderingRule=' + string.substitute('{rasterFunction:\'${rasterFunction}\'}', {
// rasterFunction: fxn
//return url;
Thank you for the quick reply.
I have tried all that you have suggested. I cannot get the layer to display.
Here is the sample Aerial Viewer
There are no errors in the console log so I cannot tell what is wrong.
Hi Rickey,
Yes, it is fairly easy to accommodate alternative imagery. The most significant change would be to the user interface to reflect the display options you want (if any). As a quick test, try the following modifications to "test drive" the app with your imagery.
rcarmichael-esristaff Thank you for sharing this map!
I was wondering how difficult it would be to add my own aerial layers to it?
I want to change the functionality a little and just display aerials from my server?
Thank you sir! This is an INCREDIBLE tool for teaching and learning and research and I will write about this for the education community which I serve. Wonderful!
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate para una cuenta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
