地块添加修改显示天地图

guoshilong

2022-09-02 bcb6af1fa7973001a43bb08a2d7a8f96e81bc5e5

地块添加修改显示天地图

 src/components/map/mainInThere.vue

@@ -113,7 +113,12 @@
        //面实例
        zIndex: 22,
        source: new VectorSource()
      })
      }),
      urls:[
        "http://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0",
        "http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0"
      ],
      imgSrc:''
    };
  },
  computed: {
@@ -134,9 +139,21 @@
        new OlLayerTile({
          zIndex: 4,
          title: "影像",
          source: new XYZ({
            url:
              "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
          source: 
          new XYZ({
            // url:
            //   "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
            url:this.urls[0]
          })
        }),
        new OlLayerTile({
          zIndex: 5,
          title: "区划",
          source: 
          new XYZ({
            // url:
            //   "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
            url:this.urls[1],
          })
        })
      ],
@@ -155,8 +172,8 @@

    var view = ol2d.getView();
    this.source = new VectorSource({ wrapX: false });
    view.setCenter([115.9032747077233, 28.67433116990186]);

    // view.setCenter([115.9032747077233, 28.67433116990186]);
    view.setCenter([116.56705776, 27.42386903]);
    this.view = view;
  },
  methods: {

 src/store/getters.js

@@ -22,6 +22,7 @@
    menu: state => state.user.menu,
    menuId: state => state.user.menuId,
    menuAll: state => state.user.menuAll,
    drawMapUrlBase: state => state.user.drawMapUrlBase,
    logsList: state => state.logs.logsList,
    logsLen: state => state.logs.logsList.length || 0,
    logsFlag: (state, getters) => getters.logsLen === 0,

 src/store/modules/user.js

@@ -51,7 +51,8 @@
    menuAll: getStore({name: 'menuAll'}) || [],
    token: getStore({name: 'token'}) || '',
    refreshToken: getStore({name: 'refreshToken'}) || '',
    $farmId: 0
    $farmId: 0,
    drawMapUrlBase: 'http://127.0.0.1:8080'
  },
  actions: {
    loginInfoByToken({commit}) {

 src/views/farmplant/farmplant.vue

@@ -30,7 +30,7 @@
                >删 除</el-button>
            </template>
            <template slot-scope="{ type, size, row }" slot="menu">
              <el-button icon="el-icon-check" :size="size" :type="type" @click="recovery(row)">采 收</el-button>
              <el-button :disabled="row.plantingWay == 2" icon="el-icon-check" :size="size" :type="type" @click="recovery(row)">采 收</el-button>
              <!-- <el-button icon="el-icon-error" :size="size" :type="type" @click="over(row.id)">结 束</el-button> -->
              <el-button icon="el-icon-error" :size="size" :type="type" @click="getData(row)">结 束</el-button>


 src/views/land/landAdd.vue

@@ -4,15 +4,21 @@
        :modal-append-to-body="false"
        :append-to-body="true"
        :close-on-click-modal="false"
        width="60%"
        width="80%"
        :visible.sync="visible"
        top="10vh"
    >
        <avue-form ref="form" v-model="form" :option="option" @submit="submit">
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="line">
                <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
                <!-- <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> -->
                
            </template>
        </avue-form>
        <div class="map">
            <iframe :src="url" frameborder="0" width="100%" height="100%"  ></iframe>
        </div>

    </el-dialog>
</template>

@@ -23,7 +29,10 @@
import { getDeptTree } from "@/api/system/dept"
import { add } from "@/api/land/land"
import website from '@/config/website'
import domtoimage from 'dom-to-image'
import h2 from 'html2canvas'
import getMapDataInThere from "./getMapDataInThere.vue"
// import canvas2Image from 'canvas2Image'

export default {
    components: {
@@ -36,6 +45,7 @@
            option: {
                emptyBtn: false,
                submitText: "保存",
                submitBtn:false,
                gutter: 30,
                column: [
                    {
@@ -99,26 +109,49 @@
                        dataType: "number",
                        span: 6,
                    },
                    {
                        label: "地块展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        span: 24,
                        formslot: true,
                    }
                    // {
                    //     label: "地块展示",
                    //     labelWidth: "0",
                    //     prop: "line",
                    //     className: "mapClass",
                    //     span: 24,
                    //     formslot: true,
                    // }
                ],
            },
            url:"",
            landUrl:"",
            polygon:[],
            area:"",
            visible: false,
        }
    },
    created() {
        this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage"
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons","$farmId"]),
        ...mapGetters(["userInfo", "permission", "polygons","$farmId", "drawMapUrlBase"]),
    },
    watch:{
        "landUrl":{
            handler(newVal,oldVal){
                this.$refs.form.submit()
            }
        }
    },
    mounted () {
        this.initData(this.userInfo.tenant_id)
        window.addEventListener('message', this.handleMessage)
    },
    methods: {
        handleMessage(event) {
            if(event.type){
                var obj = event.data
                this.polygon = obj.polygons
                this.landUrl =  obj.url
                this.area = obj.area.toFixed(2) 
            }
        },
        initData (tenantId) {
            getFarmList().then(res => {
                const column = this.findObject(this.option.column, "farmId")
@@ -135,17 +168,32 @@
        },
        // 表单提交
        submit (row, done) {
            console.log(row)
            row['deptId'] = this.userInfo.dept_id
            // row.farmId = this.farm.id


            var that = this
            if (this.polygons.length == 0) {
            var poly = []
            if(this.polygon.length !=0 ){
                this.polygon.forEach((e)=>{
                    poly.push({
                        lng:e[0],
                        lat:e[1]
                    })
                })
                this.polygon = poly
            }


            if (this.polygon.length == 0) {
                //没有面的数据
                // this.$refs.getMapData.isCheck = true
                // loading()
            } else {
                //如果有值，空间坐标转换
                let pol = this.polygons
                let polLength = this.polygons.length - 1
                let pol = this.polygon
                let polLength = this.polygon.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
@@ -156,26 +204,59 @@
                //设置坐标点
                row.userId = this.userInfo.user_id
                row.landRange = usePolygons

            }

            // if (this.polygons.length == 0) {
            //     //没有面的数据
            //     // this.$refs.getMapData.isCheck = true
            //     // loading()
            // } else {
            //     //如果有值，空间坐标转换
            //     let pol = this.polygons
            //     let polLength = this.polygons.length - 1
            //     let usePolygons = ""
            //     for (let k in pol) {
            //         usePolygons += pol[k].lng + "," + pol[k].lat
            //         if (k != polLength) {
            //             usePolygons += ";"
            //         }
            //     }
            //     //设置坐标点
            //     row.userId = this.userInfo.user_id
            //     row.landRange = usePolygons
            //     console.log(row.landRange)
            // }
            


            row['url'] = this.landUrl
            row['landArea'] = this.area
            add(row).then(() => {
                that.$emit("refreshOnLoad")
                that.$refs.form.resetFields()
                that.form.landUnit = "0"
                that.visible = false
                this.$message({
                    type: "success",
                    message: "操作成功!"
                    that.$emit("refreshOnLoad")
                    that.$refs.form.resetFields()
                    that.form.landUnit = "0"
                    that.visible = false
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    done()
                }, error => {
                    // loading()
                    window.console.log(error)
                })
                done()
            }, error => {
                // loading()
                window.console.log(error)
            })
            
        },
        
        setMapData (val) {
            this.LineData = val[0]
            this.PointData = val[1]
        },

        showMap(){
            this.mapVisible = true
        }
    },
};
</script>
@@ -191,4 +272,8 @@
    top: 10px;
    left: 90px;
}

.map{
    height: 450px;
}
</style>

 src/views/land/landUpdate.vue

@@ -4,15 +4,20 @@
        :modal-append-to-body="false"
        :append-to-body="true"
        :close-on-click-modal="false"
        width="60%"
        width="80%"
        top="10vh"
        :visible.sync="visible"
    >
        <avue-form ref="form" v-model="form" :option="option" @submit="submit">
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="line">
                <getMapDataInThere :currentPolygons="form.landRange" ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
                <!-- <getMapDataInThere :currentPolygons="form.landRange" ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> -->
                
            </template>
        </avue-form>
        <div class="map">
            <iframe :src="url" frameborder="0" width="100%" height="100%"  ></iframe>
        </div>
    </el-dialog>
</template>

@@ -37,6 +42,7 @@
            option: {
                emptyBtn: false,
                submitText: "保存",
                submitBtn:false,
                gutter: 30,
                farmName:'',
                column: [
@@ -98,27 +104,49 @@
                        dataType: "number",
                        span: 6,
                    },
                    {
                        label: "地块展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        span: 24,
                        formslot: true,
                    }
                    // {
                    //     label: "地块展示",
                    //     labelWidth: "0",
                    //     prop: "line",
                    //     className: "mapClass",
                    //     span: 24,
                    //     formslot: true,
                    // }
                ],
            },
            url:"",
            landUrl:"",
            polygon:[],
            area:"",
            visible: false,
        }
    },
    watch:{
        "landUrl":{
            handler(newVal,oldVal){
                this.$refs.form.submit()
            }
        }
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
        ...mapGetters(["userInfo", "permission", "polygons","drawMapUrlBase"]),
    },
    mounted () {
        this.initData(this.userInfo.tenant_id)
        window.addEventListener('message', this.handleMessage)
    },
    methods: {
        handleMessage(event) {
            if(event.type){
                var obj = event.data
                this.polygon = obj.polygons
                this.landUrl =  obj.url
                this.area = obj.area.toFixed(2) 

            }
        },
        initData (tenantId) {
            
            const data = {
                deptId: this.userInfo.dept_id
            }
@@ -129,6 +157,7 @@
        },
        //初始化
        init () {
            this.url = this.drawMapUrlBase+"/revamp?type=1&status=manage&position="+this.$route.query.landRange
            //清空面的数据
            this.$store.commit('clear_polygon')
            //计算当前时间
@@ -145,22 +174,35 @@

            this.form.landRange = this.form.landRange.replace(/POLYGON\(\(/g, '')
            this.form.landRange = this.form.landRange.replace(/\)\)/g, '')
            this.form.landRange = this.form.landRange.split(',')
            // this.form.landRange = this.form.landRange.split(',')
            this.form.landRange = this.form.landRange.replaceAll(',',';')
            this.form.landRange = this.form.landRange.replaceAll(' ',',')




        },
        // 表单提交
        submit (row, loading) {
            row['deptId'] = this.userInfo.dept_id
            var that = this
            if (this.polygons.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
                loading()
                return
            } else {


            var poly = []
            if(this.polygon.length !=0 ){
                this.polygon.forEach((e)=>{
                    poly.push({
                        lng:e[0],
                        lat:e[1]
                    })
                })
                this.polygon = poly
            }

            if (this.polygon.length != 0) {
                //如果有值，空间坐标转换
                let pol = this.polygons
                let polLength = this.polygons.length - 1
                let pol = this.polygon
                let polLength = this.polygon.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
@@ -171,8 +213,11 @@
                //设置坐标点
                row.userId = this.userInfo.user_id
                row.landRange = usePolygons
            }

                row['url'] = this.landUrl
                row['landArea'] = this.area

            }
            update(row).then(() => {
                that.$emit("refreshOnLoad")
                that.$refs.form.validate((vaild,done)=>{
@@ -183,19 +228,21 @@
                          message: "操作成功!"
                        })
                      done()
                      this.form.landRange = this.$route.query.landRange
                      this.form.dica = row.$landUnit
                      this.form.dic = row.$landType
                      this.form.deptname = row.$farmId

                      var arr = [];
                      this.$store.state.tags.tagList.forEach((item) => {
                        if (item.label != "地块详情") {
                          arr.push(item);
                        }
                      });
                      this.$store.state.tags.tagList = arr;
                      this.$router.replace({  path: `/LandDetail`, query: this.form  });
                    //   this.form.landRange = this.$route.query.landRange
                    //   this.form.dica = row.$landUnit
                    //   this.form.dic = row.$landType
                    //   this.form.deptname = row.$farmId

                    //   var arr = [];
                    //   this.$store.state.tags.tagList.forEach((item) => {
                    //     if (item.label != "地块详情") {
                    //       arr.push(item);
                    //     }
                    //   });
                    //   this.$store.state.tags.tagList = arr;
                    //   this.$router.replace({  path: `/land`, query: this.form  });
                    this.$router.go(-1)
                    }

                })
@@ -224,4 +271,7 @@
    top: 10px;
    left: 90px;
}
.map{
    height: 450px;
}
</style>

 src/views/wel/land.vue

@@ -4,19 +4,25 @@
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    width="80%"
    top="10vh"
    :visible.sync="visible"
  >
    <avue-form ref="form" v-model="form" :option="option" @submit="submit">
      <!-- 地图插入 -->
      <template slot-scope="{ type, disabled }" slot="line">
        <getMapDataInThere
        <!-- <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
        ></getMapDataInThere> -->
        
      </template>
    </avue-form>

    <div class="map">
      <iframe :src="url" frameborder="0" width="100%" height="100%"  ></iframe>
    </div>
  </el-dialog>
</template>

@@ -39,6 +45,7 @@
      option: {
        emptyBtn: false,
        submitText: "保存",
        submitBtn:false,
        gutter: 30,
        column: [
          {
@@ -96,26 +103,49 @@
            dataType: "number",
            span: 6,
          },
          {
            label: "地块展示",
            labelWidth: "0",
            prop: "line",
            className: "mapClass",
            span: 24,
            formslot: true,
          }
          // {
          //   label: "地块展示",
          //   labelWidth: "0",
          //   prop: "line",
          //   className: "mapClass",
          //   span: 24,
          //   formslot: true,
          // }
        ],
      },
      url:"",
      landUrl:"",
      polygon:[],
      area:"",
      visible: false,
    };
  },
  created(){
    this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage"
  },
  watch:{
      "landUrl":{
          handler(newVal,oldVal){
              this.$refs.form.submit()
          }
      }
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons","$farmId"]),
    ...mapGetters(["userInfo", "permission", "polygons","$farmId","drawMapUrlBase"]),
  },
  mounted() {
    this.initData(this.userInfo.tenant_id);
    window.addEventListener('message', this.handleMessage)
  },
  methods: {
    handleMessage(event) {
      if(event.type){
          var obj = event.data
          this.polygon = obj.polygons
          this.landUrl =  obj.url
          this.area = obj.area.toFixed(2) 
      }
    },
    initData(tenantId) {
      const data = {
        deptId:this.userInfo.dept_id
@@ -134,27 +164,63 @@
    // 表单提交
    submit(row,done) {
      var that = this;
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        done();
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygons;
        let polLength = this.polygons.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        row.userId = this.userInfo.user_id;
        row.landRange = usePolygons;


      // if (this.polygons.length == 0) {
      //   //没有面的数据
      //   this.$refs.getMapData.isCheck = true;
      //   done();
      // } else {
      //   //如果有值，空间坐标转换
      //   let pol = this.polygons;
      //   let polLength = this.polygons.length - 1;
      //   let usePolygons = "";
      //   for (let k in pol) {
      //     usePolygons += pol[k].lng + "," + pol[k].lat;
      //     if (k != polLength) {
      //       usePolygons += ";";
      //     }
      //   }
      //   //设置坐标点
      //   row.userId = this.userInfo.user_id;
      //   row.landRange = usePolygons;
      // }
      var poly = []
      if(this.polygon.length !=0 ){
          this.polygon.forEach((e)=>{
              poly.push({
                  lng:e[0],
                  lat:e[1]
              })
          })
          this.polygon = poly
      }


      if (this.polygon.length == 0) {
          //没有面的数据
          // this.$refs.getMapData.isCheck = true
          // loading()
      } else {
          //如果有值，空间坐标转换
          let pol = this.polygon
          let polLength = this.polygon.length - 1
          let usePolygons = ""
          for (let k in pol) {
              usePolygons += pol[k].lng + "," + pol[k].lat
              if (k != polLength) {
                  usePolygons += ";"
              }
          }
          //设置坐标点
          row.userId = this.userInfo.user_id
          row.landRange = usePolygons
      }

      row['tenantId'] = this.userInfo.tenant_id;
      row['deptId'] = this.userInfo.dept_id;
      row['url'] = this.landUrl
      row['landArea'] = this.area
      add(row).then(() => {
        that.$refs.form.resetFields();
        this.form.landUnit = "0"
@@ -189,4 +255,7 @@
  top: 10px;
  left: 90px;
}
.map{
    height: 450px;
}
</style>