stylev1

src/components/LineStyle.vue

@@ -23,6 +23,7 @@ import SizeInput from './colorpage/SizeInput'
 export default {
     data() {
         return {
+            subObj:{},
             visible: false,
             colorfill:{
                 type:'stroke',
@@ -46,13 +47,17 @@ export default {
             if(item.type === 'stroke'){
                 this.colorfill.msg = item.msg
             }
-            this.$emit('styleLayer', item);
+            let obj = {[item.type]:String(item.msg)}
+            Object.assign(this.subObj,obj)
+            this.$emit('styleLayer', this.subObj);
         },
         InputChange(item){
             if(item.type === 'stroke-width'){
                 this.layerstroke.msg = item.msg
             }
-            this.$emit('styleLayer', item);
+            let obj = {[item.type]:String(item.msg)}
+            Object.assign(this.subObj,obj)
+            this.$emit('styleLayer', this.subObj);
         }
     },
 }

src/components/MarkStyle.vue

@@ -82,7 +82,7 @@ export default {
             }else{
                 this.layerradius.msg = item.msg
             }
-            let obj = {[item.type]:item.msg}
+            let obj = {[item.type]:String(item.msg)}
             Object.assign(this.subObj,obj)
             this.$emit('styleLayer', this.subObj);
         }

src/components/TextStyle.vue

@@ -13,7 +13,7 @@
             <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>
+  <size-input label="注记大小" :cfg="layerstroke" :size="layerstroke.msg"  :min="10" :max="25" :step="1" @getNumInput="InputChange"></size-input>
  
 </div>
 </template>
@@ -24,6 +24,7 @@ import SizeInput from './colorpage/SizeInput'
 export default {
     data() {
         return {
+            subObj:{},
             visible: false,
             colorfill:{
                 type:'fill',
@@ -31,7 +32,7 @@ export default {
             },
             layerstroke:{
                 type:'size',
-                msg:"0",
+                msg:0,
             }
         }
     },
@@ -39,6 +40,9 @@ export default {
         SimpleColor,
         SizeInput
     },
+    mounted() {
+        this.textStyle()
+    },
     methods: {
         hide() {
             this.visible = false;
@@ -49,15 +53,31 @@ export default {
             }else{
                 this.colorstroke.msg = item.msg
             }
-            this.$emit('styleLayer', item);
+            let obj = {[item.type]:item.msg}
+            Object.assign(this.subObj,obj)
+            this.$emit('styleLayer', this.subObj);
         },
         InputChange(item){
-            if(item.type === 'stroke-width'){
+            console.log(item,'注记')
+            if(item.type === 'size'){
                 this.layerstroke.msg = item.msg
             }else{
                 this.layerradius.msg = item.msg
             }
-            this.$emit('styleLayer', item);
+            let obj = {[item.type]:String(item.msg)}
+            Object.assign(this.subObj,obj)
+            this.$emit('styleLayer', this.subObj);
+        },
+        textStyle(){
+            let a = 'face-name'
+            let b = 'Heiti SC Medium'
+            let obj = {[[a]]:b}
+            Object.assign(this.subObj,obj)
+            let c = 'allow-overlap'
+            let d = "true"
+            let obj2 = {[[c]]:d}
+            Object.assign(this.subObj,obj2)
+            this.$emit('styleLayer', this.subObj);
         }
     },
 }

src/store/index.js

@@ -5,10 +5,10 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    layersData:['boul_g'],
+    layersData:[],
     layerStyle:{},
     setLayerStyle:{},
-    addLayerData:['boul_g']
+    addLayerData:[]
   },
   mutations: {
     GET_LAYER_DATA(state,data){
@@ -19,6 +19,7 @@ export default new Vuex.Store({
     },
     SET_LAYER_STYLE(state,data){
       Object.assign(state.setLayerStyle,data)
+      state.setLayerStyle = JSON.parse(JSON.stringify(state.setLayerStyle))
     },
     ADD_LAYER_DATA(state,data){
       state.addLayerData = data
@@ -38,6 +39,11 @@ export default new Vuex.Store({
       commit('ADD_LAYER_DATA', data)
     }
   },
+  getters:{
+    showStyleLayer:state => {
+      return state.setLayerStyle
+    }
+  },
   modules: {
   }
 })

src/views/addcontrols.vue

@@ -64,7 +64,6 @@
         placement="right"
         :closable="true"
         :visible="styleVisible"
-        :destroyOnClose="true"
         :get-container="false"
         :wrap-style="{ position: 'absolute' }"
         @close="onClose"
@@ -127,17 +126,17 @@ export default {
             let _self= this
             let type
             switch (this.endStyleLayer.type) {
-                case '点样式':
+                case 'marker':
                     type = 'MarkersSymbolizer'
                     break;
-                case '线样式':
+                case 'line':
                     type = 'LineSymbolizer'
                     break;
-                case '面样式':
+                case 'Polygon':
                     type = 'PolygonSymbolizer'
                     break;
-                case '注记样式':
-                    type = 'TextSymbolizet'
+                case 'text':
+                    type = 'TextSymbolizer'
                     break;
                 default:
                     break;
@@ -151,9 +150,7 @@ export default {
             this.styleVisible = false
         },
         styleData(item){
-            if(item.type === ''){
             item.type = this.drawerTitle.type
-            }
             this.endStyleLayer = item
         },
         showDeleteConfirm() {

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 { mapActions, mapState } from 'vuex';
+ import { mapActions, mapState, mapGetters } from 'vuex';
 export default {
   data() {
     return {
@@ -30,15 +30,17 @@ export default {
     this.initmap()
   },
   computed: {
-    ...mapState(['layersData','setLayerStyle','addLayerData','setAddLayerStyle']),
+    ...mapState(['layersData','setLayerStyle','addLayerData']),
+    ...mapGetters(['showStyleLayer'])
   },
   watch:{
     setLayerStyle(val){
+      console.log(val,'setLayerStyle')
       let data = this.addLayerData
       this.initbasemap.removeLayer(this.initbasemap.getLayers().array_[0])
       let mapXYZ = new WMTS({
         layer:data,
-        style:JSON.stringify(val[1]),
+        style:JSON.stringify(val),
         tileGrid: this.tilegrid,
         matrixSet:'alberts_china',
         format: 'image/png',
@@ -48,13 +50,14 @@ export default {
           source: mapXYZ
       })
       this.initbasemap.addLayer(newLayer)
-      this.setaddlayerstyle(val[1])
     },
     addLayerData(val){
+      let style = JSON.stringify(this.setLayerStyle) 
+      //全选变动
       this.initbasemap.removeLayer(this.initbasemap.getLayers().array_[0])
       let mapXYZ = new WMTS({
       layer:val,
-        style:null,
+        style:style,
         tileGrid: this.tilegrid,
         matrixSet:'alberts_china',
         format: 'image/png',
@@ -66,10 +69,12 @@ export default {
       this.initbasemap.addLayer(newLayer)
     },
     layersData(val){
+      let style = JSON.stringify(this.setLayerStyle) 
+      //单个变动
       this.initbasemap.removeLayer(this.initbasemap.getLayers().array_[0])
       let mapXYZ = new WMTS({
       layer:val,
-        style:null,
+        style:style,
         tileGrid: this.tilegrid,
         matrixSet:'alberts_china',
         format: 'image/png',
@@ -82,7 +87,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['clearlayerstyle','setaddlayerstyle']),
+    ...mapActions(['clearlayerstyle']),
     initmap(){
       let _self = this
       //区域范围