w-component-vue 2.4.87 → 2.5.0

package/src/AppZoneWMaplibreglVueDyn.vue

@@ -0,0 +1,443 @@
+<template>
+    <div class="bkh">
+
+
+        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-maplibregl-vue-dyn</span></div>
+
+
+        <div style="font-size:0.9rem; margin-bottom:10px;">
+            <span style="margin-right:10px;">Links:</span>
+            <a href="//maplibre.org/" target="_blank" rel="noreferrer noopener">maplibre</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//maplibre.org/maplibre-gl-js/docs/examples/" target="_blank" rel="noreferrer noopener">maplibre examples</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//github.com/yuda-lyu/w-maplibregl-vue" target="_blank" rel="noreferrer noopener">w-maplibregl-vue</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//yuda-lyu.github.io/w-maplibregl-vue/examples/app.html" target="_blank" rel="noreferrer noopener">w-maplibregl-vue examples</a>
+        </div>
+
+
+        <div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-maplibregl-vue-dyn'"
+                    :casename="'pointSets'"
+                ></demolink>
+
+                <!-- maplibregl要給寬高否則無法撐開 -->
+                <w-maplibregl-vue-dyn
+                    style="width:100%; height:600px;"
+                    :opt="WMaplibreglVueDyn.pointSets"
+                >
+
+                    <template v-slot:point-popup="props">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
+                            <div style="padding-bottom:8px;">
+                                <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
+                            </div>
+                            <div style="padding-bottom:5px;">
+                                <div style="font-size:0.80rem; color:#aa2df4;">[PointSet: {{ props.pointSet.title }}]</div>
+                                <div style="font-size:0.70rem; color:#777;">{{ props.pointSet.msg }}</div>
+                            </div>
+                            <div style="">
+                                <div style="font-size:0.70rem;color:#4347de;">[Point: {{ props.point.title }}]</div>
+                                <div style="font-size:0.70rem;color:#777;">{{ props.point.msg }}</div>
+                            </div>
+                        </div>
+                    </template>
+
+                </w-maplibregl-vue-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-maplibregl-vue-dyn'"
+                    :casename="'polylineSets'"
+                ></demolink>
+
+                <!-- maplibregl要給寬高否則無法撐開 -->
+                <w-maplibregl-vue-dyn
+                    style="width:100%; height:600px;"
+                    :opt="WMaplibreglVueDyn.polylineSets"
+                >
+
+                    <template v-slot:polyline-popup="props">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
+                            <div style="padding-bottom:8px;">
+                                <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
+                            </div>
+                            <div style="padding-bottom:5px;">
+                                <div style="font-size:0.80rem; color:#aa2df4;">[PolylineSet: {{ props.polylineSet.title }}]</div>
+                                <div style="font-size:0.70rem; color:#777;">{{ props.polylineSet.msg }}</div>
+                            </div>
+                        </div>
+                    </template>
+
+                </w-maplibregl-vue-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-maplibregl-vue-dyn'"
+                    :casename="'polygonSets'"
+                ></demolink>
+
+                <!-- maplibregl要給寬高否則無法撐開 -->
+                <w-maplibregl-vue-dyn
+                    style="width:100%; height:600px;"
+                    :opt="WMaplibreglVueDyn.polygonSets"
+                >
+
+                    <template v-slot:polygon-popup="props">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
+                            <div style="padding-bottom:8px;">
+                                <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
+                            </div>
+                            <div style="padding-bottom:5px;">
+                                <div style="font-size:0.80rem; color:#aa2df4;">[PolygonSet: {{ props.polygonSet.title }}]</div>
+                                <div style="font-size:0.70rem; color:#777;">{{ props.polygonSet.msg }}</div>
+                            </div>
+                        </div>
+                    </template>
+
+                </w-maplibregl-vue-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-maplibregl-vue-dyn'"
+                    :casename="'contourSets'"
+                ></demolink>
+
+                <!-- maplibregl要給寬高否則無法撐開 -->
+                <w-maplibregl-vue-dyn
+                    style="width:100%; height:600px;"
+                    :opt="WMaplibreglVueDyn.contourSets"
+                >
+
+                    <template v-slot:contour-popup="props">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
+                            <div style="padding-bottom:8px;">
+                                <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
+                            </div>
+                            <div style="padding-bottom:5px;">
+                                <div style="font-size:0.80rem; color:#aa2df4;">[ContourSet: {{ props.contourSet.title }}]</div>
+                                <div style="font-size:0.70rem; color:#777;">{{ props.contourSet.msg }}</div>
+                            </div>
+                        </div>
+                    </template>
+
+                </w-maplibregl-vue-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-maplibregl-vue-dyn'"
+                    :casename="'contourSet for rain data'"
+                ></demolink>
+
+                <!-- maplibregl要給寬高否則無法撐開 -->
+                <w-maplibregl-vue-dyn
+                    style="width:100%; height:600px;"
+                    :opt="WMaplibreglVueDyn.largeSet"
+                >
+
+                    <template v-slot:contour-popup="props">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
+                            <div style="padding-bottom:8px;">
+                                <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
+                            </div>
+                            <div style="padding-bottom:5px;">
+                                <div style="font-size:0.80rem; color:#aa2df4;">[ContourSet: {{ props.contourSet.title }}]</div>
+                                <div style="font-size:0.70rem; color:#777;">{{ props.contourSet.msg }}</div>
+                            </div>
+                        </div>
+                    </template>
+
+                    <template v-slot:point-tooltip="props">
+                        <div style="padding:5px 10px;">
+                            <div style="width:150px; color:#222; margin-bottom:5px; white-space:nowrap;">
+                                <span style="font-size:0.9rem; color:#f26;">[{{ props.point.title }}]</span>
+                                <span style="font-size:0.8rem;">{{ props.point.msg }}</span>
+                            </div>
+                            <div style="font-size:0.7rem; color:#666; white-space:normal;">降雨量 {{ props.point.rain }} cm</div>
+                        </div>
+                    </template>
+
+                </w-maplibregl-vue-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-maplibregl-vue-dyn'"
+                    :casename="'clusterPoints'"
+                ></demolink>
+
+                <!-- maplibregl要給寬高否則無法撐開 -->
+                <w-maplibregl-vue-dyn
+                    style="width:100%; height:600px;"
+                    :opt="WMaplibreglVueDyn.clusterPoints"
+                >
+
+                    <template v-slot:point-popup="props">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
+                            <div style="padding-bottom:8px;">
+                                <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
+                            </div>
+                            <div style="padding-bottom:5px;">
+                                <div style="font-size:0.80rem; color:#aa2df4;">[PointSet: {{ props.pointSet.title }}]</div>
+                                <div style="font-size:0.70rem; color:#777;">{{ props.pointSet.msg }}</div>
+                            </div>
+                            <div style="">
+                                <div style="font-size:0.70rem;color:#4347de;">[Point: {{ props.point.title }}]</div>
+                                <div style="font-size:0.70rem;color:#777;">{{ props.point.msg }}</div>
+                            </div>
+                        </div>
+                    </template>
+
+                </w-maplibregl-vue-dyn>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WMaplibreglVueDyn from './components/WMaplibreglVueDyn.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WMaplibreglVueDyn,
+    },
+    props: {
+    },
+    data: function() {
+        let ptsStation = window.dataRain
+        let ptsContour = []
+        for (let i = 0; i < ptsStation.length; i++) {
+            let v = ptsStation[i]
+            ptsContour.push([v.latLng[0], v.latLng[1], v.rain])
+        }
+        let ptsClip = window.dataRainClip
+        return {
+            'WMaplibreglVueDyn': {
+                'pointSets': {
+                    pointSets: [
+                        {
+                            title: 'pointSet A(circle)',
+                            msg: 'msg from pointSet A',
+                            points: [
+                                {
+                                    title: 'point A-1',
+                                    msg: 'msg from data A-1',
+                                    latLng: [24.20, 121.27],
+                                },
+                                {
+                                    title: 'point A-2',
+                                    msg: 'msg from data A-2',
+                                    latLng: [23.90, 120.97],
+                                },
+                            ],
+                            visible: true,
+                        },
+                        {
+                            title: 'pointSet B(icon)',
+                            msg: 'msg from pointSet B',
+                            type: 'icon',
+                            points: [
+                                {
+                                    title: 'point B-1',
+                                    msg: 'msg from data B-1',
+                                    latLng: [23.30, 120.57],
+                                },
+                                {
+                                    title: 'point B-2',
+                                    msg: 'msg from data B-2',
+                                    latLng: [23.00, 120.87],
+                                },
+                            ],
+                            visible: true,
+                        },
+                    ],
+                },
+                'polylineSets': {
+                    center: [25, 121.58],
+                    zoom: 9,
+                    polylineSets: [
+                        {
+                            title: 'polylineSet A',
+                            msg: 'msg from polylineSet A',
+                            latLngs: [ //此結構代表1個multiPolyline
+                                [ //add p1
+                                    [24.96, 121.41], [25.11, 121.47], [25.06, 121.69], [24.99, 121.61], [24.95, 121.53], [24.96, 121.41]
+                                ],
+                                [ //add p2
+                                    [24.92, 121.60], [25.045, 121.75], [24.99, 121.79], [24.93, 121.74], [24.92, 121.60]
+                                ],
+                            ],
+                            visible: true,
+                        },
+                        {
+                            title: 'polylineSet B',
+                            msg: 'msg from polylineSet B',
+                            lineColor: 'rgba(255,100,0,1)',
+                            latLngs: [
+                                [ //add p3
+                                    [24.971, 121.372], [24.976, 121.434], [24.937, 121.473], [24.918, 121.418], [24.971, 121.372]
+                                ],
+                                [ //add p4
+                                    [24.90, 121.14], [24.97, 121.09], [25.05, 121.177], [24.95, 121.32], [24.90, 121.14]
+                                ],
+                            ],
+                            visible: false,
+                        },
+                    ],
+                },
+                'polygonSets': {
+                    center: [25, 121.58],
+                    zoom: 10,
+                    polygonSets: [
+                        {
+                            title: 'polygonSet A',
+                            msg: 'msg from polygonSet A',
+                            latLngs: [ //此結構代表1個polygon, 各環間為XOR套疊可表示挖洞
+                                [ //add p1
+                                    [24.96, 121.41], [25.11, 121.47], [25.06, 121.69], [24.99, 121.61], [24.95, 121.53]
+                                ],
+                                [ //c1 XOR p1
+                                    [24.98, 121.45], [25.07, 121.49], [25.06, 121.54], [25.00, 121.50]
+                                ],
+                                [ //add p1-1 in c1
+                                    [25.017, 121.48], [25.032, 121.49], [25.036, 121.50], [25.02, 121.502]
+                                ],
+                                [ //c2 XOR p1
+                                    [24.99, 121.54], [25.056, 121.56], [25.05, 121.61], [25.00, 121.59]
+                                ],
+                                [ //add p2
+                                    [24.92, 121.60], [25.045, 121.75], [24.99, 121.79], [24.93, 121.74],
+                                ],
+                                [ //c3 XOR p1, p2
+                                    [24.961, 121.523], [24.979, 121.551], [24.950, 121.674], [24.887, 121.606],
+                                ],
+                            ],
+                            visible: true,
+                        },
+                        {
+                            title: 'polygonSet B',
+                            msg: 'msg from polygonSet B',
+                            latLngs: [
+                                [ //add p3
+                                    [24.971, 121.372], [24.976, 121.434], [24.937, 121.473], [24.918, 121.418]
+                                ],
+                                [ //add p4
+                                    [24.90, 121.14], [24.97, 121.09], [25.05, 121.177], [24.95, 121.32]
+                                ],
+                            ],
+                            visible: false,
+                        },
+                    ],
+                },
+                'contourSets': {
+                    center: [24.084, 121.068],
+                    zoom: 7,
+                    contourSets: [
+                        {
+                            title: 'contourSet A',
+                            msg: 'msg from contourSet A',
+                            points: [
+                                [24.325, 120.786, 0], [23.944, 120.968, 10], [24.884, 121.234, 20], [24.579, 121.345, 80], [24.664, 121.761, 40], [23.803, 121.397, 30],
+                                [23.727, 120.772, 0], [23.539, 120.975, 0], [23.612, 121.434, 0],
+                                [23.193, 120.355, 22], [23.456, 120.890, 42], [23.280, 120.551, 25], [23.162, 121.247, 5],
+                            ],
+                            visible: true,
+                        },
+                        {
+                            title: 'contourSet B',
+                            msg: 'msg from contourSet B',
+                            points: [
+                                [22.607, 120.416, 0], [22.967, 120.663, 15], [22.592, 120.922, 20], [22.717, 120.644, 45],
+                            ],
+                            visible: false,
+                        },
+                    ],
+                },
+                'largeSet': {
+                    center: [24.084, 121.068],
+                    zoom: 7,
+                    contourSets: [
+                        {
+                            title: 'Rain contour',
+                            msg: 'data from CWB',
+                            points: ptsContour,
+                            polygonClipOuter: ptsClip,
+                            gradient: {
+                                0: 'rgba(255, 255, 255, 0)', //將0-10區間改為全透明
+                                0.2: 'rgb(254, 178, 76)',
+                                0.4: 'rgb(252, 78, 42)',
+                                0.6: 'rgb(220, 58, 38)',
+                                0.8: 'rgb(200, 40, 23)',
+                                1: 'rgb(180, 30, 60)'
+                            },
+                            visible: true,
+                            order: 0,
+                        },
+                    ],
+                    pointSets: [
+                        {
+                            title: 'Rain point',
+                            msg: 'data from CWB',
+                            points: ptsStation,
+                            size: 5,
+                            visible: false,
+                            order: 1,
+                        },
+                    ],
+                },
+                'clusterPoints': {
+                    center: [24.084, 121.068],
+                    zoom: 7,
+                    clusterPoints: true,
+                    clusterPointsRadius: 50, //叢集化: 叢集半徑, 單位px
+                    clusterPointsMaxZoom: 14, //叢集化: 此zoom以上不叢集
+                    clusterPointsLevelNum: 3, //叢集化: 分幾種區間
+                    clusterPointsLevelValues: [10, 100], //叢集化: 區間分隔數值, 長度為levelNum-1
+                    clusterPointsLevelRadius: [10, 15, 20], //叢集化: 各level叢集圓圈大小
+                    pointSets: [
+                        {
+                            title: 'Rain point',
+                            msg: 'data from CWB',
+                            points: ptsStation,
+                            size: 5,
+                            visible: true,
+                        },
+                    ],
+                },
+            },
+            'actions': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WComponentVue.vue

@@ -54,6 +54,7 @@ import WListHorizontal from './WListHorizontal.vue'
 import WListItem from './WListItem.vue'
 import WListRadio from './WListRadio.vue'
 import WListVertical from './WListVertical.vue'
+import WMaplibreglVueDyn from './WMaplibreglVueDyn.vue'
 import WPanelAvatar from './WPanelAvatar.vue'
 import WPanelBulge from './WPanelBulge.vue'
 import WPanelDivideHorizontal from './WPanelDivideHorizontal.vue'
@@ -159,6 +160,7 @@ let WComponentVue = {
         Vue.component('w-list-item', WListItem)
         Vue.component('w-list-radio', WListRadio)
         Vue.component('w-list-vertical', WListVertical)
+        Vue.component('w-maplibregl-vue-dyn', WMaplibreglVueDyn)
         Vue.component('w-panel-avatar', WPanelAvatar)
         Vue.component('w-panel-bulge', WPanelBulge)
         Vue.component('w-panel-divide-horizontal', WPanelDivideHorizontal)

package/src/components/WEchartsVueDyn.vue

@@ -1,84 +1,125 @@
-<template>
-    <!-- ref=$self為供外部存取組件之用 -->
-    <component ref="$self" :is="cmpName" :options="options" autoresize></component>
-</template>
-
-<script>
-import importResExt from '../js/importResExt.mjs'
-import getVue from '../js/getVue.mjs'
-import WIconLoading from './WIconLoading.vue'
-// import VueCompositionAPI from '@vue/composition-api'
-
-
-/**
- * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入echarts與vue-echarts組件js檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
- * @vue-prop {Object} [options={}] 輸入echarts設定物件，預設{}
- */
-//export default {
-export default {
-    components: {
-        WIconLoading,
-    },
-    props: {
-        pathItems: {
-            type: Array,
-            default: () => [
-
-                'https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js',
-                'https://cdn.jsdelivr.net/npm/echarts@5.6.0/i18n/langEN.js',
-                'https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js',
-                'https://cdn.jsdelivr.net/npm/vue-echarts@4.1.0/dist/vue-echarts.min.js', //只能用4.1.0版, 沒有5版, 從6版之後就依賴composition-api
-
-            ],
-        },
-        options: {
-            type: Object,
-            default: () => {},
-        },
-    },
-    data: function() {
-        return {
-            cmpName: 'WIconLoading',
-        }
-    },
-    mounted: function() {
-        //console.log('mounted')
-
-        let vo = this
-
-        //importResExt
-        importResExt(vo.pathItems)
-            .then((res) => {
-                //console.log('res', res)
-                if (res !== 'loaded') {
-
-                    //注意: importResExt得要先能讓Vue註冊VueCompositionAPI, 才能再import vue-echarts 6版, 否則6版內使用defineComponent會直接報錯
-                    // //cmpAPI
-                    // let cmpAPI = window['VueCompositionAPI']
-                    // console.log('cmpAPI', cmpAPI)
-                    // //use
-                    // getVue().use(cmpAPI)
-
-                    //cmp
-                    let cmp = window['VueECharts']
-                    if (cmp.default) {
-                        cmp = cmp.default
-                    }
-
-                    //use
-                    getVue().component('v-chart', cmp)
-
-                }
-                vo.cmpName = 'v-chart'
-            })
-
-    },
-    computed: {
-    },
-    methods: {
-    },
-}
-</script>
-
-<style scoped>
-</style>
+<template>
+    <!-- ref=$self為供外部存取組件之用 -->
+    <component
+        ref="$self"
+        :is="cmpName"
+        :options="options"
+        :theme="theme"
+        :initOptions="initOptions"
+        :updateOptions="updateOptions"
+        :group="group"
+        :manualUpdate="manualUpdate"
+        :loading="loading"
+        :loadingOptions="loadingOptions"
+        :autoresize="autoresize"
+        v-on="$listeners"
+    ></component>
+</template>
+
+<script>
+import importResExt from '../js/importResExt.mjs'
+import getVue from '../js/getVue.mjs'
+import WIconLoading from './WIconLoading.vue'
+
+
+/**
+ * @vue-prop {Array} [pathItems=['base:w-echarts-vue']] 輸入w-echarts-vue組件js檔案位置字串陣列，echarts全量圖表與組件、echarts-gl之3D圖表皆已打包於w-echarts-vue內故無須另行載入，預設['base:w-echarts-vue']
+ * @vue-prop {Object} [options={}] 輸入echarts設定物件，即echarts之option，預設{}。變更時自動重繪：給予新物件(參照改變)採整體置換(notMerge)，原物件內變更(mutation)採合併更新
+ * @vue-prop {String|Object} [theme=''] 輸入echarts主題字串或主題設定物件，字串為已使用echarts.registerTheme註冊之主題名稱，變更時會自動銷毀重建圖表，預設''
+ * @vue-prop {Object} [initOptions={}] 輸入echarts初始化設定物件，即echarts.init之opts，可設定renderer('canvas'或'svg')、locale、devicePixelRatio等，變更時會自動銷毀重建圖表，預設{}
+ * @vue-prop {Object} [updateOptions={}] 輸入echarts更新設定物件，即echarts之setOption之opts，可設定notMerge、replaceMerge、lazyUpdate等，預設{}
+ * @vue-prop {String} [group=''] 輸入圖表群組名稱字串，供echarts.connect跨圖表連動使用，預設''
+ * @vue-prop {Boolean} [manualUpdate=false] 輸入是否關閉options之深度監聽布林值，若為true則變更options不會自動重繪，須自行取得實例呼叫setOption更新，適用於資料量龐大時，預設false
+ * @vue-prop {Boolean} [loading=false] 輸入是否顯示讀取中動畫布林值，預設false
+ * @vue-prop {Object} [loadingOptions={}] 輸入讀取中動畫設定物件，即echarts之showLoading之opts，可設定text、color、maskColor等，預設{}
+ * @vue-prop {Boolean|Object} [autoresize=true] 輸入是否於容器尺寸改變時自動重繪布林值，亦可給物件設定{throttle,onResize}，throttle為節流毫秒數預設100，預設true
+ * @vue-event {Object} * 對外轉發echarts之全部事件，例如click、mouseover、legendselectchanged、datazoom、finished等，回傳事件參數物件；zrender事件以zr:前綴綁定，例如@zr:click
+ */
+//export default {
+export default {
+    components: {
+        WIconLoading,
+    },
+    props: {
+        pathItems: {
+            type: Array,
+            default: () => [
+                'base:w-echarts-vue',
+            ],
+        },
+        options: {
+            type: Object,
+            default: () => {},
+        },
+        theme: {
+            type: [String, Object],
+            default: () => '',
+        },
+        initOptions: {
+            type: Object,
+            default: () => {},
+        },
+        updateOptions: {
+            type: Object,
+            default: () => {},
+        },
+        group: {
+            type: String,
+            default: () => '',
+        },
+        manualUpdate: {
+            type: Boolean,
+            default: () => false,
+        },
+        loading: {
+            type: Boolean,
+            default: () => false,
+        },
+        loadingOptions: {
+            type: Object,
+            default: () => {},
+        },
+        autoresize: {
+            type: [Boolean, Object],
+            default: () => true,
+        },
+    },
+    data: function() {
+        return {
+            cmpName: 'WIconLoading',
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //importResExt
+        importResExt(vo.pathItems)
+            .then((res) => {
+                //console.log('res', res)
+                if (res !== 'loaded') {
+
+                    //cmp
+                    let cmp = window['w-echarts-vue']
+                    if (cmp.default) {
+                        cmp = cmp.default
+                    }
+
+                    //use
+                    getVue().component('w-echarts-vue', cmp)
+
+                }
+                vo.cmpName = 'w-echarts-vue'
+            })
+
+    },
+    computed: {
+    },
+    methods: {
+    },
+}
+</script>
+
+<style scoped>
+</style>