flat: 地图添加

src/components/map/selectLocation2.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="app-content">
-    <div id="map" style="width: 100%;height: 100%;"></div>
+    <el-input
+      v-if="type !== 'view'"
+      :placeholder="placeholder"
+      clearable
+      v-model="addressLocation"
+      @input="inputAddress"
+    ></el-input>
+    <div class="app-map" id="map" style="width: 100%;height: 300px;"></div>
   </div>
 </template>
 
@@ -45,14 +52,18 @@ import {
   GetFeaturesByGeometryParameters
 } from '@supermap/iclient-ol';
 
+console.log(process.env.VUE_APP_SUPPER_MAP)
 export default {
   name: "uMapView",
   props: {
+    placeholder: String,
     latitude: {
-      required: true,
+      required: false,
+      default: 31.126855,
     },
     longitude: {
-      required: true,
+      required: false,
+      default: 104.397894,
     },
     zoom: {
       type: Number,
@@ -88,6 +99,19 @@ export default {
       type: Boolean,
       required: false,
       default: false,
+    },
+    isCanEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    address: {
+      required: false,
+      default: '',
+    },
+    type: {
+      required: false,
+      default: 'custom',
     }
   },
   data() {
@@ -105,10 +129,14 @@ export default {
       overlay: null,
       // 控制参数
       isShowToolTip: false,
+      addressLocation: ''
     };
   },
   mounted() {
     this.initMap()
+    if (this.address) {
+      this.addressLocation = this.address
+    }
     if (this.flagTip) {
       this.createHelpTooltip()
     }
@@ -162,9 +190,18 @@ export default {
         }
         this.$emit('regionchange', e.pixel)
       });
-      this.map.on('singleclick', (e) => {
-        this.$emit('clickMap', this.coordinate)
-      });
+      this.ceateMarker([this.longitude, this.latitude])
+      if (this.type !== 'view') {
+        this.map.on('singleclick', (e) => {
+          this.$emit('addAddress', {
+            address: this.addressLocation,
+            lng: e.coordinate[0],
+            lat: e.coordinate[1]
+          })
+          this.ceateMarker(e.coordinate)
+        });
+      }
+
 
       // if (this.open) {
       //   this.addFeature([{
@@ -228,6 +265,7 @@ export default {
         POP: 1,
         CAPITAL: 'test'
       });
+      this.addPointsSource.clear()
       // 将特征添加到矢量图层
       this.addPointsSource.addFeature(pointFeature);
       // 确保更新地图视图以显示新的标点
@@ -314,6 +352,11 @@ export default {
         offset: [-30, 20],
         positioning: 'center-left'
       });
+    },
+    inputAddress(val) {
+      if (this.type !== 'view') {
+        this.$emit('input', val)
+      }
     }
   }
 }
@@ -322,7 +365,7 @@ export default {
 <style scoped>
 .app-content {
   width: 100%;
-  height: 300px;
+  height: fit-content;
 }
 
 .editPane {