w-component-vue
Version:
A simple component for vue(vue2).
459 lines (445 loc) • 14.5 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>w-component-vue</title>
<!-- @babel/polyfill -->
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<!-- extractHtml已自動添加@babel/polyfill與vue -->
<!-- vuetify -->
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.js"
></script>
<!-- fontawesome -->
<link
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
rel="stylesheet"
/>
<!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<!-- google, 各組件使用mdi/js故不需引用 -->
<link
_href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
rel="stylesheet"
/>
<link
_href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<!-- data -->
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataAAPL.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataUSD2EUR.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataTemperature.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataHousePriceArea.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataFlare.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRain.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRainClip.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataCivilSoilCodeIcon.js"
></script>
<!-- w-component-vue -->
<script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.27/dist/w-component-vue.umd.js"></script>
<style>
.v-application--wrap {
/* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
width: 100svw;
max-width: 100svw;
font-family: inherit;
background: #fff;
}
/* 組件所須全域樣式 */
.item {
/* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
border-left: 3px solid #ffba75;
margin: 5px 5px 8px 0px;
padding: 3px 3px 5px 10px;
font-size: 0.9rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.head1 {
padding: 0px 0px 20px 0px;
font-size: 2.5rem;
}
.bkh {
/* 寬 */
padding: 20px;
}
@media screen and (max-width: 800px) {
/* 中 */
.bkh {
padding: 10px;
}
}
@media screen and (max-width: 400px) {
/* 窄 */
.bkh {
padding: 5px;
}
}
.bk {
/* 寬 */
display: inline-block;
vertical-align: top;
padding: 0px 80px 60px 0px;
}
@media screen and (max-width: 1000px) {
/* 中窄 */
.bk {
display: block;
padding: 0px 0px 50px 0px;
}
}
.cpitem {
transition: all 0.3s;
padding: 5px 15px;
cursor: pointer;
}
.cpitem-white {
background: #fff;
}
.cpitem-white:hover {
background: #eee;
}
.cpitem-black {
background: #333;
}
.cpitem-black:hover {
background: #555;
}
</style>
</head>
<body
style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
>
<v-app id="app" class="bkh" style="font-family:inherit;">
<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-leaflet-vue-dyn</span>
</div>
<div class="bk" style="display:block;">
<div class="item">polygonSets</div>
<!-- leaflet要給寬度否則無法撐開 -->
<w-leaflet-vue-dyn
style="width:100%; height:600px;"
:opt="WLeafletVueDyn.polygonSets"
>
<template v-slot:polygon-popup="props">
<div style="padding:15px; 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-leaflet-vue-dyn>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
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 {
WLeafletVueDyn: {
pointSets: {
pointSets: [
{
title: "pointSet A",
msg: "msg from pointSet A",
points: [
{
title: "point A-1",
msg: "msg from data A-1",
latLng: [24.2, 121.27]
},
{
title: "point A-2",
msg: "msg from data A-2",
latLng: [23.9, 120.97]
}
],
visible: true
},
{
title: "pointSet B",
msg: "msg from pointSet B",
points: [
{
title: "point B-1",
msg: "msg from data B-1",
latLng: [23.3, 120.57]
},
{
title: "point B-2",
msg: "msg from data B-2",
latLng: [23.0, 120.87]
}
],
visible: false
}
]
},
polygonSets: {
center: [25, 121.58],
zoom: 10,
polygonSets: [
{
title: "polygonSet A",
msg: "msg from polygonSet A",
latLngs: [
//此結構代表1個polygon, leaflet可支援
[
//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.0, 121.5]
],
[
//add p1-1 in c1
[25.017, 121.48],
[25.032, 121.49],
[25.036, 121.5],
[25.02, 121.502]
],
[
//c2 XOR p1
[24.99, 121.54],
[25.056, 121.56],
[25.05, 121.61],
[25.0, 121.59]
],
[
//add p2
[24.92, 121.6],
[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.95, 121.674],
[24.887, 121.606]
]
],
// latLngs: [ //此結構代表1個multiPolygon, leaflet可支援
// [
// [ //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.9, 121.14],
[24.97, 121.09],
[25.05, 121.177],
[24.95, 121.32]
]
],
visible: false
}
]
},
contourSets: {
center: [24.084, 121.068],
zoom: 8,
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],
// [24.311, 121.116, 17], [24.351, 121.399, -4],
[23.193, 120.355, 22],
[23.456, 120.89, 42],
[23.28, 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: 8,
contourSets: [
{
title: "Rain contour",
msg: "data from CWB",
points: ptsContour,
polygonClipOuter: ptsClip,
//放大後瀏覽時移動滑鼠於0-10會比較閃
// changeStyleWhenHover: false, //關閉hover的高亮效果
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,
visible: false,
order: 1,
tooltip: function(v) {
console.log("tooltip v", v);
let c = "";
c += '<div style="padding:5px 10px;">';
c +=
'<div style="width:150px; color:#222; margin-bottom:5px; white-space:nowrap;"><span style="font-size:0.9rem; color:#f26;">[' +
v.point.title +
']</span> <span style="font-size:0.8rem; ">' +
v.point.msg +
"</span></div>";
c +=
'<div style="font-size:0.7rem; color:#666; white-space:normal;">降雨量 ' +
v.point.rain +
" cm</div>";
c += "</div>";
return c;
}
}
]
}
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {}
});
</script>
</body>
</html>