<\/P>
Landsat Lensは、過去および現在のLandsat<\/A>衛星画像を閲覧するための、タッチおよびマウスに対応したアプリケーションで、Esri<\/A>によってホストされています。<\/P>ライブアプリはこちらのリンク<\/A>からアクセスできます。<\/P>ソースコードはこちらのリンク<\/A>からご覧いただけます。<\/P><\/P>マウスを使用すると、標準的な左クリックとドラッグ操作でレンズを地図上で移動できます。マウスホイールのスクロールにより、レンズのサイズを拡大または縮小できます。方向によって変わります。<\/P><\/P>iPadなどのタッチデバイスでは、直感的なプレス＆ドラッグでレンズを移動できます。サイズ変更は、レンズ内で2本以上の指をピンチインまたはピンチアウトすることで行います。同様に、レンズの回転は2本以上の指をねじることで実現します。マウスとは異なり、タッチスクリーンでは複数のレンズを同時に操作することが可能です。<\/P><\/P>デフォルトでは、アプリは2017年の日付が付いたレンズが、Palm Jebel Ali<\/A>（ドバイ<\/A>）近くに配置された状態で開始します。プリセットの場所を選択するには、Bookmarks<\/STRONG>ドロップダウンメニューからエントリを選んでください。または、任意の関心エリアへパンやズームも可能です。<\/P><\/P>プリセットの場所やご自身の関心エリアについて、時間経過による変化を見たい場合は、Windows<\/STRONG>ドロップダウンメニューから2002年、2005年、2010年、2015年または2017年の画像を表示するウィンドウを追加してください。ベースマップ上や他のレンズ上でレンズをスワイプすることで、植生、海岸線、川、人間活動の変化を簡単に確認できます。ドロップダウンメニューの最後のオプションで地図上のすべてのレンズを削除できます。<\/P><\/P>既知の問題点:<\/STRONG><\/P>W3Cのtouch events<\/A>へのサポートはブラウザやOSによって非常に異なります。ただし著者によると最も一貫した動作はChromeブラウザで確認されています。<\/LI>
ライブアプリはこちらの
ソースコードはこちらの
マウスを使用すると、標準的な左クリックとドラッグ操作でレンズを地図上で移動できます。マウスホイールのスクロールにより、レンズのサイズを拡大または縮小できます。方向によって変わります。<\/P>
iPadなどのタッチデバイスでは、直感的なプレス＆ドラッグでレンズを移動できます。サイズ変更は、レンズ内で2本以上の指をピンチインまたはピンチアウトすることで行います。同様に、レンズの回転は2本以上の指をねじることで実現します。マウスとは異なり、タッチスクリーンでは複数のレンズを同時に操作することが可能です。<\/P>
デフォルトでは、アプリは2017年の日付が付いたレンズが、
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!
サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
