<\/P>
Landsat Lens is een touch- en muisvriendelijke applicatie voor het bladeren door verleden en heden Landsat<\/A> satellietbeelden gehost door Esri<\/A>.<\/P>Klik hier<\/A> voor de live app.<\/P>Klik hier<\/A> voor de broncode.<\/P><\/P>Met een muis kan een lens over de kaart worden verplaatst met een standaard linkermuisklik en sleepbewerking. Het scrollen met het muiswiel vergroot of verkleint de grootte van een lens, afhankelijk van de richting.<\/P><\/P>Met een touch-apparaat zoals een iPad kan een lens worden verplaatst met een intuïtieve druk en sleep. Om te vergroten of verkleinen, knijp of spreid twee of meer vingers binnen een lens. Evenzo wordt het draaien van een lens bereikt door twee of meer vingers te draaien. In tegenstelling tot een muis, stellen touchscreens de gebruiker in staat om twee of meer lenzen gelijktijdig te manipuleren.<\/P><\/P>Standaard start de app met een lens gedateerd 2017, gelegen dicht bij de Palm Jebel Ali<\/A> in Dubai<\/A>. Om een vooraf ingestelde locatie te kiezen, selecteer een van de items uit het Bookmarks<\/STRONG> dropdownmenu. Alternatief kunt u pannen of zoomen naar elk interessegebied.<\/P><\/P>Voor een van de vooraf ingestelde locaties, of uw eigen interessegebied, wilt u misschien veranderingen in de tijd bekijken. Gebruik hiervoor het Windows<\/STRONG> dropdownmenu om een venster toe te voegen dat beelden toont van 2002, 2005, 2010, 2015 of 2017. Door lenzen over de basemap en elkaar heen te vegen, kunt u gemakkelijk veranderingen zien in vegetatie, kusten, rivieren en menselijke activiteit. Gebruik de laatste optie in het dropdownmenu om alle lenzen van de kaart te verwijderen.<\/P><\/P>Bekende problemen:<\/STRONG><\/P>Ondersteuning voor W3C<\/A>'s touch events<\/A> varieert sterk tussen browsers en besturingssystemen. De auteur merkt echter op dat het meest consistente gedrag is waargenomen bij <A href="https:\/\/www.google.com\/chrome\/\
Klik
Met een muis kan een lens over de kaart worden verplaatst met een standaard linkermuisklik en sleepbewerking. Het scrollen met het muiswiel vergroot of verkleint de grootte van een lens, afhankelijk van de richting.<\/P>
Met een touch-apparaat zoals een iPad kan een lens worden verplaatst met een intuïtieve druk en sleep. Om te vergroten of verkleinen, knijp of spreid twee of meer vingers binnen een lens. Evenzo wordt het draaien van een lens bereikt door twee of meer vingers te draaien. In tegenstelling tot een muis, stellen touchscreens de gebruiker in staat om twee of meer lenzen gelijktijdig te manipuleren.<\/P>
Standaard start de app met een lens gedateerd 2017, gelegen dicht bij 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!
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
