「滿水位的祕密」數位專輯製作心得分享
大家好，我是這次負責「滿水位的祕密」專輯的前端工程的西卡，在1月初的時候剛結束上個專輯製作沒有多久就確定要製作水資源的專題，預計過年後2月底上線，等於有大約一個多月製作時間。
這次主要參與製作有兩個部分，一個是檢舉違章地圖，另一部分是地圖故事。
一、 檢舉違章地圖
之前製作農地專輯地圖的經驗，馬上首選就是使用leaflet.js來用套檢舉違章資料，底圖是GOOGLE衛星地圖來搭配這次主視覺。
一開始數位設計當時畫出來的假版如圖上，當時討論希望凸顯石門水庫集水區，所以效果上做成中間透明、石門水庫集水區周圍環繞黑底框。
因為沒有做這樣的圖層，一開始思路是先想說畫一個大框中間挖個洞或是圖層疊上去，但這樣思路的邏輯是不可行，後來想到是把圖層切成三個層圖合併（如下圖）。
開始製作這個地圖前，請資料記者使用GIS抓石門水庫集水區的座標，然後匯入geojson.io的網站開始編輯，然後手動開始把石門水庫集水區的座標與長方形圖層結合。
最後就擬出與數位設計想要的效果，一同匯出成geojson檔的格式，再使用leaflet.js的getBounds()的功能限制使用者滑動的範圍即可。
二、 地圖故事
衛星底圖
首先，個人覺得這次專輯其中一特色就是衛星底圖是主角，大家討論決定要用衛星地圖的時候，根據之前製作互動地圖的經驗，當時台灣並沒有公開如此高清的地圖api，海外的地圖api也是如此。
而我們期望的效果如下，希望就像As Greenland Melts, Where’s the Water Going?跟Killing the Colorado: Explore the River這兩個專輯高清、清楚。
要用如此高清又客製化的圖層，無非就是課金，不然就是自己家做一個衛星拍，但後者不知道要等多久（？） 只能選前者，所以開始從國外網站開始搜尋有在製作衛星地圖的公司，鎖定分別是美國的DigitalGlobe跟法國的PlanetObserver，後來發現DigitalGlobe有台灣的代理商，所以就主動與代理商聯絡了。
滾動式地圖
除了衛星地圖，這次效果主要參考是Outlander PHEV的滾動式地圖，而這個的專輯製作分享可以參考這邊。
滾動式專輯不是我第一次做，但這個效果真的是變態上的變態，一邊滑鼠滾動，滾到定點跳出地名以及LIGHTBOX按鈕，過程滾動體驗非常順。
之所以會參考這個效果，是因為這個跟我們這次講的地圖故事概念接近，想要把焦點放在石門水庫集水區附近的重要地點的開發與樣貌，還有就是這個效果很棒，在點和點移動之間有微3D的效果。
蒐集資料與程式研究過程
仔細研究效果之後，專輯結合使用了許多js套件，其中最重要的是three.js、mousewheel.js跟GSAP。
因為未曾使用three.js撰寫過程式的經驗，所以決定先展開一個禮拜的學習。不久我就馬上果斷放棄了XD 加上修改一個功能需要花一個下午，如果2月初拿到資料，要在兩週內製作是來不及的。
怎麼辦呢？（柯P抓頭）
必須回到原點思考，第一個必要存在的是滑鼠滾動，以及配合線條滾動，能夠讓使用者了解地點以及當地石門水庫周邊的狀況。
後來突然想到很久一篇的文章。
這篇文章存在很久，但他傳達的概念與我們製作的理念是相同的。
運用SVG的特性，再者又搜到GSAP的使用CSS transfrom移動圖片的範例，所以決定使用的套件為mousewheel.js跟GSAP。
拿到資料的前一周，先使用假圖套用的寫出一版動態，確認用以上套件可以達到類似效果。
製作期間（寶寶有苦說不清）
當然，在正式開始套真正的素材與資料碰到不少的困難。萬事起頭難，如果現在問我會不會這樣寫，應該是不會這樣寫了。以下四個列舉我碰到的困難：
1.網站效能
素材檔案過大，以及過多影片需要自動播放，整個專輯超級胖跟大，簡直就是在挑戰大家的手機與電腦的效能。
除了做到素材壓縮之外，也額外使用了PACE.JS的autoloading，在loading的時候先加一個教學畫面，loading結束之後自然會消失。此外，因為這次影音檔案非常多，所以也使用js確保影片沒有在背後自動播放，關掉每個地點內容的LIGHTBOX，或是觸發到下一個地點的時候，上一個地點的影片有暫停播放。
2. 地圖的定點定位
使用GASP的CSS3 transform，必須要設定每個定點X跟Y的座標，所以也是花了不少時間計算定位，且一共須做三種尺寸的座標，桌機版、小吋螢幕、以及手機版。
3.手機版與電腦版的使用習慣
一邊滾動一邊跳出定點，其實不適合用在手機版上，會給使用帶來困擾，所以手機版以左右鍵代替，可以讓使用者方便切換地點。
mac因為怕滾輪方式跟touch pad的速度衝突，所以也加上左右鍵。
4.滑鼠滾動的速度
製作之後才發現，每個滑鼠滑動的速度影響滾動速度，而mac的touch pad居然非常的遲鈍。
其實最後都會希望所有版本都是左右鍵轉換就好了。
結語
做完這個專輯之後，希望能夠找個時間好好學習three.js。three.js有豐富的library可以支援在網頁跟手機網頁各式3D效果，使用上效能也順。未來如果碰到相似的案子，可以再次使用，也希望未來專輯製作效能更好！！！
