npm install
npm run serve
tsc -w
npm run build
- 建立
./deployConfig.json並配置部署相關設定
{
"ComputerName": "",
"UserName": "",
"Password": "",
"dest": "",
"dist": "",
...
}
npm run deploy
-
PWA & vue.config.js ( webpack compile setting )
-
workbox (injectManifest) workbox api 取得預緩存清單
-
圖標素材 及
manifest.json使用FaviconsWebpackPluginpublicPath影響會注入到html <head>的路徑start_url、scope路徑是相對於manifest.json所在位置
-
./src/sw-manifest.jsworkbox-webpack-plugin 會替換內容中self.__WB_MANIFEST為預緩存清單 -
./src/sw.js工作線程，使用copy-webpack-plugin複製、注入以git-describe產生的 cahce Name (含版本號) -
其他參考
-
-
./public/legend.jsontype A = { type:"color"|"text" colorScaleLabel:Array<Array<string>> // 顏色尺度-數值(降冪) colorScaleValue:Array<Array<string>> // 顏色尺度-顏色(降冪) } type B = { type:"text" colorScaleName:string // 顏色尺度 對應文字(不限排序) } Array<{ layerName:string // 圖層名稱正規字串 label:string // 標籤名稱+單位 layerName:string // 圖層名稱正規字串 } & ( A | B )>
-
./public/layerCatelog.jsonArray<{ catelog:{label:String,value:String} // 分類名稱定義 layer: Array<String> // 屬於該分類的圖層名稱 }>
-
./public/layerDef.jsontype geojson = { type: "geojson", pathOptions:{ opacity:number color:string weight:number ... // see geojson.ts }, } type gradient = { type: "gradient", layerOption: { interpolateType: "nearestneighbor"| string // 預設使用雙線性內插 ... // see gradient.ts } } // 底圖 baseLayers:Array<{ type:"wmts" title:string url:string imgUrl:string opacity:number maxZoom:number }> // 一般圖層 layers:Array<{ title:string url:string visible:boolean tag: Array<string> // ["A", "B", "C", "D"] from layerTags } & (geojson|gradient)>
-
參考
src/@types/index.d.tstypescript/init.tsleaflet map 初始化，提供建立地圖的方法typescript/layer.tsleaflet layer 圖層及擴展，含 圖層排序、增加、可見度、樣式設定
-
src/main.js- 配置引用宣告
- 組件全局宣告
-
src/store.jsVuex 狀態配置 : 自動匹配./components中任意資料夾的*.js作為狀態，並以路徑的資料夾名稱做為狀態的命名空間 -
src/sw.jsservice worker主程式, 匯入workbox打包後的檔案列表sw-manifest.js, 並存入快取, (目前)其他資源直接bypass -
src/custom.scss主題顏色變數、全局樣式 -
src/element-variables.scsselement-ui 樣式
- Vuex API
- root
./src/main.js - layer
./src/result/layerState.js - result
./src/result/resultState.js
- strange UI :
- top-right buttons integerate all relative links
- isoheStation.vue : show charts each item
- better velocity from cs8425
- check all event listener unbind
- try use scss in typescript :
declare module.*scss -
leaflet-filelayerline:214_convertToGeoJSON()not convert File to string (use intypescript/layer/fileLayer.ts)
const loader = L.FileLayer.fileLoader(...)
loader.loadData(file ,"filename.kmz") // file in leaflet-filelayer wasn't converted string
// change leaflet-filelayer`line:214
_convertToGeoJSON: function _convertToGeoJSON(content, format) {
return new Promise((res,rej)=>{
content.text().then(str=>{
const parsed = (new window.DOMParser()).parseFromString(str, 'text/xml')
// Format is either 'gpx' or 'kml'
const geojson = toGeoJSON[format](parsed);
res(this._loadGeoJSON(geojson))
})
})
}