WMaplibreglVue2 - 使用 MapLibre GL JS 重構的地圖組件（Vue 2） 所有面板透過四角容器 (corner container) 自動堆疊，不重疊。
核心業務邏輯已提取至 src/js/ 模組，此元件僅保留：
- 響應式狀態（data / computed / watch）
- 薄委派方法（調用模組函式 + 同步 Vue 狀態）
- Vue 特定操作（$nextTick / $refs / $forceUpdate）
Props
| Name | Type | Default value | Required? | Description |
|---|---|---|---|---|
opt |
Object | - | Yes | 輸入資料設定物件 |
opt.center |
Array | [23.5, 121.1] |
No | 輸入地圖顯示中點陣列，陣列為WGS84[緯度,經度]，兩值皆須為有限數(數字字串視為非法)且緯度在±90內，否則視為未給(用預設)，預設[23.5, 121.1] |
opt.zoom |
Number | 6 |
No | 輸入地圖顯示層級數字，可給數字或數字字串，非數值視為未給(用預設6)，範圍由opt.minZoom與opt.maxZoom決定(元件不另夾值)，超出範圍者由地圖拉入範圍，使用者縮放、縮放按鈕或API縮放後會把地圖實際層級寫回本欄位(地球投影下實際下限隨緯度略低於minZoom，墨卡托投影下受容器高度限制而略高於minZoom，皆以實際層級為準；地球投影下僅改center時地圖亦會依緯度差調整層級並寫回本欄位)，欲於執行期變更或接收寫回須於opt預先宣告此鍵，預設6 |
opt.minZoom |
Number | 0 |
No | 輸入地圖可縮小至之最小顯示層級數字，使用者縮放、縮放按鈕、opt.zoom與API皆受此限制，可給數字或數字字串，夾在0~24，非數值或非有限數視為未給，大於maxZoom時忽略minZoom並console.warn，可於執行期變更(須於opt預先宣告此鍵)，預設0 |
opt.maxZoom |
Number | 22 |
No | 輸入地圖可放大至之最大顯示層級數字，給法同minZoom(夾在0~24)，可於執行期變更(須於opt預先宣告此鍵)，預設22；此為地圖顯示層級上限，與圖磚層級不同(256px圖磚於地圖層級z約請求z+1級)，各底圖服務之層級上限請以baseMaps[i].maxzoom設定(超過時改以該級圖磚放大顯示)，勿以本欄位遷就單一圖資；欲還原舊版上限18可給18 |
opt.panelBackgroundColor |
String | 'rgba(255,255,255,0.95)' |
No | 輸入各顯示資訊區背景顏色字串，預設'rgba(255,255,255,0.95)' |
opt.projection |
String | '' |
No | 輸入地圖投影方式字串，''代表自動(顯示層級≤8用球面globe、以上用平面mercator)，可選'globe'、'mercator'，預設'' |
opt.displayPopupOnlyone |
Boolean | true |
No | 輸入是否同時只顯示一個popup布林值，開啟時點擊新圖徵會關閉其他已開的popup，預設true |
opt.displayOrderByType |
Boolean | true |
No | 輸入是否依圖徵型別面積序堆疊布林值，開啟時圖層由上而下為點>線>面>等值線>影像，且點擊命中最上層型別(小面積優先)，預設true |
opt.popupPosition |
String | 'top' |
No | 輸入popup預設彈出方向字串，可選'top'、'bottom'、'left'、'right'，靠近地圖邊緣時會自動翻轉，預設'top' |
opt.tooltipPosition |
String | 'left' |
No | 輸入tooltip預設彈出方向字串，可選'top'、'bottom'、'left'、'right'，預設'left' |
opt.panelsOrder |
Array | 詳見程式碼 |
No | 輸入各角落內面板的堆疊順序陣列，預設值詳見程式碼的defPanelsOrder |
opt.popupResize |
Object | {} |
No | 輸入popup可拖曳調整大小的設定物件，預設{} |
opt.popupResize.resizable |
Boolean | false |
No | 輸入是否開啟popup四邊/四角拖曳調整大小布林值，false時為純穿透、行為與未啟用一致，預設false |
opt.popupResize.resizeModes |
Array | 詳見程式碼 |
No | 輸入可拖曳的把手方向陣列，元素可為'top'、'bottom'、'left'、'right'、'top-left'、'top-right'、'bottom-left'、'bottom-right'，預設為八向全開 |
opt.popupResize.minWidth |
Number | 200 |
No | 輸入popup可調整的最小寬度數字，單位px，預設200 |
opt.popupResize.minHeight |
Number | 200 |
No | 輸入popup可調整的最小高度數字，單位px，預設200 |
opt.popupResize.width |
Number | 400 |
No | 輸入popup初始寬度數字，單位px，預設400 |
opt.popupResize.height |
Number | 300 |
No | 輸入popup初始高度數字，單位px，預設300 |
opt.clusterPoints |
Boolean | false |
No | 輸入是否啟用點叢集布林值，預設false |
opt.clusterPointsRadius |
Number | 50 |
No | 輸入點叢集半徑數字，單位px，預設50 |
opt.clusterPointsMaxZoom |
Number | 14 |
No | 輸入點叢集套用的最大顯示層級數字，預設14 |
opt.clusterPointsLevelNum |
Number | 3 |
No | 輸入點叢集分級數量數字(需≥1)，預設3 |
opt.clusterPointsLevelValues |
Array | [10,100] |
No | 輸入點叢集各級的點數門檻陣列，長度需為分級數量-1，預設[10,100] |
opt.clusterPointsLevelRadius |
Array | [10,15,20] |
No | 輸入點叢集各級的圓半徑陣列，單位px，長度需為分級數量，預設[10,15,20] |
opt.clusterPointsLevelFillColors |
Array | 詳見程式碼 |
No | 輸入點叢集各級的填充顏色陣列，長度需為分級數量，預設值詳見程式碼 |
opt.clusterPointsLevelLineColors |
Array | ['#fff','#fff','#fff'] |
No | 輸入點叢集各級的框線顏色陣列，預設['#fff','#fff','#fff'] |
opt.clusterPointsLevelLineWidths |
Array | [2,2,2] |
No | 輸入點叢集各級的框線寬度陣列，單位px，預設[2,2,2] |
opt.clusterPointsLevelTextSizes |
Array | [12,12,12] |
No | 輸入點叢集各級的計數文字大小陣列，單位px，預設[12,12,12] |
opt.clusterPointsLevelTextColors |
Array | ['#fff','#fff','#fff'] |
No | 輸入點叢集各級的計數文字顏色陣列，預設['#fff','#fff','#fff'] |
opt.panelBaseMaps.show |
Boolean | true |
No | 輸入是否顯示底圖選擇區布林值，預設true |
opt.panelBaseMaps.baseMaps |
Array | 詳見程式碼 |
No | 輸入底圖選擇清單陣列，各元素為底圖設定物件(欄位見下)，預設值詳見程式碼的defBaseMaps |
opt.panelBaseMaps.baseMaps[i].name |
String | 詳見程式碼 |
No | 輸入第i個底圖的名稱字串，供面板清單顯示 |
opt.panelBaseMaps.baseMaps[i].url |
String | 詳見程式碼 |
No | 輸入第i個底圖的連結字串，依type而異：raster為圖磚網址樣板，支援{s}(子網域a/b/c)、{z}/{x}/{y}、//(自動補https)，maplibre原生之{quadkey}、{bbox-epsg-3857}等佔位符原樣支援；wms為服務端點(自動附加GetMap參數)；vector為TileJSON網址(支援//自動補https，不支援圖磚樣板與{s})；style為MapLibre style JSON網址。url非有效字串之條目會被略過(console.warn)且不影響其他條目 |
opt.panelBaseMaps.baseMaps[i].type |
String | raster |
No | 輸入第i個底圖的來源類型字串，省略代表raster圖磚，可為'wms'、'vector'、'style'(url指向完整MapLibre style JSON，整組sources/layers注入現有地圖，glyphs/sprite為全域單例由最後套用者決定)，預設raster |
opt.panelBaseMaps.baseMaps[i].colorShade |
String | '' |
No | 輸入第i個底圖的色調字串，非空(如'light'/'dark')代表底圖(radio單選)，空字串''代表疊加層(checkbox多選並有透明度滑桿)，預設'' |
opt.panelBaseMaps.baseMaps[i].visible |
Boolean | false |
No | 輸入是否顯示第i個底圖布林值，預設false |
opt.panelBaseMaps.baseMaps[i].opacity |
Number | 1 |
No | 輸入第i個底圖的透明度數字(0~1)，可給數字或數字字串，超出範圍夾限、非數值視為未給，raster與wms預設1、vector預設0.8(疊加層面板滑桿與實繪一致)，type為'style'時不支援(各層自帶opacity，面板亦不顯示滑桿) |
opt.panelBaseMaps.baseMaps[i].layerType |
String | 'fill' |
No | 輸入第i個底圖(type為vector時)的圖層類型字串，可選'fill'、'line'、'fill-extrusion'，預設'fill' |
opt.panelBaseMaps.baseMaps[i].layer |
String | '' |
No | 輸入第i個底圖(type為vector時)的source-layer名稱字串，預設'' |
opt.panelBaseMaps.baseMaps[i].layers |
String | '' |
No | 輸入第i個底圖(type為wms時)的LAYERS參數字串，預設'' |
opt.panelBaseMaps.baseMaps[i].maxzoom |
Number | null |
No | 輸入第i個底圖(type為raster、wms、vector時)的圖磚來源最大層級整數，即服務實際提供圖磚之最深「圖磚層級」(非地圖顯示層級：256px圖磚於地圖層級z時約請求z+1級)，超過時改以該級圖磚放大顯示，避免請求不存在之層級致圖層空白並報錯，圖台可放大至opt.maxZoom(預設22，此時請求之圖磚層級可達23)，故服務層級未達該值之圖磚服務須給本欄位，可給數字或數字字串，小數無條件捨去，負數、非有限數或非數值視為未給，不給則沿用maplibre預設(raster與wms為22，vector依其TileJSON)，vector僅宜往內限縮TileJSON之範圍(大於TileJSON者會請求不存在之層級)，type為'style'時不適用(由style JSON自帶)，預設null |
opt.panelBaseMaps.baseMaps[i].minzoom |
Number | null |
No | 輸入第i個底圖(type為raster、wms、vector時)的圖磚來源最小層級整數，需求之圖磚層級低於此值時不請求圖磚且該處不顯示(地圖俯視或開啟地形時，遠景低於此層級之區域亦不顯示)，給法同maxzoom但小數無條件進位，須不大於服務最大層級，與maxzoom同時給且大於maxzoom時忽略minzoom，不給則沿用maplibre預設(raster與wms為0，vector依其TileJSON)，type為'style'時不適用，預設null |
opt.panelBaseMaps.baseMaps[i].colorFillExtrusion |
String | null |
No | 輸入第i個底圖(layerType為fill-extrusion時)的統一建物顏色字串，不傳則回退用資料colour屬性，預設null |
opt.panelBaseMaps.position |
String | 'topleft' |
No | 輸入底圖選擇區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topleft' |
opt.panelBaseMaps.width |
Number | null |
No | 輸入底圖選擇區寬度數字，單位px，預設null |
opt.panelBaseMaps.maxWidth |
Number | null |
No | 輸入底圖選擇區最大寬度數字，單位px，預設null |
opt.panelBaseMaps.height |
Number | null |
No | 輸入底圖選擇區高度數字，單位px，預設null |
opt.panelBaseMaps.maxHeight |
Number | null |
No | 輸入底圖選擇區最大高度數字，單位px，預設null |
opt.panelBaseMaps.stopWheel |
Boolean | false |
No | 輸入底圖選擇區當過高出現垂直捲軸時，是否可接收捲軸布林值，預設false |
opt.panelBaseMaps.terrainMap |
Object | 詳見程式碼 |
No | 輸入3D地形設定物件，不給則使用程式碼的defTerrainMap(遠端DEM)，給物件即整組取代預設(未給之欄位不繼承預設，例如只給exaggeration則無地形)，給{}則不套用地形，預設值詳見程式碼的defTerrainMap |
opt.panelBaseMaps.terrainMap.terrainSource.url |
String | - | No | 輸入地形DEM圖磚網址樣板字串，支援{z}/{x}/{y}、//(自動補https)，未給則不套用地形(陰影亦不套用) |
opt.panelBaseMaps.terrainMap.terrainSource.encoding |
String | 'terrarium' |
No | 輸入地形DEM編碼字串，可選'terrarium'、'mapbox'，預設'terrarium' |
opt.panelBaseMaps.terrainMap.terrainSource.tileSize |
Number | 256 |
No | 輸入地形DEM圖磚尺寸數字，單位px，預設256 |
opt.panelBaseMaps.terrainMap.terrainSource.maxzoom |
Number | null |
No | 輸入地形DEM圖磚來源最大層級整數，給法同baseMaps[i].maxzoom，預設null(defTerrainMap給13) |
opt.panelBaseMaps.terrainMap.exaggeration |
Number | 1.5 |
No | 輸入地形高度誇張倍率數字，預設1.5 |
opt.panelBaseMaps.terrainMap.hillshadeSource |
Object | null |
No | 輸入陰影DEM來源設定物件，欄位同terrainSource(url、encoding、tileSize、maxzoom)，須同時給有效之terrainSource才生效，url與terrainSource.url相同時共用地形來源(encoding、tileSize、maxzoom以terrainSource為準)，不給則不顯示陰影，預設null |
opt.panelBaseMaps.terrainMap.hillshadeExaggeration |
Number | 0.5 |
No | 輸入陰影強度數字，預設0.5 |
opt.panelLabels.show |
Boolean | true |
No | 輸入是否顯示地圖資訊區布林值，預設true |
opt.panelLabels.position |
String | 'topright' |
No | 輸入地圖資訊區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topright' |
opt.panelLabels.title |
String | '' |
No | 輸入地圖資訊區內標題字串，預設'' |
opt.panelLabels.lng |
String | 'Longitude' |
No | 輸入地圖資訊區內標注經度字串，預設'Longitude' |
opt.panelLabels.lat |
String | 'Latitude' |
No | 輸入地圖資訊區內標注緯度字串，預設'Latitude' |
opt.panelLabels.zoom |
String | 'Zoom' |
No | 輸入地圖資訊區內標注顯示層級字串，預設'Zoom' |
opt.panelLabels.useItems |
Array | ['lng','lat','zoom'] |
No | 輸入地圖資訊區內呈現項目陣列，各元素給字串，'lng'代表經度，'lat'代表緯度，'zoom'代表顯示層級，預設['lng','lat','zoom'] |
opt.panelLabels.width |
Number | null |
No | 輸入地圖資訊區寬度數字，單位px，預設null |
opt.panelLabels.maxWidth |
Number | null |
No | 輸入地圖資訊區最大寬度數字，單位px，預設null |
opt.panelLabels.height |
Number | null |
No | 輸入地圖資訊區高度數字，單位px，預設null |
opt.panelLabels.maxHeight |
Number | null |
No | 輸入地圖資訊區最大高度數字，單位px，預設null |
opt.panelCompassRose.show |
Boolean | false |
No | 輸入是否顯示玫瑰羅盤區布林值，預設false |
opt.panelCompassRose.position |
String | 'topright' |
No | 輸入玫瑰羅盤區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topright' |
opt.panelCompassRose.size |
Number | 120 |
No | 輸入玫瑰羅盤區尺寸(長寬)數字，單位px，預設120 |
opt.panelCompassRose.withPanel |
Boolean | false |
No | 輸入是否顯示玫瑰羅盤區底部面板布林值，預設false |
opt.panelCompassRose.iconSrcLight |
String | 詳見程式碼 |
No | 輸入淺色系玫瑰羅盤圖標來源字串，可使用base64格式或網址，預設值詳見程式碼 |
opt.panelCompassRose.iconSrcDark |
String | 詳見程式碼 |
No | 輸入深色系玫瑰羅盤圖標來源字串，可使用base64格式或網址，預設值詳見程式碼 |
opt.panelCompassRose.iconSrc |
String | null |
No | 輸入玫瑰羅盤圖標來源字串，若有則直接使用；若為null則withPanel為true時用iconSrcDark，否則自動依底圖colorShade決定(空或'light'用iconSrcDark，'dark'用iconSrcLight)，預設null |
opt.panelCompass3d.show |
Boolean | true |
No | 輸入是否顯示3D指北針區布林值(可點擊重設正北/俯仰)，預設true |
opt.panelCompass3d.position |
String | 'topright' |
No | 輸入3D指北針區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topright' |
opt.panelCompass3d.size |
Number | 44 |
No | 輸入3D指北針尺寸數字，單位px，預設44 |
opt.panelZoom.show |
Boolean | true |
No | 輸入是否顯示縮放按鈕區布林值，預設true |
opt.panelZoom.position |
String | 'bottomleft' |
No | 輸入縮放按鈕區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'bottomleft' |
opt.panelScale.show |
Boolean | true |
No | 輸入是否顯示比例尺區布林值，預設true |
opt.panelScale.position |
String | 'bottomright' |
No | 輸入比例尺區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'bottomright' |
opt.panelItems.show |
Boolean | true |
No | 輸入圖層顯隱切換區是否顯示布林值，預設true |
opt.panelItems.position |
String | 'topleft' |
No | 輸入圖層顯隱切換區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topleft' |
opt.panelItems.width |
Number | null |
No | 輸入圖層顯隱切換區寬度數字，單位px，預設null |
opt.panelItems.maxWidth |
Number | null |
No | 輸入圖層顯隱切換區最大寬度數字，單位px，預設null |
opt.panelItems.height |
Number | null |
No | 輸入圖層顯隱切換區高度數字，單位px，預設null |
opt.panelItems.maxHeight |
Number | null |
No | 輸入圖層顯隱切換區最大高度數字，單位px，預設null |
opt.panelItems.stopWheel |
Boolean | false |
No | 輸入圖層顯隱切換區當過高出現垂直捲軸時，是否可接收捲軸布林值，預設false |
opt.panelLegends.show |
Boolean | true |
No | 輸入是否顯示圖例區布林值(僅有可見等值線時呈現)，預設true |
opt.panelLegends.position |
String | 'bottomright' |
No | 輸入圖例區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'bottomright' |
opt.panelLegends.width |
Number | null |
No | 輸入圖例區寬度數字，單位px，預設null |
opt.panelLegends.maxWidth |
Number | 300 |
No | 輸入圖例區最大寬度數字，單位px，預設300 |
opt.panelLegends.height |
Number | null |
No | 輸入圖例區高度數字，單位px，預設null |
opt.panelLegends.maxHeight |
Number | null |
No | 輸入圖例區最大高度數字，單位px，預設null |
opt.pointSets |
Array | [] |
No | 輸入點集合陣列，各元素為物件，預設[] |
opt.pointSets[i].title |
String | '' |
No | 輸入第i個點集合的標題字串，預設'' |
opt.pointSets[i].msg |
String | '' |
No | 輸入第i個點集合的說明字串，預設'' |
opt.pointSets[i].key |
String | null |
No | 輸入第i個點集合的穩定識別鍵字串，需於陣列內唯一；提供後陣列插入或重排時該組身分不變(未變更組可增量跳過不重建)，未給則以陣列索引識別，預設null |
opt.pointSets[i].order |
Number | null |
No | 輸入第i個點集合的排序用數字，預設null |
opt.pointSets[i].visible |
Boolean | true |
No | 輸入是否顯示第i個點集合布林值，預設true |
opt.pointSets[i].type |
String | 'circle' |
No | 輸入第i個點集合的預設呈現類型字串，可選'circle'(圓)、'icon'(圖標)，預設'circle' |
opt.pointSets[i].lineColor |
String | 'rgba(255,255,255,1)' |
No | 輸入第i個點集合(circle)的框線顏色字串，預設'rgba(255,255,255,1)' |
opt.pointSets[i].lineWidth |
Number | 1 |
No | 輸入第i個點集合(circle)的框線寬度數字，預設1 |
opt.pointSets[i].fillColor |
String | 'rgba(0,150,255,0.65)' |
No | 輸入第i個點集合(circle)的填充顏色字串，預設'rgba(0,150,255,0.65)' |
opt.pointSets[i].size |
Number | 10 |
No | 輸入第i個點集合(circle)的圓半徑數字，預設10 |
opt.pointSets[i].iconSrc |
String | 詳見程式碼 |
No | 輸入第i個點集合(icon)的圖標來源字串，可使用base64格式或網址，預設為內建點圖標，詳見程式碼 |
opt.pointSets[i].iconSize |
Array | [24,40] |
No | 輸入第i個點集合(icon)的圖標尺寸陣列[寬,高]，單位px，預設[24,40] |
opt.pointSets[i].iconAnchor |
Array | [iconSize[0]/2,iconSize[1]] |
No | 輸入第i個點集合(icon)的圖標定位位置陣列，由圖標左上角起算，往左為+x、往上為+y，單位px，預設[iconSize[0]/2,iconSize[1]] |
opt.pointSets[i].popupAnchor |
Array | [0,-iconSize[1]/1.0] |
No | 輸入第i個點集合顯示popup時的指向偏移陣列[x,y]，由實際定位點起算，往右為+x、往下為+y，單位px，未給時自動依半徑或iconSize計算 |
opt.pointSets[i].tooltipAnchor |
Array | [0,-iconSize[1]/1.0] |
No | 輸入第i個點集合顯示tooltip時的指向偏移陣列[x,y]，未給時自動依半徑或iconSize計算 |
opt.pointSets[i].points |
Array | [] |
No | 輸入第i個點集合的各點數據陣列，各元素為物件或緯經度陣列(即[{p1},...]或[[lat,lng],...])，預設[] |
opt.pointSets[i].points[j].latLng |
Array | [] |
No | 輸入第i個點集合第j個點的緯經度座標陣列[lat,lng]，預設[] |
opt.pointSets[i].points[j].title |
String | '' |
No | 輸入第i個點集合第j個點的標題字串，預設'' |
opt.pointSets[i].points[j].msg |
String | '' |
No | 輸入第i個點集合第j個點的說明字串，預設'' |
opt.pointSets[i].points[j].type |
String | 繼承pointSet |
No | 輸入第i個點集合第j個點的呈現類型字串，可選'circle'、'icon'，未給則繼承所屬點集合 |
opt.pointSets[i].points[j].lineColor |
String | 繼承pointSet |
No | 輸入第i個點集合第j個點的框線顏色字串，未給則繼承所屬點集合 |
opt.pointSets[i].points[j].lineWidth |
Number | 繼承pointSet |
No | 輸入第i個點集合第j個點的框線寬度數字，未給則繼承所屬點集合 |
opt.pointSets[i].points[j].fillColor |
String | 繼承pointSet |
No | 輸入第i個點集合第j個點的填充顏色字串，未給則繼承所屬點集合 |
opt.pointSets[i].points[j].size |
Number | 繼承pointSet |
No | 輸入第i個點集合第j個點的圓半徑數字，未給則繼承所屬點集合 |
opt.pointSets[i].points[j].iconSrc |
String | 繼承pointSet |
No | 輸入第i個點集合第j個點的圖標來源字串，未給則繼承所屬點集合 |
opt.pointSets[i].points[j].iconSize |
Array | 繼承pointSet |
No | 輸入第i個點集合第j個點的圖標尺寸陣列[寬,高]，未給則繼承所屬點集合 |
opt.pointSets[i].points[j].iconAnchor |
Array | 繼承pointSet |
No | 輸入第i個點集合第j個點的圖標定位位置陣列，未給則繼承所屬點集合 |
opt.pointSets[i].points[j].popupAnchor |
Array | null |
No | 輸入第i個點集合第j個點顯示popup時的指向偏移陣列[x,y]，預設null |
opt.pointSets[i].points[j].tooltipAnchor |
Array | null |
No | 輸入第i個點集合第j個點顯示tooltip時的指向偏移陣列[x,y]，預設null |
opt.pointSetsClick |
function | function(){} |
No | 輸入全域點集合的click呼叫函數，引數為{ point, pointSet, pointSets }，預設function(){} |
opt.polylineSets |
Array | [] |
No | 輸入折線集合陣列，各元素為物件，預設[] |
opt.polylineSets[i].title |
String | '' |
No | 輸入第i個折線集合的標題字串，預設'' |
opt.polylineSets[i].msg |
String | '' |
No | 輸入第i個折線集合的說明字串，預設'' |
opt.polylineSets[i].order |
Number | null |
No | 輸入第i個折線集合的排序用數字，預設null |
opt.polylineSets[i].visible |
Boolean | true |
No | 輸入是否顯示第i個折線集合布林值，預設true |
opt.polylineSets[i].lineColor |
String | 'rgba(0,150,255,1)' |
No | 輸入第i個折線集合的框線顏色字串，預設'rgba(0,150,255,1)' |
opt.polylineSets[i].lineWidth |
Number | 3 |
No | 輸入第i個折線集合的框線寬度數字，預設3 |
opt.polylineSets[i].latLngs |
Array | [] |
No | 輸入第i個折線集合的數據陣列，可為polyline([[lat,lng],...])或multiPolyline，各點座標為緯經度，預設[] |
opt.polylineSetsClick |
function | function(){} |
No | 輸入全域折線集合的click呼叫函數，引數為{ ev, polylineSet, kpolylineSet, polylineSets }，預設function(){} |
opt.polygonSets |
Array | [] |
No | 輸入多邊形集合陣列，各元素為物件，預設[] |
opt.polygonSets[i].title |
String | '' |
No | 輸入第i個多邊形集合的標題字串，預設'' |
opt.polygonSets[i].msg |
String | '' |
No | 輸入第i個多邊形集合的說明字串，預設'' |
opt.polygonSets[i].order |
Number | null |
No | 輸入第i個多邊形集合的排序用數字，預設null |
opt.polygonSets[i].visible |
Boolean | true |
No | 輸入是否顯示第i個多邊形集合布林值，預設true |
opt.polygonSets[i].lineColor |
String | 'rgba(0,150,255,1)' |
No | 輸入第i個多邊形集合的框線顏色字串，預設'rgba(0,150,255,1)' |
opt.polygonSets[i].lineWidth |
Number | 3 |
No | 輸入第i個多邊形集合的框線寬度數字，預設3 |
opt.polygonSets[i].fillColor |
String | 'rgba(0,150,255,0.25)' |
No | 輸入第i個多邊形集合的填充顏色字串，預設'rgba(0,150,255,0.25)' |
opt.polygonSets[i].latLngs |
Array | [] |
No | 輸入第i個多邊形集合的數據陣列，各點座標為緯經度，預設[]。可為單一環([[lat,lng],...])、環陣列([[[lat,lng],...],...]，代表1個polygon，環間為XOR套疊可表示挖洞)、或polygon陣列([[[[lat,lng],...],...],...]，代表1個multiPolygon，各polygon之環各自XOR後合併) |
opt.polygonSetsClick |
function | function(){} |
No | 輸入全域多邊形集合的click呼叫函數，引數為{ ev, polygonSet, kpolygonSet, polygonSets }，預設function(){} |
opt.geojsonSets |
Array | [] |
No | 輸入geojson集合陣列，各元素為物件，預設[] |
opt.geojsonSets[i].title |
String | '' |
No | 輸入第i個geojson集合的標題字串，預設'' |
opt.geojsonSets[i].msg |
String | '' |
No | 輸入第i個geojson集合的說明字串，預設'' |
opt.geojsonSets[i].order |
Number | null |
No | 輸入第i個geojson集合的排序用數字，預設null |
opt.geojsonSets[i].visible |
Boolean | true |
No | 輸入是否顯示第i個geojson集合布林值，預設true |
opt.geojsonSets[i].lineColor |
String | 'rgba(0,150,255,1)' |
No | 輸入第i個geojson集合的框線顏色字串，預設'rgba(0,150,255,1)' |
opt.geojsonSets[i].lineWidth |
Number | 3 |
No | 輸入第i個geojson集合的框線寬度數字，預設3 |
opt.geojsonSets[i].fillColor |
String | 'rgba(0,150,255,0.25)' |
No | 輸入第i個geojson集合的填充顏色字串，預設'rgba(0,150,255,0.25)' |
opt.geojsonSets[i].geojson |
Object | {} |
No | 輸入第i個geojson集合的GeoJSON物件(自動拆成點/線/面子圖層)，各點座標為緯經度，預設{} |
opt.geojsonSetsClick |
function | function(){} |
No | 輸入全域geojson集合的click呼叫函數，引數為{ ev, lat, lng, geojsonSet, kgeojsonSet, geojsonSets }，預設function(){} |
opt.contourSets |
Array | [] |
No | 輸入等值線集合陣列，各元素為物件，預設[] |
opt.contourSets[i].title |
String | '' |
No | 輸入第i個等值線集合的標題字串(圖例與圖層清單顯示用)，預設'' |
opt.contourSets[i].msg |
String | '' |
No | 輸入第i個等值線集合的說明字串，預設'' |
opt.contourSets[i].legendMsg |
String | '' |
No | 輸入第i個等值線集合的圖例副標題字串，預設'' |
opt.contourSets[i].order |
Number | null |
No | 輸入第i個等值線集合的排序用數字，預設null |
opt.contourSets[i].visible |
Boolean | true |
No | 輸入是否顯示第i個等值線集合布林值，預設true |
opt.contourSets[i].points |
Array | [] |
No | 輸入第i個等值線集合的數據陣列，各點座標為緯經度，自動以三角網格技術計算等值線，預設[] |
opt.contourSets[i].thresholds |
Array | [] |
No | 輸入第i個等值線集合的門檻值陣列，給予非有效陣列則自動計算各線門檻值，預設[] |
opt.contourSets[i].gradient |
Object | 詳見程式碼 |
No | 輸入第i個等值線集合的色階(color map)設定物件，鍵範圍0至1、值為對應顏色，各鍵之間採內插取色，預設值詳見程式碼 |
opt.contourSets[i].getColor |
function | null |
No | 輸入第i個等值線集合的顏色函數，引數為{ defaultColor, k, n, polygonSet }，預設null |
opt.contourSets[i].lineColor |
String | '' |
No | 輸入第i個等值線集合的框線顏色字串，''則用填充顏色，預設'' |
opt.contourSets[i].lineWidth |
Number | 1 |
No | 輸入第i個等值線集合的框線寬度數字，預設1 |
opt.contourSets[i].fillOpacity |
Number | 0.2 |
No | 輸入第i個等值線集合的填充透明度數字，預設0.2 |
opt.contourSets[i].lineColorHover |
String | 同lineColor |
No | 輸入滑鼠移入時第i個等值線集合的框線顏色字串，預設同lineColor |
opt.contourSets[i].lineWidthHover |
Number | 3 |
No | 輸入滑鼠移入時第i個等值線集合的框線寬度數字，預設3 |
opt.contourSets[i].fillOpacityHover |
Number | 0.5 |
No | 輸入滑鼠移入時第i個等值線集合的填充透明度數字，預設0.5 |
opt.contourSets[i].changeStyleWhenHover |
Boolean | true |
No | 輸入第i個等值線集合是否啟用滑鼠移入切換style效果布林值，預設true |
opt.contourSets[i].legendNumDig |
Number | null |
No | 輸入第i個等值線集合對圖例內數字取的小數位數，null代表不取，預設null |
opt.contourSets[i].legendTextFormater |
function | null |
No | 輸入第i個等值線集合對圖例各色階產生顯示文字的函數，引數為{ low, up, legends, index }，預設null |
opt.contourSets[i].legendTextExtra |
function | null |
No | 輸入第i個等值線集合對圖例各色階附加額外文字的函數，引數為{ k, n, polygonSet }，預設null |
opt.contourSets[i].polygonClipOuter |
Array | null |
No | 輸入第i個等值線集合剔除以外之多邊形(polygon)陣列，預設null |
opt.contourSets[i].polygonsClipInner |
Array | null |
No | 輸入第i個等值線集合剔除以內之複數多邊形(multiPolygon)陣列，預設null |
opt.contourSets[i].polygonsContainInner |
Array | null |
No | 輸入第i個等值線集合保留以內之複數多邊形(multiPolygon)陣列，預設null |
opt.contourSetsClick |
function | function(){} |
No | 輸入全域等值線集合的click呼叫函數，引數為{ ev, lat, lng, latLngs, polygonSet, kpolygonSet, contourSet, kcontourSet, contourSets }，預設function(){} |
opt.imageSets |
Array | [] |
No | 輸入影像集合陣列，各元素為物件，預設[] |
opt.imageSets[i].title |
String | '' |
No | 輸入第i個影像集合的標題字串，預設'' |
opt.imageSets[i].msg |
String | '' |
No | 輸入第i個影像集合的說明字串，預設'' |
opt.imageSets[i].key |
String | null |
No | 輸入第i個影像集合的穩定識別鍵字串，需於陣列內唯一；提供後陣列插入或重排時該組身分不變(未變更組不重載影像)，未給則以陣列索引識別，預設null |
opt.imageSets[i].order |
Number | null |
No | 輸入第i個影像集合的排序用數字，預設null |
opt.imageSets[i].visible |
Boolean | false |
No | 輸入是否顯示第i個影像集合布林值，預設false |
opt.imageSets[i].image |
Object | {} |
No | 輸入第i個影像集合的影像來源物件，含url(影像連結字串)與lngMin/lngMax/latMin/latMax(四至經緯度數字)，預設{}。四至以實際數值判定東西南北(較大緯度即為北邊)，不依欄位命名方向，故latMin填北緯之像素列慣例亦可正確貼合不致上下顛倒 |
opt.imageSets[i].opacity |
Number | 1 |
No | 輸入第i個影像集合的透明度數字，範圍0~1，超出範圍將夾限，預設1 |
- Description:
WMaplibreglVue2 - 使用 MapLibre GL JS 重構的地圖組件（Vue 2） 所有面板透過四角容器 (corner container) 自動堆疊，不重疊。
核心業務邏輯已提取至 src/js/ 模組，此元件僅保留：
- 響應式狀態（data / computed / watch）
- 薄委派方法（調用模組函式 + 同步 Vue 狀態）
- Vue 特定操作（$nextTick / $refs / $forceUpdate）