<\/P>
Landsat Lens est une application conviviale pour le toucher et la souris permettant de parcourir les images satellites Landsat<\/A> passées et présentes hébergées par Esri<\/A>.<\/P>Cliquez ici<\/A> pour l'application en direct.<\/P>Cliquez ici<\/A> pour le code source.<\/P><\/P>Avec une souris, un lens peut être déplacé sur la carte avec un clic gauche standard et une opération de glisser. Faire défiler la molette de la souris agrandira ou réduira la taille d'un lens selon la direction.<\/P><\/P>Avec un appareil tactile comme un iPad, un lens peut être déplacé avec une pression intuitive et un glissement. Pour redimensionner, pincez ou écartez deux doigts ou plus à l'intérieur d'un lens. De même, faire pivoter un lens s'obtient en tournant deux doigts ou plus. Contrairement à la souris, les écrans tactiles permettent à l'utilisateur de manipuler deux lenses ou plus simultanément.<\/P><\/P>Par défaut, l'application démarre avec un lens daté de 2017 situé près de Palm Jebel Ali<\/A> à Dubai<\/A>. Pour choisir un emplacement prédéfini, sélectionnez une des entrées dans le menu déroulant Bookmarks<\/STRONG>. Alternativement, vous pouvez déplacer ou zoomer vers n'importe quelle zone d'intérêt.<\/P><\/P>Pour l'un des emplacements prédéfinis, ou votre propre zone d'intérêt, vous pouvez vouloir voir les changements au fil du temps. Pour ce faire, utilisez le menu déroulant Windows<\/STRONG> pour ajouter une fenêtre affichant les images de 2002, 2005, 2010, 2015 ou 2017. En faisant glisser les lenses sur la carte de base et les uns sur les autres, vous pouvez facilement voir les changements dans la végétation, les côtes, les rivières et l'activité humaine. Utilisez la dernière option du menu déroulant pour supprimer tous les lenses de la carte.<\/P><\/P>Problèmes connus :<\/STRONG><\/P>Le support des W3C<\/A>'s touch events<\/A> varie énormément selon les navigateurs et systèmes d'exploitation. Cependant, l'auteur note que le comportement le plus cohérent a été observé avec les navigateurs <A href="https:\/\/www.google.com\/chrome\/\
Cliquez
Avec une souris, un lens peut être déplacé sur la carte avec un clic gauche standard et une opération de glisser. Faire défiler la molette de la souris agrandira ou réduira la taille d'un lens selon la direction.<\/P>
Avec un appareil tactile comme un iPad, un lens peut être déplacé avec une pression intuitive et un glissement. Pour redimensionner, pincez ou écartez deux doigts ou plus à l'intérieur d'un lens. De même, faire pivoter un lens s'obtient en tournant deux doigts ou plus. Contrairement à la souris, les écrans tactiles permettent à l'utilisateur de manipuler deux lenses ou plus simultanément.<\/P>
Par défaut, l'application démarre avec un lens daté de 2017 situé près 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!
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
