管线设备坐标拾取 gengdidi

gassafety-web/src/components/mapDialog/index.vue → gassafety-web/src/components/mapDialog/checkDeviceLoaction.vue

@@ -23,10 +23,11 @@
       <el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button
       >
     </el-row>
-    <div style="width: 47vw; height: 57vh" id="container"></div>
+    <div style="width: 47vw; height: 65vh" id="container"></div>
 
     <el-col :span="8" class="button">
-      <el-input id="ss" placeholder="输入地址" v-model="keyWorld"  ></el-input><el-button size="small" type="primary" icon="el-icon-search" @click="search" style="position: fixed;margin-left: 3px;">搜索</el-button>
+      <el-input id="ss" placeholder="输入地址" v-model="keyWorld"  ></el-input>
+      <el-button size="small" type="primary" icon="el-icon-search" @click="search" style="position: fixed;margin-left: 3px;">搜索</el-button>
     </el-col>
 
   </el-dialog>
@@ -47,51 +48,59 @@
         keyWorld: ""
       }
     },
-    mounted(){
-      let that = this;
-      that.$nextTick(() => {
-        //初始化地图
-        let map = new AMap.Map("container", {
-          center: [114.72995, 38.37417],
-          // resizeEnable: true,
-          disableSocket: true,
-          viewMode: "3D",
-          showLabel: true,
-          pitch: 8,
-          zoom: 10
-        });
-        map.setFitView();
+    watch:{
+      dialogTableVisible:{
+        handler(value) {
+          if(value){
+            let that = this;
+            that.$nextTick(() => {
+              //初始化地图
+              let map = new AMap.Map("container", {
+                center: [114.72995, 38.37417],
+                // resizeEnable: true,
+                disableSocket: true,
+                viewMode: "3D",
+                showLabel: true,
+                pitch: 8,
+                zoom: 12
+              });
+              var overlays = [];
+              //坐标回显
+              if (typeof that.slng == "number" && that.slng != 0) {
+                that.lnglat.lng = that.slng;
+                that.lnglat.lat = that.slat;
+                let marker = new AMap.Marker({
+                  position: [that.slng,that.slat]
+                });
+                marker.setMap(map);
+                map.setCenter([that.slng,that.slat]);
+                overlays.push(marker);
+              }
 
-        //坐标回显
-        if (typeof that.slng == "number" && that.slng != 0) {
-          that.lnglat.lng = that.slng;
-          that.lnglat.lat = that.slat;
-          let marker = new AMap.Marker({
-            position: [that.slng,that.slat]
-          });
-          marker.setMap(map);
-          map.setCenter([that.slng,that.slat]);
-        }
+              //点击获取坐标点
+              var mouseTool = new AMap.MouseTool(map);
+              //监听draw事件可获取画好的覆盖物
+              mouseTool.on('draw',function(e){
+                map.remove(overlays);
+                overlays.push(e.obj);
+                that.lnglat.lat = e.obj._position.lat;
+                that.lnglat.lng = e.obj._position.lng;
+              })
+              that.draw(mouseTool);
 
-        //点击获取坐标点
-        var mouseTool = new AMap.MouseTool(map);
-        //监听draw事件可获取画好的覆盖物
-        var overlays = [];
-        mouseTool.on('draw',function(e){
-          map.remove(overlays);
-          overlays.push(e.obj);
-          that.lnglat.lat = e.obj._position.lat;
-          that.lnglat.lng = e.obj._position.lng;
-        })
-        that.draw(mouseTool);
+              //搜索功能
+              AMap.plugin(["AMap.AutoComplete","AMap.PlaceSearch"], function() {
+                that.placeSearch = new AMap.PlaceSearch({
+                  map: map
+                });
+              });
+            })
+          }
+        },
+        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
+        immediate: true
 
-        //搜索功能
-        AMap.plugin(["AMap.AutoComplete","AMap.PlaceSearch"], function() {
-          that.placeSearch = new AMap.PlaceSearch({
-            map: map
-          });
-        });
-      })
+      }
     },
     methods:{
       confirmFun(){
@@ -123,7 +132,7 @@
 
   .button{
     position: relative;
-    top: -393px;
+    top: -453px;
     left: 14px;
   }
 

gassafety-web/src/components/mapDialog/checkPipeLineLocation.vue

+<template>
+  <el-dialog
+    title="拾取坐标"
+    :visible.sync="dialogTableVisible"
+    :show-close="false"
+    :close-on-click-modal="false"
+  >
+    <div style="postion:relative">
+      <el-row :span="8" class="button">
+        <el-input id="ss" placeholder="输入地址" v-model="keyWorld"  ></el-input>
+        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+      </el-row>
+    </div>
+    <div style="" id="container" ref="elD"></div>
+    <el-row class="lt">
+      <el-button type="primary" size="small" @click="confirmFun">确定</el-button>
+      <el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button>
+    </el-row>
+
+  </el-dialog>
+</template>
+<script>
+  import gaodeMap from "./js/gaodeMapDialog.js";
+  import { getString } from "@/utils/gassafety.js";
+  export default {
+    props: {
+      dialogTableVisible: {
+        type:Boolean,
+      },
+      slat: 0,
+      slng: 0,
+      str:{
+        type:String,
+      }
+
+    },
+    data(){
+      return{
+        lnglat: {
+          lat: "",
+          lng: ""
+        },
+        keyWorld: "",
+        map:{},
+        div:null,
+
+      }
+    },
+    watch:{
+      dialogTableVisible:{
+        handler(value) {
+          if(value){
+            window.addEventListener("click", this.barClose);
+            this.$nextTick(() => {
+              this.map = new gaodeMap("石家庄");
+              this.map.addMouseTool();
+              if(this.str){
+                this.map.addPolyline([{coordinates:this.str}]);
+              }
+
+              this.map.lineType = 1;
+              if (this.map.newLineObj == null) {
+                this.map.createNewLine();
+              }
+
+            })
+          }else{
+             console.log("清除事件")
+            window.removeEventListener("click", this.barClose);
+          }
+        },
+        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
+        immediate: true
+
+      }
+    },
+    methods:{
+      confirmFun(){
+        console.log("path",this.map.newLineObj.getPath())
+        const pathArr = this.map.newLineObj.getPath().map(item=>{
+          return [
+            item.lng,item.lat
+          ]
+        })
+        const str = getString(pathArr)
+        this.$emit('confirmFun',str);
+        this.$emit('dialogcancelFun');
+      },
+      search(){
+        this.placeSearch.search(this.keyWorld);  //关键字查询查询
+      },
+      barClose() {
+        console.log("window");
+        this.deviceType = false;
+        // 关闭当前线条的infowindow
+        this.map.closeInfoWindow();
+        this.map.lineFlag = false;
+      },
+    },
+
+    beforeDestroy() {
+    },
+  }
+
+</script>
+
+<style scoped lang="scss">
+  .dialog{
+    position:relative;
+  }
+  #container{
+    width: 100%;
+    height: 500px;
+  }
+  .lt{
+    margin-top: 15px;
+    text-align: right;
+  }
+  .lt .el-input {
+    width: 120px;
+    margin-right: 15px;
+    display: inline-block;
+  }
+
+  .button{
+    position: absolute;
+    top: 90px;
+    left: 30px;
+    z-index: 999;
+  }
+
+  .button .el-input{
+    width: 180px;
+    margin-right: 10px;
+    display: inline-block;
+  }
+</style>