<template>
    <div>

        <div class="bkh">
            <div style="font-size:1.5rem;">geojsonSets</div>
            <a href="//yuda-lyu.github.io/w-leaflet-vue/examples/ex-AppGJNGeojsonSets.html" target="_blank" class="item-link">example</a>
            <a href="//github.com/yuda-lyu/w-leaflet-vue/blob/master/docs/examples/ex-AppGJNGeojsonSets.html" target="_blank" class="item-link">code</a>
        </div>

        <div class="bkp">

            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">

                <div style="position:relative;">
                    <WLeafletVue
                        style="width:800px; height:500px;"
                        :opt="opt"
                    ></WLeafletVue>
                </div>

                <div style="width:600px; min-width:600px; padding:0px 20px;">

                    <div style="border:1px solid #ddd;">
                        <div style="padding-left:5px; overflow-y:auto; height:500px;">
                            <div id="optjson" style="font-size:10pt;"></div>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script>
import WLeafletVue from './components/WLeafletVue.vue'
import jv from 'w-jsonview-tree'

export default {
    components: {
        WLeafletVue,
    },
    data: function() {
        return {
            'opt': {
                center: [24.084, 121.068],
                zoom: 7,
                geojsonSets: [
                    {
                        title: 'geojsonSet A',
                        msg: 'msg from geojsonSet A',
                        geojson: { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(255, 255, 255, 1)', 'weight': 1, 'fillColor': 'rgba(255, 255, 255, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(255, 255, 255, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(255, 255, 255, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[121.247, 23.162], [120.98464705882353, 23.17111764705882], [121.073, 23.191499999999998], [121.19875675675677, 23.20172972972973], [120.9547619047619, 23.519238095238094], [120.80009523809524, 23.66247619047619], [120.68360000000001, 23.5482], [120.58245454545454, 23.484272727272725], [120.5900909090909, 23.810454545454522], [120.786, 24.325], [121.00999999999996, 24.604499999999955], [120.855875, 24.35675], [120.968, 23.944], [121.11566666666667, 23.627000000000002], [121.42166666666667, 23.675666666666665], [121.51575, 23.875], [121.434, 23.612], [121.247, 23.162]]]] } }, { 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(254, 200, 127, 1)', 'weight': 1, 'fillColor': 'rgba(254, 200, 127, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(254, 200, 127, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(254, 200, 127, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[120.98464705882353, 23.17111764705882], [120.355, 23.193], [120.4599411764706, 23.189352941176473], [120.72500000000001, 23.250500000000002], [121.10227027027027, 23.28118918918919], [120.9345238095238, 23.49947619047619], [120.82819047619049, 23.59795238095238], [120.5952, 23.369400000000002], [120.39290909090909, 23.241545454545456], [120.39418181818182, 23.295909090909092], [120.5900909090909, 23.810454545454547], [120.58245454545454, 23.484272727272725], [120.68360000000001, 23.5482], [120.80009523809524, 23.66247619047619], [120.9547619047619, 23.519238095238094], [121.19875675675677, 23.20172972972973], [121.073, 23.191499999999998], [120.98464705882353, 23.17111764705882]]], [[[121.11566666666667, 23.627000000000002], [120.968, 23.944], [120.855875, 24.35675], [121.00999999999999, 24.6045], [121.234, 24.884], [120.92575, 24.3885], [121.02185714285714, 24.034714285714287], [121.1825, 23.8735], [121.25633333333333, 23.715], [121.40933333333334, 23.739333333333335], [121.5975, 24.137999999999998], [121.51575, 23.875], [121.42166666666667, 23.675666666666665], [121.11566666666667, 23.627000000000002]]]] } }, { 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(253, 135, 61, 1)', 'weight': 1, 'fillColor': 'rgba(253, 135, 61, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(253, 135, 61, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(253, 135, 61, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[120.4599411764706, 23.189352941176473], [120.355, 23.193], [120.39418181818182, 23.295909090909092], [120.39290909090909, 23.241545454545456], [120.5952, 23.369400000000002], [120.82819047619049, 23.59795238095238], [120.9345238095238, 23.49947619047619], [121.10227027027027, 23.28118918918919], [120.72500000000001, 23.250500000000002], [120.4599411764706, 23.189352941176473]], [[120.65070588235292, 23.331764705882353], [121.00578378378378, 23.36064864864865], [120.91428571428571, 23.479714285714287], [120.85628571428572, 23.533428571428573], [120.65070588235292, 23.331764705882353]]], [[[121.25633333333333, 23.715], [121.1825, 23.8735], [121.02185714285714, 24.034714285714287], [120.92575, 24.3885], [121.234, 24.884], [121.4975, 24.774], [121.2525, 24.833166666666667], [120.995625, 24.42025], [121.0757142857143, 24.12542857142857], [121.397, 23.803], [121.67925, 24.401], [121.5975, 24.137999999999998], [121.40933333333334, 23.739333333333335], [121.25633333333333, 23.715]]]] } }, { 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(247, 75, 41, 1)', 'weight': 1, 'fillColor': 'rgba(247, 75, 41, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(247, 75, 41, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(247, 75, 41, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[120.65070588235292, 23.331764705882353], [120.85628571428572, 23.533428571428573], [120.91428571428571, 23.479714285714287], [121.00578378378378, 23.36064864864865], [120.65070588235292, 23.331764705882353]], [[120.85011764705882, 23.435294117647057], [120.9092972972973, 23.440108108108106], [120.89404761904761, 23.45995238095238], [120.88438095238095, 23.46890476190476], [120.85011764705882, 23.435294117647057]]], [[[121.397, 23.803], [121.0757142857143, 24.12542857142857], [120.995625, 24.42025], [121.2525, 24.833166666666667], [121.4975, 24.774], [121.761, 24.664], [121.67925, 24.401], [121.397, 23.803]], [[121.761, 24.664], [121.27100000000002, 24.782333333333334], [121.0655, 24.451999999999998], [121.12957142857142, 24.216142857142856], [121.38660000000002, 23.9582], [121.761, 24.664]]]] } }, { 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(225, 61, 39, 1)', 'weight': 1, 'fillColor': 'rgba(225, 61, 39, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(225, 61, 39, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(225, 61, 39, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[120.85011764705882, 23.435294117647057], [120.88438095238095, 23.46890476190476], [120.89404761904761, 23.45995238095238], [120.9092972972973, 23.440108108108106], [120.85011764705882, 23.435294117647057]]], [[[121.38660000000002, 23.9582], [121.12957142857142, 24.216142857142856], [121.0655, 24.451999999999998], [121.27100000000002, 24.782333333333334], [121.761, 24.664], [121.38660000000002, 23.9582]], [[121.37620000000001, 24.113400000000002], [121.65700000000001, 24.64275], [121.2895, 24.7315], [121.13537500000001, 24.48375], [121.18342857142856, 24.30685714285714], [121.37620000000001, 24.113400000000002]]]] } }, { 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(209, 48, 29, 1)', 'weight': 1, 'fillColor': 'rgba(209, 48, 29, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(209, 48, 29, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(209, 48, 29, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[121.37620000000001, 24.113400000000002], [121.18342857142856, 24.30685714285714], [121.13537500000001, 24.48375], [121.2895, 24.7315], [121.65700000000001, 24.64275], [121.37620000000001, 24.113400000000002]], [[121.36580000000001, 24.2686], [121.553, 24.6215], [121.30799999999999, 24.680666666666667], [121.20524999999999, 24.5155], [121.23728571428572, 24.39757142857143], [121.36580000000001, 24.2686]]]] } }, { 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(194, 37, 34, 1)', 'weight': 1, 'fillColor': 'rgba(194, 37, 34, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(194, 37, 34, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(194, 37, 34, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[121.36580000000001, 24.2686], [121.23728571428572, 24.39757142857143], [121.20524999999999, 24.5155], [121.30799999999999, 24.680666666666667], [121.553, 24.6215], [121.36580000000001, 24.2686]], [[121.3554, 24.423800000000004], [121.44899999999998, 24.60025], [121.3265, 24.629833333333334], [121.275125, 24.54725], [121.29114285714286, 24.488285714285716], [121.3554, 24.423800000000004]]]] } }, { 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(180, 30, 60, 1)', 'weight': 1, 'fillColor': 'rgba(180, 30, 60, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(180, 30, 60, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(180, 30, 60, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[121.29114285714286, 24.488285714285716], [121.3554, 24.423800000000004], [121.44899999999998, 24.60025], [121.3265, 24.629833333333334], [121.275125, 24.54725], [121.29114285714286, 24.488285714285716]]]] } }] },
                        keyStyle: 'properties.style',
                        visible: true,
                    },
                    {
                        title: 'geojsonSet B',
                        msg: 'msg from geojsonSet B',
                        geojson: { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'properties': { 'style': { 'color': 'rgba(255, 255, 255, 1)', 'weight': 1, 'fillColor': 'rgba(50, 100, 255, 1)', 'fillOpacity': 0.2, 'stroke': 'rgba(255, 255, 255, 1)', 'stroke-width': 1, 'stroke-opacity': 1, 'fill': 'rgba(255, 255, 255, 1)', 'fill-opacity': 0.2 } }, 'geometry': { 'type': 'MultiPolygon', 'coordinates': [[[[121.372, 24.971], [121.434, 24.976], [121.473, 24.937], [121.418, 24.918]], [[121.14, 24.90], [121.09, 24.97], [121.177, 25.05], [121.32, 24.95]]]] } }] },
                        keyStyle: 'properties.style',
                        visible: false,
                    },
                ],
            },
            'action': [
            ],
        }
    },
    mounted: function() {
        let vo = this
        vo.showOptJson()
    },
    watch: {
        opt: {
            handler: function() {
                let vo = this
                vo.showOptJson()
            },
            deep: true,
        },
    },
    methods: {
        showOptJson: function() {
            let vo = this
            jv(vo.opt, document.querySelector('#optjson'), { expanded: true })
        },
    },
}
</script>

<style>
</style>
