4.8

package.json

@@ -20,6 +20,7 @@
     "@vue/cli-service": "~4.5.0",
     "ol": "^6.5.0",
     "parcel-bundler": "^1.12.4",
+    "vue-color": "^2.8.1",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

src/components/LineStyle.vue

+<template>
+<div style="Width:100%;height:100%">
+    <a-popover trigger="click" placement="leftTop">
+        <div class="style-setting">
+            <span class="label">线颜色</span>
+            <div class="value">
+                <div class="color-block">
+                <div class="color-block-inner" :style="{backgroundColor: colorfill.msg}"></div>
+                </div>
+            </div>
+        </div>
+        <template slot="content">
+            <simple-color :cfg="colorfill" @getColorfill="handleChange"></simple-color>
+        </template>
+  </a-popover>
+  <size-input label="线宽" :cfg="layerstroke" :size="layerstroke.msg"  :min="0" :max="5" :step="0.1" @getNumInput="InputChange"></size-input>
+</div>
+</template>
+
+<script>
+import SimpleColor from './colorpage/SimpleColor';
+import SizeInput from './colorpage/SizeInput'
+export default {
+    data() {
+        return {
+            visible: false,
+            colorfill:{
+                type:'stroke',
+                msg:'rgb(0,175,255)'
+            },
+            layerstroke:{
+                type:'stroke-width',
+                msg:0,
+            }
+        }
+    },
+    components: {
+        SimpleColor,
+        SizeInput
+    },
+    methods: {
+        hide() {
+            this.visible = false;
+        },
+        handleChange(item){
+            if(item.type === 'stroke'){
+                this.colorfill.msg = item.msg
+            }
+            this.$emit('styleLayer', item);
+        },
+        InputChange(item){
+            if(item.type === 'stroke-width'){
+                this.layerstroke.msg = item.msg
+            }
+            this.$emit('styleLayer', item);
+        }
+    },
+}
+</script>
+
+<style>
+  .label {
+    width: 60px;
+    font-size: 12px;
+    margin-right: 12px;
+    margin-left: 6px;
+    padding-top: 5px;
+  }
+  .sketch-wrapper {
+    position: absolute;
+    top: 0;
+    right: -100%;
+    background-color: #fff;
+    padding: 0 10px 5px;
+    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
+  }
+  .style-setting{
+    display: flex;
+    margin-bottom: 20px;
+  }
+.value {
+    display: flex;
+    flex: 1;
+    padding-left: 10px;
+    height: 26px;
+    line-height: 26px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    box-sizing: border-box;
+    border: 1px solid #dddddd;
+    cursor: pointer;
+}
+ .color-block {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.color-block-inner {
+    width: 100%;
+    height: 8px;
+    margin-top: 8px;
+
+    border-radius: 10px;
+    background-color: firebrick;
+}
+</style>
\ No newline at end of file

src/components/MarkStyle.vue

+<template>
+<div style="Width:100%;height:100%">
+    <a-popover trigger="click" placement="leftTop">
+        <div class="style-setting">
+            <span class="label">点填充颜色</span>
+            <div class="value">
+                <div class="color-block">
+                <div class="color-block-inner" :style="{backgroundColor: colorfill.msg}"></div>
+                </div>
+            </div>
+        </div>
+        <template slot="content">
+            <simple-color :cfg="colorfill" @getColorfill="handleChange"></simple-color>
+        </template>
+  </a-popover>
+  <a-popover trigger="click" placement="leftTop">
+        <div class="style-setting">
+            <span class="label">点边框颜色</span>
+            <div class="value">
+                <div class="color-block">
+                <div class="color-block-inner" :style="{backgroundColor: colorstroke.msg}"></div>
+                </div>
+            </div>
+        </div>
+        <template slot="content">
+            <simple-color :cfg="colorstroke" @getColorfill="handleChange"></simple-color>
+        </template>
+  </a-popover>
+  <size-input label="点线宽" :cfg="layerstroke" :size="layerstroke.msg"  :min="0" :max="5" :step="0.1" @getNumInput="InputChange"></size-input>
+  <size-input label="点半径" :cfg="layerradius" :size="layerradius.msg"  :min="0" :max="5" :step="0.1" @getNumInput="InputChange"></size-input>
+</div>
+</template>
+
+<script>
+import SimpleColor from './colorpage/SimpleColor';
+import SizeInput from './colorpage/SizeInput'
+export default {
+    data() {
+        return {
+            subObj:{},
+            visible: false,
+            colorfill:{
+                type:'fill',
+                msg:'rgb(0,175,255)'
+            },
+            colorstroke:{
+                type:'stroke',
+                msg:'rgb(0,175,255)'
+            },
+            layerstroke:{
+                type:'stroke-width',
+                msg:0,
+            },
+            layerradius:{
+                type:'radius',
+                msg:0.3
+            }
+        }
+    },
+    components: {
+        SimpleColor,
+        SizeInput
+    },
+    methods: {
+        hide() {
+            this.visible = false;
+        },
+        handleChange(item){
+            
+            if(item.type === 'fill'){
+                this.colorfill.msg = item.msg
+            }else{
+                this.colorstroke.msg = item.msg
+            }
+            let obj = {[item.type]:item.msg}
+            Object.assign(this.subObj,obj)
+            this.$emit('styleLayer', this.subObj);
+        },
+        InputChange(item){
+            if(item.type === 'stroke-width'){
+                this.layerstroke.msg = item.msg
+            }else{
+                this.layerradius.msg = item.msg
+            }
+            let obj = {[item.type]:item.msg}
+            Object.assign(this.subObj,obj)
+            this.$emit('styleLayer', this.subObj);
+        }
+    },
+}
+</script>
+
+<style>
+  .label {
+    width: 60px;
+    font-size: 12px;
+    margin-right: 12px;
+    margin-left: 6px;
+    padding-top: 5px;
+  }
+  .sketch-wrapper {
+    position: absolute;
+    top: 0;
+    right: -100%;
+    background-color: #fff;
+    padding: 0 10px 5px;
+    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
+  }
+  .style-setting{
+    display: flex;
+    margin-bottom: 20px;
+  }
+.value {
+    display: flex;
+    flex: 1;
+    padding-left: 10px;
+    height: 26px;
+    line-height: 26px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    box-sizing: border-box;
+    border: 1px solid #dddddd;
+    cursor: pointer;
+}
+ .color-block {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.color-block-inner {
+    width: 100%;
+    height: 8px;
+    margin-top: 8px;
+
+    border-radius: 10px;
+    background-color: firebrick;
+}
+</style>
\ No newline at end of file

src/components/PolygonStyle.vue

+<template>
+<div style="Width:100%;height:100%">
+    <a-popover trigger="click" placement="leftTop">
+        <div class="style-setting">
+            <span class="label">面填充颜色</span>
+            <div class="value">
+                <div class="color-block">
+                <div class="color-block-inner" :style="{backgroundColor: colorfill.msg}"></div>
+                </div>
+            </div>
+        </div>
+        <template slot="content">
+            <simple-color :cfg="colorfill" @getColorfill="handleChange"></simple-color>
+        </template>
+  </a-popover>
+</div>
+</template>
+
+<script>
+import SimpleColor from './colorpage/SimpleColor';
+import SizeInput from './colorpage/SizeInput'
+export default {
+    data() {
+        return {
+            subObj:{},
+            visible: false,
+            colorfill:{
+                type:'fill',
+                msg:'rgb(0,175,255)'
+            }
+        }
+    },
+    components: {
+        SimpleColor,
+        SizeInput
+    },
+    methods: {
+        hide() {
+            this.visible = false;
+        },
+        handleChange(item){
+            if(item.type === 'fill'){
+                this.colorfill.msg = item.msg
+            }else{
+                this.colorstroke.msg = item.msg
+            }
+            let obj = {[item.type]:item.msg}
+            Object.assign(this.subObj,obj)
+            this.$emit('styleLayer', this.subObj);
+        },
+        InputChange(item){
+            if(item.type === 'stroke-width'){
+                this.layerstroke.msg = item.msg
+            }else{
+                this.layerradius.msg = item.msg
+            }
+            let obj = {[item.type]:item.msg}
+            Object.assign(this.subObj,obj)
+            this.$emit('styleLayer', this.subObj);
+        }
+    },
+}
+</script>
+
+<style>
+  .label {
+    width: 60px;
+    font-size: 12px;
+    margin-right: 12px;
+    margin-left: 6px;
+    padding-top: 5px;
+  }
+  .sketch-wrapper {
+    position: absolute;
+    top: 0;
+    right: -100%;
+    background-color: #fff;
+    padding: 0 10px 5px;
+    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
+  }
+  .style-setting{
+    display: flex;
+    margin-bottom: 20px;
+  }
+.value {
+    display: flex;
+    flex: 1;
+    padding-left: 10px;
+    height: 26px;
+    line-height: 26px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    box-sizing: border-box;
+    border: 1px solid #dddddd;
+    cursor: pointer;
+}
+ .color-block {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.color-block-inner {
+    width: 100%;
+    height: 8px;
+    margin-top: 8px;
+
+    border-radius: 10px;
+    background-color: firebrick;
+}
+</style>
\ No newline at end of file

src/components/TextStyle.vue

+<template>
+<div style="Width:100%;height:100%">
+    <a-popover trigger="click" placement="leftTop">
+        <div class="style-setting">
+            <span class="label">注记颜色</span>
+            <div class="value">
+                <div class="color-block">
+                <div class="color-block-inner" :style="{backgroundColor: colorfill.msg}"></div>
+                </div>
+            </div>
+        </div>
+        <template slot="content">
+            <simple-color :cfg="colorfill" @getColorfill="handleChange"></simple-color>
+        </template>
+  </a-popover>
+  <size-input label="注记大小" :cfg="layerstroke" :size="layerstroke.msg"  :min="0" :max="5" :step="0.1" @getNumInput="InputChange"></size-input>
+ 
+</div>
+</template>
+
+<script>
+import SimpleColor from './colorpage/SimpleColor';
+import SizeInput from './colorpage/SizeInput'
+export default {
+    data() {
+        return {
+            visible: false,
+            colorfill:{
+                type:'fill',
+                msg:'rgb(0,175,255)'
+            },
+            layerstroke:{
+                type:'size',
+                msg:"0",
+            }
+        }
+    },
+    components: {
+        SimpleColor,
+        SizeInput
+    },
+    methods: {
+        hide() {
+            this.visible = false;
+        },
+        handleChange(item){
+            if(item.type === 'fill'){
+                this.colorfill.msg = item.msg
+            }else{
+                this.colorstroke.msg = item.msg
+            }
+            this.$emit('styleLayer', item);
+        },
+        InputChange(item){
+            if(item.type === 'stroke-width'){
+                this.layerstroke.msg = item.msg
+            }else{
+                this.layerradius.msg = item.msg
+            }
+            this.$emit('styleLayer', item);
+        }
+    },
+}
+</script>
+
+<style>
+  .label {
+    width: 60px;
+    font-size: 12px;
+    margin-right: 12px;
+    margin-left: 6px;
+    padding-top: 5px;
+  }
+  .sketch-wrapper {
+    position: absolute;
+    top: 0;
+    right: -100%;
+    background-color: #fff;
+    padding: 0 10px 5px;
+    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
+  }
+  .style-setting{
+    display: flex;
+    margin-bottom: 20px;
+  }
+.value {
+    display: flex;
+    flex: 1;
+    padding-left: 10px;
+    height: 26px;
+    line-height: 26px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    box-sizing: border-box;
+    border: 1px solid #dddddd;
+    cursor: pointer;
+}
+ .color-block {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.color-block-inner {
+    width: 100%;
+    height: 8px;
+    margin-top: 8px;
+
+    border-radius: 10px;
+    background-color: firebrick;
+}
+</style>
\ No newline at end of file

src/components/colorpage/SimpleColor.vue

+<template>
+  <!-- 颜色面板 -->
+  <div class="simple-color-wrapper">
+    <sketch-picker :value="cfg.msg"  @input="handleChange"></sketch-picker>
+  </div>
+</template>
+
+<script>
+import { Sketch } from 'vue-color'
+
+export default {
+  components: {
+    'sketch-picker': Sketch
+  },
+  props: {
+    cfg:{
+        default:() => {
+            return ''
+        }
+    }
+  },
+  methods: {
+    handleChange(info){
+        if('a' in info.rgba){
+            let color = {
+                msg:`rgb(${info.rgba.r},${info.rgba.g},${info.rgba.b})`,
+                type:this.cfg.type
+            } 
+            this.$emit('getColorfill',color)
+        }
+    }
+  },
+}
+</script>
+
+

src/components/colorpage/SizeInput.vue

+<template>
+<!-- 调整字体大小、宽度和透明度等 -->
+  <div class="style-setting">
+    <div class="label">{{label}}</div>
+    <div class="slider">
+      <div class="size-slider-wrapper">
+        <a-slider class="size-slider" :value="cfg.msg" :min="min" :max="max" :step="step" @change="changeSize" />
+      </div>
+      <a-input-number class="input-number" :value="cfg.msg" :min="min" :max="max" :step="step" @change="changeSize" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    methods: {
+         changeSize (value) {
+            let msg = {
+                msg:value,
+                type:this.cfg.type
+            }
+            this.$emit('getNumInput', msg)
+        }
+    },
+    props: {
+        cfg:{
+            default:() => {
+                return ''
+            }
+        },
+        label: {
+            type: String,
+            default: ''
+        },
+        min: {
+            type: Number,
+            default: 0
+        },
+        max: {
+            type: Number,
+            default: 20
+        },
+        step: {
+            type: Number,
+            default: 0.1
+        }
+    },
+}
+</script>
+
+<style>
+.style-setting{
+    display: flex;
+    margin-bottom: 20px;
+}
+  .slider {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+.size-slider-wrapper {
+    flex: 1;
+    border-radius: 2px;
+    border: 1px solid #dddddd;
+    height: 32px;
+    margin-right: 5px;
+}
+.ant-slider{
+    margin: 10px 6px 10px!important;
+}
+
+.input-number {
+    width: 60px!important;
+    margin-left: 5px;
+}
+</style>
\ No newline at end of file

src/router/index.js

@@ -14,7 +14,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })

src/store/index.js

@@ -5,8 +5,10 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    layersData:[],
-    layerStyle:{}
+    layersData:['boul_g'],
+    layerStyle:{},
+    setLayerStyle:{},
+    addLayerData:['boul_g']
   },
   mutations: {
     GET_LAYER_DATA(state,data){
@@ -14,6 +16,12 @@ export default new Vuex.Store({
     },
     GET_LAYER_STYLE(state,data){
       state.layerStyle = data
+    },
+    SET_LAYER_STYLE(state,data){
+      Object.assign(state.setLayerStyle,data)
+    },
+    ADD_LAYER_DATA(state,data){
+      state.addLayerData = data
     }
   },
   actions: {
@@ -23,6 +31,12 @@ export default new Vuex.Store({
     getlayerstyle({ commit }, data) {
       commit('GET_LAYER_STYLE', data)
     },
+    setlayerstyle({ commit }, data) {
+      commit('SET_LAYER_STYLE', data)
+    },
+    addlayerdata({ commit }, data) {
+      commit('ADD_LAYER_DATA', data)
+    }
   },
   modules: {
   }

src/views/addcontrols.vue

@@ -60,15 +60,18 @@
         </div>
         <a-drawer
         :mask="false"
-        :title="drawerTitle"
+        :title="drawerTitle.title"
         placement="right"
         :closable="true"
         :visible="styleVisible"
+        :destroyOnClose="true"
         :get-container="false"
         :wrap-style="{ position: 'absolute' }"
         @close="onClose"
         >
-            <layer-style></layer-style>
+            <layer-style @styleLayer="styleData"></layer-style>
+            <a-button @click="submit" style="float: right;margin-top:20px" type="primary">确定</a-button>
+            <a-button @click="onCancel" style="float: right;margin-top:20px;margin-right:10px;">取消</a-button>
         </a-drawer>
 
     </div>
@@ -92,7 +95,8 @@ export default {
             plainOptions:[],
             layerData:[],
             layerProp:[],
-            drawerTitle:''
+            drawerTitle:{},
+            endStyleLayer:{}
         }
     },
     components:{
@@ -101,23 +105,91 @@ export default {
     mounted() {
         this.getData()
     },
+    watch:{
+        checkedList(val){
+            let len = this.checkedList.length
+            let len2 = this.layerData.length
+            let newarr = []
+            for(let i = 0;i<len;i++){
+                for(let a = 0;a<len2;a++){
+                    if(this.checkedList[i] === this.layerData[a].title){
+                        newarr.push(this.layerData[a].id)
+                    }
+                }
+            }
+            this.addlayerdata(newarr)
+        }
+    },
     methods: {
-        ...mapActions(['getlayerdata','getlayerstyle']),
+        ...mapActions(['getlayerdata','getlayerstyle','setlayerstyle','addlayerdata']),
+        submit(){
+            console.log(this.endStyleLayer,'this.endStyleLayer')
+            let _self= this
+            let type
+            switch (this.endStyleLayer.type) {
+                case '点样式':
+                    type = 'MarkersSymbolizer'
+                    break;
+                case '线样式':
+                    type = 'LineSymbolizer'
+                    break;
+                case '面样式':
+                    type = 'PolygonSymbolizer'
+                    break;
+                case '注记样式':
+                    type = 'TextSymbolizet'
+                    break;
+                default:
+                    break;
+            }
+            let a  =  JSON.parse(JSON.stringify(this.endStyleLayer).replace(/val/g,type))
+            delete a.type
+            let obj = {
+                [this.drawerTitle.id]:[a]
+            }
+            this.setlayerstyle(obj)
+            this.styleVisible = false
+        },
+        styleData(item){
+            if(item.type === ''){
+                item.type = this.drawerTitle.type
+            }
+            this.endStyleLayer = item
+        },
+        showDeleteConfirm() {
+            let _self = this
+            this.$confirm({
+                title: '确定取消样式设置？',
+                content: '对图层样式的设置',
+                okText: 'Yes',
+                okType: 'danger',
+                cancelText: 'No',
+                onOk() {
+                    _self.styleVisible = false;
+                },
+                onCancel() {
+                    console.log('Cancel');
+                },
+            });
+        },
         layerStyle(val){
-            this.drawerTitle = val.title
+            this.drawerTitle = val
             this.styleVisible = true;
             this.getlayerstyle(val)
-            console.log(typeof(val) ,'????')
+            
         },
         afterVisibleChange(val) {
             console.log('visible', val);
         },
+        onCancel(){
+            this.showDeleteConfirm()
+        },
         onClose() {
-            this.styleVisible = false;
+            this.showDeleteConfirm()
         },
         getData(){
-            // axios.get('/api/messis/server/china/info').then((res => {
-            axios.get('/api/test.json').then((res => {
+            axios.get('/api/messis/server/china/info').then((res => {
+            // axios.get('/api/test.json').then((res => {
                 this.layerProp = res.data.layer
                 let len = res.data.layer.length
                 for(let i = 0;i<len;i++){
@@ -142,9 +214,11 @@ export default {
             this.getlayerdata(newarr)
         },
         onCheckAllChange(e) {
+            
             this.checkedList = e.target.checked ? this.plainOptions : [],
             this.indeterminate = false,
             this.checkAll = e.target.checked
+
         },
         hideregion(){
 
@@ -212,4 +286,11 @@ export default {
     margin-bottom: 10px!important;
    
 }
+#components-a-popconfirm-demo-placement .ant-btn {
+  width: 70px;
+  text-align: center;
+  padding: 0;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
 </style>
\ No newline at end of file

src/views/adds.vue

@@ -18,7 +18,7 @@ import TileDebug from 'ol/source/TileDebug';
 import WMTSTileGrid from 'ol/tilegrid/WMTS';
  import WMTS from 'ol/source/WMTS';
 
- import { mapState } from 'vuex';
+ import { mapActions, mapState } from 'vuex';
 export default {
   data() {
     return {
@@ -30,9 +30,41 @@ export default {
     this.initmap()
   },
   computed: {
-    ...mapState(['layersData']),
+    ...mapState(['layersData','setLayerStyle','addLayerData','setAddLayerStyle']),
   },
   watch:{
+    setLayerStyle(val){
+      let data = this.addLayerData
+      this.initbasemap.removeLayer(this.initbasemap.getLayers().array_[0])
+      let mapXYZ = new WMTS({
+        layer:data,
+        style:JSON.stringify(val[1]),
+        tileGrid: this.tilegrid,
+        matrixSet:'alberts_china',
+        format: 'image/png',
+          url:'/api/messis/server/china/wmts'
+      })
+      let newLayer =  new TileLayer({
+          source: mapXYZ
+      })
+      this.initbasemap.addLayer(newLayer)
+      this.setaddlayerstyle(val[1])
+    },
+    addLayerData(val){
+      this.initbasemap.removeLayer(this.initbasemap.getLayers().array_[0])
+      let mapXYZ = new WMTS({
+      layer:val,
+        style:null,
+        tileGrid: this.tilegrid,
+        matrixSet:'alberts_china',
+        format: 'image/png',
+          url:'/api/messis/server/china/wmts'
+      })
+      let newLayer =  new TileLayer({
+          source: mapXYZ
+      })
+      this.initbasemap.addLayer(newLayer)
+    },
     layersData(val){
       this.initbasemap.removeLayer(this.initbasemap.getLayers().array_[0])
       let mapXYZ = new WMTS({
@@ -41,8 +73,7 @@ export default {
         tileGrid: this.tilegrid,
         matrixSet:'alberts_china',
         format: 'image/png',
-        //   url:
-        // '/api/messis/server/china/wmts'
+          url:'/api/messis/server/china/wmts'
       })
       let newLayer =  new TileLayer({
           source: mapXYZ
@@ -51,6 +82,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(['clearlayerstyle','setaddlayerstyle']),
     initmap(){
       let _self = this
       //区域范围
@@ -81,8 +113,8 @@ export default {
             // projection: projection,
             matrixSet:'alberts_china',
             format: 'image/png',
-            //  url:
-            // '/api/messis/server/china/wmts'
+             url:
+            '/api/messis/server/china/wmts'
           })
           
         let map = new Map({

src/views/layerStyle.vue

 <template>
     <a-card size="small" :title="nowStyleTitle" style="width: 300px">
-      <p>card content</p>
+      <component :is="layerType" @styleLayer="styleData"></component>
     </a-card>
 </template>
 
 <script>
+import LineStyle from '../components/LineStyle'
+import MarkStyle from '../components/MarkStyle'
+import TextStyle from '../components/TextStyle'
+import PolygonStyle from '../components/PolygonStyle'
 import { mapState } from 'vuex';
 export default {
     data() {
@@ -12,10 +16,37 @@ export default {
             nowStyleTitle:''
         }
     },
+    components:{
+        MarkStyle,
+        LineStyle,
+        TextStyle,
+        PolygonStyle
+    },
     computed:{
-        ...mapState(['layerStyle'])
+        ...mapState(['layerStyle']),
+        layerType(){
+            switch (this.layerStyle.type) {
+                case "marker":
+                    return "MarkStyle"
+                case "Polygon":
+                    return "PolygonStyle"
+                case "line":
+                    return "LineStyle"
+                case "text":
+                    return "TextStyle"
+                default:
+                    return ""
+            }
+        }
     },
     methods: {
+        styleData(item){
+            let data = {
+                val:item,
+                type:this.nowStyleTitle
+            }
+            this.$emit('styleLayer', data);
+        },
         filterLayerKind(val){
             switch (val.type) {
                 case "marker":
@@ -34,10 +65,12 @@ export default {
                 default:
                     break;
             }
-            console.log(val,'layerstyle')
         }
     },
     watch:{
+        layerType(val){
+            console.log(val,'?layerType')
+        },
         layerStyle(val){
             this.filterLayerKind(val)
         }