xy-map 1.0.33 → 1.0.35

package/package.json

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

package/src/map.js

@@ -182,7 +182,8 @@ 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 failed = layers.find((layer) => layer.type === 'symbol' && (layer.layout && layer.layout['text-field']))
+    const labelLayerId = failed ? failed.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: {
@@ -123,8 +124,10 @@ export default {
       this.draw.add(geometry)
     },
     drawDelete () {
-      this.draw.deleteAll()
-      this.$emit('clear')
+      if (this.draw) {
+        this.draw.deleteAll()
+        this.$emit('clear')
+      }
     },
   }
 }

package/src/package/draw/line.vue

@@ -5,14 +5,20 @@
 
     <draw-tools ref="draw"
                 :list="['line']"
+                :single="single"
                 @update="drawUpdate"
-                @end="drawUpdate">
-      <div class="mt-15 ">
+                @end="drawUpdate"
+                @clear="clear">
+      <div class="mt-15 flex">
         <el-input :value="position.toString()"
                   size="small"
                   placeholder="点击地图获取坐标"
                   :readonly="readonly"
                   style="width: 300px; margin-right: 10px;"></el-input>
+
+        <shp-file v-if="upload"
+                  @upload="getShp"></shp-file>
+
         <el-button type="primary"
                    size="small"
                    @click="save">保存</el-button>
@@ -24,10 +30,12 @@
 <script>
 import { mapSdk } from '../../index.js'
 import drawTools from './index.vue'
+import shpFile from './shpFile.vue'
 
 export default {
   components: {
-    drawTools
+    drawTools,
+    shpFile
   },
   props: {
     config: {
@@ -35,9 +43,21 @@ export default {
       default: () => { }
     },
     readonly: {
+      type: Boolean,
+      default: false
+    },
+    upload: {
+      type: Boolean,
+      default: false
+    },
+    autoZoom: { // 自动缩放适应边界
       type: Boolean,
       default: true
     },
+    single: {
+      type: Boolean,
+      default: false
+    },
     geoData: {
       type: [Object, String],
       default: ''
@@ -79,37 +99,44 @@ export default {
     },
     draw () {
       if (this.pointList) {
+        let features = this.pointList.map(item => {
+          return {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'LineString',
+              'coordinates': item
+            },
+            'properties': {}
+          }
+        })
         this.geoJson = {
           'type': 'FeatureCollection',
-          'features': [
-            {
-              'type': 'Feature',
-              'geometry': {
-                'type': 'LineString',
-                'coordinates': this.pointList
-              },
-              'properties': {}
-            }
-          ]
+          'features': features
         }
       } else {
         this.geoJson = this.geoData
       }
       this.drawUpdate(this.geoJson)
-
+      this.edit()
+    },
+    edit () {
       // 开启编辑
       this.geoJson.features.forEach(item => {
         this.$refs.draw.drawEdit(item.geometry)
       })
     },
-    drawUpdate (data) {
+    drawUpdate (data, autoZoom = false) {
       this.geoJson = data
-      this.position = data.features[0].geometry.coordinates
-      this.$nextTick(() => {
-        mapSdk.fitLineBounds(this.position, {
-          padding: 100
+      this.position = this.geoJson.features.map(item => item.geometry.coordinates)
+
+      if (this.autoZoom || autoZoom) { // 开启缩放动画
+        this.$nextTick(() => {
+          const bounds = this.position.flat() // 二维数组转一维数组
+          mapSdk.fitLineBounds(bounds, {
+            padding: 100
+          })
         })
-      })
+      }
     },
     save () {
       let data = {
@@ -118,6 +145,15 @@ export default {
       }
       console.log(data)
       this.$emit('save', data)
+    },
+    clear () {
+      this.geoJson = ''
+      this.position = ''
+    },
+    getShp (shp) {
+      this.$refs.draw.drawDelete() // 先清空画布
+      this.drawUpdate(shp, true)
+      this.edit()
     }
   }
 }

package/src/package/draw/point.vue

@@ -6,7 +6,8 @@
     <draw-tools ref="draw"
                 :list="['point']"
                 @update="drawUpdate"
-                @end="drawUpdate">
+                @end="drawUpdate"
+                @clear="clear">
       <div class="mt-15"
            style="width: 380px;">
         <div class="flex">
@@ -58,7 +59,6 @@ export default {
       geoJson: '',
       position: '',
       address: '',
-      map: ''
     }
   },
   watch: {
@@ -81,7 +81,6 @@ export default {
         is3d: false,
       }, this.config)
       mapSdk.initMap(config).then(map => {
-        this.map = map
         this.$refs.draw.initDraw(map)
         this.draw()
       })
@@ -95,7 +94,7 @@ export default {
               'type': 'Feature',
               'geometry': {
                 'type': 'Point',
-                'coordinates': [this.lng, this.lat]
+                'coordinates': [this.lng * 1, this.lat * 1]
               },
               'properties': {}
             }
@@ -131,7 +130,12 @@ export default {
       }
       console.log(data)
       this.$emit('save', data)
-    }
+    },
+    clear () {
+      this.geoJson = ''
+      this.position = ''
+      this.address = ''
+    },
   }
 }
 </script>

package/src/package/draw/polygon.vue

@@ -5,15 +5,20 @@
 
     <draw-tools ref="draw"
                 :list="['polygon']"
-                :single="false"
+                :single="single"
                 @update="drawUpdate"
-                @end="drawUpdate">
+                @end="drawUpdate"
+                @clear="clear">
       <div class="mt-15 ">
         <el-input :value="position.toString()"
                   size="small"
                   placeholder="点击地图获取坐标"
                   :readonly="readonly"
                   style="width: 300px; margin-right: 10px;"></el-input>
+
+        <shp-file @upload="getShp"
+                  v-if="upload"></shp-file>
+
         <el-button type="primary"
                    size="small"
                    @click="save">保存</el-button>
@@ -25,20 +30,34 @@
 <script>
 import { mapSdk } from '../../index.js'
 import drawTools from './index.vue'
+import shpFile from './shpFile.vue'
 
 export default {
   components: {
-    drawTools
+    drawTools,
+    shpFile
   },
   props: {
     config: {
       type: Object,
       default: () => { }
     },
+    single: {
+      type: Boolean,
+      default: false
+    },
+    autoZoom: { // 自动缩放适应边界
+      type: Boolean,
+      default: true
+    },
     readonly: {
       type: Boolean,
       default: true
     },
+    upload: {
+      type: Boolean,
+      default: false
+    },
     geoData: {
       type: [Object, String],
       default: ''
@@ -98,23 +117,26 @@ export default {
         this.geoJson = this.geoData
       }
       this.drawUpdate(this.geoJson)
-
+      this.edit()
+    },
+    edit () {
       // 开启编辑
       this.geoJson.features.forEach(item => {
         this.$refs.draw.drawEdit(item.geometry)
       })
     },
-    drawUpdate (data) {
+    drawUpdate (data, autoZoom = false) {
       this.geoJson = data
       this.position = data.features.map(item => item.geometry.coordinates[0])
-      this.$nextTick(() => {
-        // 二维数组转一维数组
-        // const bounds = this.position.reduce((a, b) => a.concat(b))
-        const bounds = this.position.flat()
-        mapSdk.fitLineBounds(bounds, {
-          padding: 100
+
+      if (this.autoZoom || autoZoom) {
+        this.$nextTick(() => {
+          const bounds = this.position.flat() // 二维数组转一维数组
+          mapSdk.fitLineBounds(bounds, {
+            padding: 100
+          })
         })
-      })
+      }
     },
     save () {
       let data = {
@@ -123,6 +145,15 @@ export default {
       }
       console.log(data)
       this.$emit('save', data)
+    },
+    clear () {
+      this.geoJson = ''
+      this.position = ''
+    },
+    getShp (shp) {
+      this.$refs.draw.drawDelete() // 先清空画布
+      this.drawUpdate(shp, true)
+      this.edit()
     }
   }
 }

package/src/package/draw/shpFile.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-button size="small"
+             class="upload"
+             type="warning">
+    shp上传
+    <input class="file"
+           type="file"
+           accept=".json"
+           @change="getFile" />
+  </el-button>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  },
+  methods: {
+    getFile (e) {
+      const file = e.target.files ? e.target.files[0] : ''
+      if (file) {
+        let reader = new FileReader()
+        reader.readAsText(file, 'UTF-8')
+        reader.onload = (f) => {
+          let json = f.target.result
+          if (json) {
+            json = JSON.parse(json)
+            this.$emit('upload', json)
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload {
+  position: relative;
+  input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    opacity: 0;
+  }
+}
+</style>

package/src/package/mapMarker.vue

@@ -6,6 +6,7 @@
 
 <script>
 import mapBoxGl from 'mapbox-gl'
+import { mapSdk } from '../index.js'
 
 export default {
   props: {
@@ -24,20 +25,23 @@ export default {
   },
   data () {
     return {
-      marker: ''
     }
   },
-  watch: {
-    map () {
+  mounted () {
+    this.createdMarker()
+  },
+  methods: {
+    createdMarker () {
+      let { map } = mapSdk
       let el = this.$refs.dom
-      const marker = this.marker = new mapBoxGl.Marker(el, { draggable: this.drag }).setLngLat(this.position).addTo(this.map)
+      const marker = new mapBoxGl.Marker(el, { draggable: this.drag }).setLngLat(this.position).addTo(map)
       if (this.drag) {
         marker.on('dragend', () => {
           const lngLat = marker.getLngLat()
           this.$emit('dragEnd', lngLat)
         })
       }
-    },
+    }
   }
 }
 </script>