<\/P>
Landsat Lens ist eine touch- und mausfreundliche Anwendung zum Durchsuchen vergangener und gegenwärtiger Landsat<\/A>-Satellitenbilder, die von Esri<\/A> gehostet werden.<\/P>Klicken Sie hier<\/A> für die Live-App.<\/P>Klicken Sie hier<\/A> für den Quellcode.<\/P><\/P>Mit einer Maus kann eine Linse durch einen Standard-Linksklick und Ziehen auf der Karte bewegt werden. Das Scrollen am Mausrad vergrößert oder verkleinert die Größe einer Linse, abhängig von der Richtung.<\/P><\/P>Mit einem Touch-Gerät wie einem iPad kann eine Linse durch intuitives Drücken und Ziehen bewegt werden. Zum Ändern der Größe verwenden Sie eine Pinch-Geste oder spreizen zwei oder mehr Finger innerhalb einer Linse. Ebenso wird das Drehen einer Linse durch das Drehen von zwei oder mehr Fingern erreicht. Im Gegensatz zur Maus erlauben Touchscreens dem Benutzer, zwei oder mehr Linsen gleichzeitig zu manipulieren.<\/P><\/P>Standardmäßig startet die App mit einer Linse aus dem Jahr 2017, die sich in der Nähe von Palm Jebel Ali<\/A> in Dubai<\/A> befindet. Um einen voreingestellten Ort auszuwählen, wählen Sie einen Eintrag aus dem Dropdown-Menü Lesezeichen<\/STRONG>. Alternativ können Sie zu einem beliebigen Interessengebiet schwenken oder zoomen.<\/P><\/P>Für einen der voreingestellten Orte oder Ihr eigenes Interessengebiet möchten Sie möglicherweise Veränderungen im Laufe der Zeit sehen. Verwenden Sie dazu das Dropdown-Menü Fenster<\/STRONG>, um ein Fenster mit Bildern von 2002, 2005, 2010, 2015 oder 2017 hinzuzufügen. Indem Sie Linsen über die Basiskarte und übereinander wischen, können Sie leicht Veränderungen in Vegetation, Küstenlinien, Flüssen und menschlichen Aktivitäten erkennen. Verwenden Sie die letzte Option im Dropdown-Menü, um alle Linsen von der Karte zu entfernen.<\/P><\/P>Bekannte Probleme:<\/STRONG><\/P>Die Unterstützung für W3C<\/A>s Touch-Ereignisse<\/A> variiert stark zwischen Browsern und Betriebssystemen. Der Autor stellt jedoch fest, dass das konsistenteste Verhalten bei <A href="https:\/\/www.google.com\/chrome\/\
Klicken Sie
Mit einer Maus kann eine Linse durch einen Standard-Linksklick und Ziehen auf der Karte bewegt werden. Das Scrollen am Mausrad vergrößert oder verkleinert die Größe einer Linse, abhängig von der Richtung.<\/P>
Mit einem Touch-Gerät wie einem iPad kann eine Linse durch intuitives Drücken und Ziehen bewegt werden. Zum Ändern der Größe verwenden Sie eine Pinch-Geste oder spreizen zwei oder mehr Finger innerhalb einer Linse. Ebenso wird das Drehen einer Linse durch das Drehen von zwei oder mehr Fingern erreicht. Im Gegensatz zur Maus erlauben Touchscreens dem Benutzer, zwei oder mehr Linsen gleichzeitig zu manipulieren.<\/P>
Standardmäßig startet die App mit einer Linse aus dem Jahr 2017, die sich in der Nähe von
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!
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
