feat:线型选择

src/components/editLayer/LineLayer.vue

@@ -2,7 +2,8 @@
   <div class="edit-line">
     <div class="style">
       <editor-title title="样式"></editor-title>
-      <shape shapeType="line" @change="handleShapeChange"></shape>
+      <shape shapeType="line" :line="layerStyle['LineSymbolizer']['stroke-dasharray']"
+      @change="updateStyle('LineSymbolizer', 'stroke-dasharray', ...arguments)"></shape>
       <!-- 矢量类型 -->
       <template v-if="shapeStyle === 'vector'">
         <color-setting label="线条"

src/components/editLayer/PolygonLayer.vue

@@ -6,9 +6,10 @@
         label="填充"
         :editType="1"
         :color="layerStyle['PolygonSymbolizer']['fill']"
+        type="rgba"
         @update:color="updateStyle('PolygonSymbolizer', 'fill', ...arguments)">
         </color-setting>
-      <color-setting label="边框"
+      <color-setting v-if="layerStyle['LineSymbolizer']" label="边框"
       :color="layerStyle['LineSymbolizer']['stroke']"
       @update:color="updateStyle('LineSymbolizer', 'stroke', ...arguments)"></color-setting>
     </div>
@@ -42,11 +43,11 @@ export default {
   },
   computed: {
     layerStyle () {
-      if (!this.layer.LineSymbolizer) {
-        this.layer.LineSymbolizer = {
-          stroke: 'rgba(0,0,0,0)'
-        }
-      }
+      // if (!this.layer.LineSymbolizer) {
+      //   this.layer.LineSymbolizer = {
+      //     stroke: 'rgba(0,0,0,0)'
+      //   }
+      // }
       return this.layer
     }
   },

src/components/styleSetting/ColorSetting.vue

@@ -11,7 +11,7 @@
 
     <template slot="content">
       <!-- 统一颜色 -->
-      <simple-color v-if="editType === 1" :color="color" v-on="$listeners"></simple-color>
+      <simple-color :type="type" v-if="editType === 1" :color="color" v-on="$listeners"></simple-color>
       <!-- 分段颜色 -->
       <complex-color v-if="editType === 2" :color="color" v-on="$listeners"></complex-color>
     </template>
@@ -41,6 +41,10 @@ export default {
     color: {
       type: String,
       default: ''
+    },
+    type: {
+      type: String,
+      default: 'rgb'
     }
   },
   components: {

src/components/styleSetting/Shape.vue

@@ -4,8 +4,8 @@
     <a-popover :overlayStyle="{width: '300px'}" trigger="click" placement="rightTop">
         <div class="shape-block">
           <div class="shape-inner" :class="{ 'shape-inner-line': shapeType === 'line' }">
-            <!-- {{iconUrl}} -->
-            <div class="shape-icon" v-html="iconUrl"></div>
+            <div class="shape-icon" v-if="shapeType === 'line'" :style="{backgroundImage: iconUrl}"></div>
+            <div class="shape-icon" v-else v-html="iconUrl"></div>
           </div>
         </div>
         <template slot="content">
@@ -18,7 +18,8 @@
                   :key="icon.name"
                   :title="icon.title"
                   @click="useIcon(icon)">
-                    <div class="icon-inner" v-html="icon.url"></div>
+                    <div class="icon-inner" v-if="shapeType === 'line'" :style="{backgroundImage: getImagePath(icon)}"></div>
+                    <div class="icon-inner" v-else v-html="icon.url"></div>
                   </li>
               </ul>
             </div>
@@ -53,6 +54,10 @@ export default {
     icon: {
       type: String,
       default: ''
+    },
+    line: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -64,7 +69,8 @@ export default {
   },
   created () {
     if (this.shapeType === 'line') {
-      this.iconUrl = `url(${this.publicPath}shapeIcons/straightLine.png)`
+      const checkedLine = lineShape[0].icons.find(item => item.dasharray.join(' ') === this.line)
+      this.iconUrl = this.getImagePath(checkedLine)
     } else {
       this.getData()
       // this.iconUrl = `url(${this.publicPath}shapeIcons/circle.png)`
@@ -136,8 +142,14 @@ export default {
       }
     },
     useIcon (icon) {
-      this.iconUrl = icon.url
-      this.$emit('change', icon.name)
+      if (this.shapeType === 'line') {
+        this.iconUrl = this.getImagePath(icon)
+        const dasharray = icon.dasharray.join(' ')
+        this.$emit('change', dasharray)
+      } else {
+        this.iconUrl = icon.url
+        this.$emit('change', icon.name)
+      }
     }
   }
 }
@@ -184,6 +196,8 @@ export default {
       width: 100%;
       height: 1px;
       margin-top: 12px;
+      background-repeat: repeat;
+      background-size: auto 100%;
     }
   }
 }
@@ -234,8 +248,8 @@ export default {
         width: 100%;
         height: 6px;
         margin: 0 auto;
-        background-repeat: no-repeat;
-        background-size: cover;
+        background-repeat: repeat;
+        background-size: auto 100%;
       }
     }
   }

src/components/styleTypes/SimpleColor.vue

@@ -15,12 +15,20 @@ export default {
     color: {
       type: String,
       default: 'rgba(0, 0, 0, 0.1)'
+    },
+    type: {
+      type: String,
+      default: 'rgb'
     }
   },
   methods: {
     handleChange (info) {
       const color = info.rgba
-      this.$emit('update:color', `rgb(${color.r},${color.g},${color.b})`)
+      if (this.type === 'rgb') {
+        this.$emit('update:color', `rgb(${color.r},${color.g},${color.b})`)
+      } else {
+        this.$emit('update:color', `rgba(${color.r},${color.g},${color.b},${color.a})`)
+      }
     }
   },
   components: {

src/config/default.js

@@ -20,8 +20,8 @@ export default {
         fill: '#d81e06',
         opacity: 0.5,
         stroke: '#000000',
-        'stroke-width': 10,
-        radius: 20
+        'stroke-width': 0,
+        radius: 4
       }
     },
     {
@@ -44,8 +44,8 @@ export default {
         fill: '#2c2c2c',
         opacity: 0.5,
         stroke: '#000000',
-        'stroke-width': 10,
-        radius: 20
+        'stroke-width': 0,
+        radius: 4
       }
     },
     {
@@ -68,8 +68,8 @@ export default {
         fill: '#2c2c2c',
         opacity: 0.5,
         stroke: '#000000',
-        'stroke-width': 10,
-        radius: 20
+        'stroke-width': 0,
+        radius: 4
       }
     },
     {
@@ -92,8 +92,8 @@ export default {
         fill: '#2c2c2c',
         opacity: 0.5,
         stroke: '#000000',
-        'stroke-width': 10,
-        radius: 20
+        'stroke-width': 0,
+        radius: 4
       }
     }
   ],
@@ -193,7 +193,8 @@ export default {
     {
       LineSymbolizer: {
         stroke: 'rgb(0,175,255)',
-        'stroke-width': 0.15
+        'stroke-width': 0.15,
+        'stroke-dasharray': "10 0"
       }
     }
   ],
@@ -201,7 +202,8 @@ export default {
     {
       LineSymbolizer: {
         stroke: 'rgb(0,175,255)',
-        'stroke-width': 0.15
+        'stroke-width': 0.15,
+        'stroke-dasharray': "10 0"
       }
     }
   ],
@@ -209,7 +211,8 @@ export default {
     {
       LineSymbolizer: {
         stroke: 'rgb(10,175,235)',
-        'stroke-width': 0.6
+        'stroke-width': 0.6,
+        'stroke-dasharray': "10 0"
       }
     }
   ],
@@ -220,7 +223,8 @@ export default {
       },
       LineSymbolizer: {
         stroke: 'rgb(10,175,235)',
-        'stroke-width': 0.28
+        'stroke-width': 0.28,
+        'stroke-dasharray': "10 0"
       }
     }
   ]

src/config/shape/index.js

@@ -76,36 +76,46 @@ export const lineShape = [
         dasharray: [10, 0]
       },
       {
-        name: 'dotLine1',
+        name: 'boul_g_1.jpg',
         type: 'vector',
-        title: '虚线1',
+        title: '未定国界',
         url: '',
         dasharray: [5, 5]
       },
       {
-        name: 'dotLine2',
+        name: 'boul_g_2.jpg',
         type: 'vector',
-        title: '虚线2',
+        title: '国界',
         url: '',
-        dasharray: [2, 2]
+        dasharray: [1, 2, 5, 2]
       },
       {
-        name: 'dotLine3',
+        name: 'boul_s_1.jpg',
         type: 'vector',
-        title: '虚线3',
+        title: '省界',
         url: '',
-        dasharray: [10, 10]
-      }
-    ]
-  },
-  {
-    groupName: '交通',
-    icons: [
+        dasharray: [6, 2, 1, 2]
+      },
+      {
+        name: 'boul_s_2.jpg',
+        type: 'vector',
+        title: '香港',
+        url: '',
+        dasharray: [5, 1, 3, 1]
+      },
+      {
+        name: 'boul_d.jpg',
+        type: 'vector',
+        title: '市界',
+        url: '',
+        dasharray: [7, 2, 1, 2, 1, 2]
+      },
       {
-        name: 'dotLine5',
-        type: 'img',
-        title: '虚线5',
-        url: ''
+        name: 'boul_x.jpg',
+        type: 'vector',
+        title: '县界',
+        url: '',
+        dasharray: [5, 1, 5, 1, 0.5, 1]
       }
     ]
   }