xy-map 1.0.32 → 1.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xy-map",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "地图组件",
   "main": "src/index.js",
   "scripts": {

package/src/map.js

@@ -182,7 +182,7 @@ class mapSdk {
   addBuildings(show = true) {
     let map = this.map
     const layers = map.getStyle().layers
-    const labelLayerId = layers.find((layer) => layer.type === 'symbol' && layer.layout['text-field']).id
+    const labelLayerId = layers.find((layer) => layer.type === 'symbol' && layer.layout && layer.layout['text-field']).id
     if (show) {
       map.addLayer({
         'id': 'add-3d-buildings',

package/src/package/draw/index.vue

@@ -47,7 +47,7 @@ export default {
     return {
       type: 'move',
       isEdit: false, //是否编辑模式
-      draw: ''
+      draw: '',
     }
   },
   computed: {
@@ -64,6 +64,7 @@ export default {
   },
   methods: {
     initDraw (map) {
+      this.map = map
       const draw = this.draw = new MapboxDraw({
         displayControlsDefault: false,
         controls: {
@@ -115,8 +116,18 @@ export default {
       console.log('修改结束')
       this.$emit('update', data)
     },
+    drawEdit (geometry) { // 修改回填元素
+      // let geometry = {
+      //   type: 'Point',
+      //   coordinates: [this.lng, this.lat]
+      // }
+      this.draw.add(geometry)
+    },
     drawDelete () {
-      this.draw.deleteAll()
+      if (this.draw) {
+        this.draw.deleteAll()
+        this.$emit('clear')
+      }
     },
   }
 }

package/src/package/draw/line.vue

@@ -5,13 +5,14 @@
 
     <draw-tools ref="draw"
                 :list="['line']"
+                :single="single"
                 @update="drawUpdate"
                 @end="drawUpdate">
       <div class="mt-15 ">
         <el-input :value="position.toString()"
                   size="small"
                   placeholder="点击地图获取坐标"
-                  readonly
+                  :readonly="readonly"
                   style="width: 300px; margin-right: 10px;"></el-input>
         <el-button type="primary"
                    size="small"
@@ -33,7 +34,23 @@ export default {
     config: {
       type: Object,
       default: () => { }
-    }
+    },
+    readonly: {
+      type: Boolean,
+      default: true
+    },
+    single: {
+      type: Boolean,
+      default: false
+    },
+    geoData: {
+      type: [Object, String],
+      default: ''
+    },
+    pointList: {
+      type: [Array, String],
+      default: ''
+    },
   },
   data () {
     return {
@@ -41,6 +58,14 @@ export default {
       position: '',
     }
   },
+  watch: {
+    pointList () {
+      this.draw()
+    },
+    geoData () {
+      this.draw()
+    }
+  },
   mounted () {
     this.init()
   },
@@ -48,20 +73,49 @@ export default {
     init () {
       let config = Object.assign({}, {
         accessToken: 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg',
-        container: 'map',
         zoom: 14,
         center: [102.83643451528434, 24.81972792178513],
         is3d: false,
       }, this.config)
       mapSdk.initMap(config).then(map => {
         this.$refs.draw.initDraw(map)
+        this.draw()
+      })
+    },
+    draw () {
+      if (this.pointList) {
+        let features = this.pointList.map(item => {
+          return {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'LineString',
+              'coordinates': item
+            },
+            'properties': {}
+          }
+        })
+        this.geoJson = {
+          'type': 'FeatureCollection',
+          'features': features
+        }
+      } else {
+        this.geoJson = this.geoData
+      }
+      this.drawUpdate(this.geoJson)
+
+      // 开启编辑
+      this.geoJson.features.forEach(item => {
+        this.$refs.draw.drawEdit(item.geometry)
       })
     },
     drawUpdate (data) {
       this.geoJson = data
-      this.position = data.features[0].geometry.coordinates
+      this.position = data.features.map(item => item.geometry.coordinates)
       this.$nextTick(() => {
-        mapSdk.fitLineBounds(this.position, {
+        // 二维数组转一维数组
+        // const bounds = this.position.reduce((a, b) => a.concat(b))
+        const bounds = this.position.flat()
+        mapSdk.fitLineBounds(bounds, {
           padding: 100
         })
       })
@@ -71,6 +125,7 @@ export default {
         geoJson: this.geoJson,
         position: this.position
       }
+      console.log(data)
       this.$emit('save', data)
     }
   }

package/src/package/draw/point.vue

@@ -39,13 +39,33 @@ export default {
     config: {
       type: Object,
       default: () => { }
-    }
+    },
+    geoData: {
+      type: [Object, String],
+      default: ''
+    },
+    lng: {
+      type: [Number, String],
+      default: ''
+    },
+    lat: {
+      type: [Number, String],
+      default: ''
+    },
   },
   data () {
     return {
       geoJson: '',
       position: '',
-      address: ''
+      address: '',
+    }
+  },
+  watch: {
+    lng () {
+      this.draw()
+    },
+    geoData () {
+      this.draw()
     }
   },
   mounted () {
@@ -55,13 +75,38 @@ export default {
     init () {
       let config = Object.assign({}, {
         accessToken: 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg',
-        container: 'map',
         zoom: 14,
         center: [102.83643451528434, 24.81972792178513],
         is3d: false,
       }, this.config)
       mapSdk.initMap(config).then(map => {
         this.$refs.draw.initDraw(map)
+        this.draw()
+      })
+    },
+    draw () {
+      if (this.lng && this.lat) {
+        this.geoJson = {
+          'type': 'FeatureCollection',
+          'features': [
+            {
+              'type': 'Feature',
+              'geometry': {
+                'type': 'Point',
+                'coordinates': [this.lng, this.lat]
+              },
+              'properties': {}
+            }
+          ]
+        }
+      } else {
+        this.geoJson = this.geoData
+      }
+      this.drawUpdate(this.geoJson)
+
+      // 开启编辑
+      this.geoJson.features.forEach(item => {
+        this.$refs.draw.drawEdit(item.geometry)
       })
     },
     drawUpdate (data) {
@@ -72,15 +117,17 @@ export default {
         GeoAddress(this.position).then(data => {
           this.address = data
         })
-
       })
     },
     save () {
       let data = {
         geoJson: this.geoJson,
         position: this.position,
+        lng: this.position[0],
+        lat: this.position[1],
         address: this.address
       }
+      console.log(data)
       this.$emit('save', data)
     }
   }

package/src/package/draw/polygon.vue

@@ -5,13 +5,14 @@
 
     <draw-tools ref="draw"
                 :list="['polygon']"
+                :single="single"
                 @update="drawUpdate"
                 @end="drawUpdate">
       <div class="mt-15 ">
         <el-input :value="position.toString()"
                   size="small"
                   placeholder="点击地图获取坐标"
-                  readonly
+                  :readonly="readonly"
                   style="width: 300px; margin-right: 10px;"></el-input>
         <el-button type="primary"
                    size="small"
@@ -33,7 +34,23 @@ export default {
     config: {
       type: Object,
       default: () => { }
-    }
+    },
+    single: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: true
+    },
+    geoData: {
+      type: [Object, String],
+      default: ''
+    },
+    pointList: {
+      type: [Array, String],
+      default: ''
+    },
   },
   data () {
     return {
@@ -41,6 +58,14 @@ export default {
       position: '',
     }
   },
+  watch: {
+    pointList () {
+      this.draw()
+    },
+    geoData () {
+      this.draw()
+    }
+  },
   mounted () {
     this.init()
   },
@@ -48,20 +73,49 @@ export default {
     init () {
       let config = Object.assign({}, {
         accessToken: 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg',
-        container: 'map',
         zoom: 14,
         center: [102.83643451528434, 24.81972792178513],
         is3d: false,
       }, this.config)
       mapSdk.initMap(config).then(map => {
         this.$refs.draw.initDraw(map)
+        this.draw()
+      })
+    },
+    draw () {
+      if (this.pointList) {
+        let features = this.pointList.map(item => {
+          return {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'Polygon',
+              'coordinates': [item]
+            },
+            'properties': {}
+          }
+        })
+        this.geoJson = {
+          'type': 'FeatureCollection',
+          'features': features
+        }
+      } else {
+        this.geoJson = this.geoData
+      }
+      this.drawUpdate(this.geoJson)
+
+      // 开启编辑
+      this.geoJson.features.forEach(item => {
+        this.$refs.draw.drawEdit(item.geometry)
       })
     },
     drawUpdate (data) {
       this.geoJson = data
-      this.position = data.features[0].geometry.coordinates
+      this.position = data.features.map(item => item.geometry.coordinates[0])
       this.$nextTick(() => {
-        mapSdk.fitLineBounds(this.position[0], {
+        // 二维数组转一维数组
+        // const bounds = this.position.reduce((a, b) => a.concat(b))
+        const bounds = this.position.flat()
+        mapSdk.fitLineBounds(bounds, {
           padding: 100
         })
       })
@@ -71,6 +125,7 @@ export default {
         geoJson: this.geoJson,
         position: this.position
       }
+      console.log(data)
       this.$emit('save', data)
     }
   }

package/src/store/index.js

@@ -1,12 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {},
-  getters: {},
-  mutations: {},
-  actions: {},
-  modules: {},
-})