调整图层顺序

src/components/codeMirror/CodeMirror.vue

@@ -10,7 +10,7 @@
             <a-select-option value="leaflet">
               leaflet.js
             </a-select-option>
-            <a-select-option value="mapbox" disabled>
+            <a-select-option value="mapbox">
               mapbox.js
             </a-select-option>
           </a-select>

src/components/codeMirror/codeMirrorConf.js

@@ -19,52 +19,18 @@ export const code = {
     <div id='map'></div>
     <script>
         "use strict";
-        var tdtVec = {
-            "type": "raster",
-            'tiles': [
-                "http://10.1.64.154/DataServer?T=vec_w&X={x}&Y={y}&L={z}"
-            ],
-            'tileSize': 256
-        };
-        var tdtCva = {
-            "type": "raster",
-            'tiles': [
-            'http://10.1.64.154/DataServer?T=cva_w&X={x}&Y={y}&L={z}'          
-            ],            
-            'tileSize': 256
-        }; 
         var map = new mapboxgl.Map({
             container: 'map', 
             style: {
                 "version": 8,
-                "sources": {
-                    "tdtVec": tdtVec,
-                    "tdtCva": tdtCva
-                },
-                "layers": [
-                    {
-                        "id": "tdtVec",
-                        "type": "raster",
-                        "source": "tdtVec",
-                        "minzoom": 0,
-                        "maxzoom": 17
-                    },
-                    {
-                        "id": "tdtCva",
-                        "type": "raster",
-                        "source": "tdtCva",
-                        "minzoom": 0,
-                        "maxzoom": 17
-                    }
-                ],
+                "sources": {},
+                "layers": [],
             },
-            center: [104,34],
-            zoom: 2,
+            center: [30,34],
+            zoom: 1,
             attributionControl: true
         });
-        var nav = new mapboxgl.NavigationControl({showCompass: false})
-        map.addControl(nav, 'top-left')
-        map.on('load', function () { // 底图加载成功 添加OGC服务
+        map.on('load', function () { // 底图加载成功 添加服务
           map.addSource('raster-layer', {
               type: 'raster',
               tiles: ['你的URL'],

src/views/Main.vue

 <template>
   <div class="page">
-    <div class="left">
+    <div class="left" :style="{width: leftWidth}">
       <add-controls v-show="curShow === 'style'"></add-controls>
       <code-mirror v-show="curShow === 'code'" class="code-mirror" ref='codeMirror' :url="getStyleUrl"></code-mirror>
     </div>
+    <div class="width-slider"
+    @mousedown="startMove"
+    @mousemove="move"
+    @mouseup="stopMove"
+    :style="{left: leftWidth}"
+    >
+    <a-icon type="align-center" /></div>
     <div class="right">
       <!-- 编辑器代码实现 -->
       <section id="preview">
@@ -21,11 +28,14 @@
 import AddControls from './addcontrols'
 import codeMirror from '@/components/codeMirror/CodeMirror.vue'
 import { mapGetters } from 'vuex'
+let start = 0
+let end = 0
 export default {
   data () {
     return {
       baseInfo: {},
-      curShow: 'style'
+      curShow: 'style',
+      leftWidth: '25%'
     }
   },
   computed: {
@@ -34,6 +44,21 @@ export default {
   components:{
     AddControls,
     codeMirror
+  },
+ methods: {
+   startMove (e) {
+     start = e.pageX
+     console.log(start)
+   },
+   move (e) {
+     if (start) {
+      end = e.pageX
+      this.leftWidth = `${end - 20}px`
+     }
+   },
+   stopMove (e) {
+     start = 0
+   }
   }
 }
 </script>
@@ -54,14 +79,36 @@ export default {
   }
   .top-absolute{
     position: absolute;
-    top: 2vh;
-    left: 29%;
+    top: 1vh;
+    left: 13%;
+  }
+  .width-slider{
+    position: absolute;
+    left: 25%;
+    width: 13px;
+    height: 100%;
+    background-color: #333;
+    box-shadow: 0 0 5px 0 #ddd inset;
+    cursor: pointer;
+    transition: .3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i{
+      transform: rotate(90deg);
+      color: #eee;
+      font-weight: bold;
+    }
+    &:hover{
+      width: 40px;
+    }
   }
 }
 
 .code-mirror{
   height: 100%;
   width: 100%;
+  margin-top: 0.6vh;
   overflow: hidden;
   .ant-tabs{
     height: 100%;

src/views/addcontrols.vue

@@ -8,14 +8,30 @@
           <label for="">全部图层</label>
         </div>
       </div>
-      <div class="layer-item" v-for="item in layerProp" :key="item.id">
-        <layer-setting :ref="item.id" :layer="item" @change="onChange"></layer-setting>
+      <!-- <div class="layer-item" v-for="item in layerProp" :key="item.id"> -->
+
+      <draggable
+        class="list-group"
+        v-model="layerProp"
+        v-bind="dragOptions"
+        @start="isDragging = true"
+        @end="isDragging = false"
+        @change="handleLayerMoved"
+        handle=".handle">
+        <transition-group>
+          <div class="layer-item" v-for="layer in layerProp" :key="layer.id">
+            <layer-setting :ref="layer.id" :layer="layer" @change="onChange"></layer-setting>
           </div>
+        </transition-group>
+      </draggable>
+        <!-- <layer-setting :ref="item.id" :layer="item" @change="onChange"></layer-setting> -->
       </div>
+    <!-- </div> -->
   </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable'
 import layerSetting from '@/components/layerSetting/LayerSetting'
 import axios from 'axios';
 import { mapActions } from 'vuex';
@@ -38,7 +54,8 @@ export default {
         }
     },
     components:{
-        layerSetting
+        layerSetting,
+        draggable
     },
     mounted() {
       this.getData()
@@ -59,6 +76,15 @@ export default {
           }
         })
         return styleCfg
+      },
+      // 拖拽选项
+      dragOptions () {
+        return {
+          animation: 0,
+          group: 'description',
+          disabled: false,
+          ghostClass: 'ghost'
+        }
       }
     },
     watch:{
@@ -131,6 +157,13 @@ export default {
         onCheckAllChange(checked) {
           this.checkAll = checked
           this.layerProp.forEach(item => item.isShow = checked)
+        },
+        handleLayerMoved (e) {
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.onChange()
+            }, 100);
+          })
         }
     },
 }