2021 台灣水井地圖 & 預約取水服務

Project Intro

Introduction

2021年臺灣旱災缺水危機為發生於2021年初台灣本島西部地區的大規模乾旱事件，導致各地區進入不同程度的減壓供水、限水、停耕、歇業等情況，此為自1947年以來最嚴重乾旱、又被稱作「百年大旱」。 此波旱象於5月底～6月底連續幾波梅雨鋒面、陣雨、西南氣流帶來明顯降雨而緩解，中央旱災應變中心於6月22日解除開設

Ref: 維基百科 - 2021年臺灣旱災缺水危機

這波百年大旱發生時，當時我正在水利署服替代役，因為全台缺水，整個水利署都在為民生和工業調度水資源忙得不可開交。身為一個小小的替代役，業務上能直接協助的事情並不多，我能幫忙比較多忙的部分，就是發揮自己的所學，把水井的Open Data放上Google Map，將資料視覺化，讓資訊檢索更有效率，同時加上了預約取水的介面與功能，希望在旱災時能用自己的一份力量幫助台灣

Person In charge

• Website Dev by NorthBei from Metartemis

Relative Link

• 2021 Taiwan Well Map

Screenshots/Film

PC

Mobile	Mobile	Mobile

Development Instruction

Environment

Service	Version
Node.js	v18.16.0
npm	v9.5.1
Vue	Vue2

Environment Variables

Rename the .env.local.example to .env.local, and get the env var from Google Map API console

Service	Env var
Google Map	VUE_APP_GOOGLE_MAP_API_KEY

Note: The current production google map api key is hosted by 2021newtaipeiculturefestival project

Getting Started

Install packages & Run the development server:

npm install
npm install serve

Project setup

Install all packages

yarn install

Start Development

Run development web server at http://localhost:8080 to compile and hot-reloads for development

npm run serve

Lint all files

Run lint for all .vue, .js, .json files by eslint

npm run lint

Build Production

Compiles and minifies for production

npm run build

Preview Built Result

Run local static file server for preview built result at http://localhost:8080

npm run preview

Reference

• Design
  • og tag image
  • Well Image
• Development
  • 如何解決Node 17(含)以上，執行Vue2會出現ERR_OSSL_EVP_UNSUPPORTED:
    • how to fix 'ERR_OSSL_EVP_UNSUPPORTED' ERROR in vue?
  • Disalbe Vue Cli PWA service
    • Disable PWA plugin in Vue CLI 3
    • Allow users to disable web app manifest injection in PWA plugin #4653