GEE學習筆記 三十四：分屏查看地圖組件介紹

來自專欄 GEE 開發6 人贊了文章

Google Earth Engine學習筆記三十四

今天介紹一個GEE即將發布的新的功能，我這個測試是在GEE的測試伺服器上測試的，我們平常使用的正式版還沒有發布這個組件。

簡單來講今天要講的這個功能叫做分屏查看地圖（具體怎麼翻譯好我還沒有想好，暫時就這麼叫吧），也就是中間有個滑動條，然後對比查看兩個地圖。

老規矩先看API

構造方法內容：

簡單介紹一下各個參數含義：

• firstPanel 左邊地圖
• secondPanel 右邊地圖
• orientation 分割滑動條方向
• wipe 是否用平滑擦拭的效果
• style 組件通用的功能，設置樣式

下面通過各種例子展示如何使用這個新的組件

1、水平布局展示

var center = {lon: 112, lat: 37, zoom: 9};var leftMap = ui.Map(center);var rightMap = ui.Map(center);leftMap.setControlVisibility(false); //控制按鈕全部隱藏rightMap.setControlVisibility(false);leftMap.setControlVisibility({zoomControl: true}); //放大縮小按鈕顯示var linker = new ui.Map.Linker([leftMap, rightMap]);var splitPanel = ui.SplitPanel({ firstPanel: leftMap, secondPanel: rightMap, orientation: horizontal, //水平布局 wipe: true //採用平滑的擦拭效果});ui.root.clear();ui.root.add(splitPanel);var landsat = ee.ImageCollection(LANDSAT/LC08/C01/T1_SR) .filterDate(2017-01-01, 2018-01-01) .median();landsat = landsat.addBands(landsat.normalizedDifference([B5, B4]).rename("NDVI"));var vis = {bands: [B4, B3, B2], min: 0, max: 3000};leftMap.addLayer(landsat, vis, "rgb");var visNDVI = { min: 0, max: 1, palette: FFFFFF,CE7E45,DF923D,F1B555,FCD163,99B718,74A901,66A000,529400, + 3E8601,207401,056201,004C00,023B01,012E01,011D01,011301};rightMap.addLayer(landsat.select("NDVI"), visNDVI, NDVI);

2、wipe 參數設置為 false，那麼顯示結果就是

var center = {lon: 112, lat: 37, zoom: 9};var leftMap = ui.Map(center);var rightMap = ui.Map(center);leftMap.setControlVisibility(false); //控制按鈕全部隱藏rightMap.setControlVisibility(false);leftMap.setControlVisibility({zoomControl: true}); //放大縮小按鈕顯示var linker = new ui.Map.Linker([leftMap, rightMap]);var splitPanel = ui.SplitPanel({ firstPanel: leftMap, secondPanel: rightMap, orientation: vertical, //垂直布局 wipe: true //採用平滑的擦拭效果});ui.root.clear();ui.root.add(splitPanel);var landsat = ee.ImageCollection(LANDSAT/LC08/C01/T1_SR) .filterDate(2017-01-01, 2018-01-01) .median();landsat = landsat.addBands(landsat.normalizedDifference([B5, B4]).rename("NDVI"));var vis = {bands: [B4, B3, B2], min: 0, max: 3000};leftMap.addLayer(landsat, vis, "rgb");var visNDVI = { min: 0, max: 1, palette: FFFFFF,CE7E45,DF923D,F1B555,FCD163,99B718,74A901,66A000,529400, + 3E8601,207401,056201,004C00,023B01,012E01,011D01,011301};rightMap.addLayer(landsat.select("NDVI"), visNDVI, NDVI);

結果顯示

大家如果有問題需要彼此交流，可以微信直接聯繫我。加好友留言請加上「GEE」或者「知乎」，這樣我就知道是關於GEE的同行了??。

微信號：shi_weihappy

昵稱：無形的風