From 9eb7274934e4e6cb178ebf549e6afaefbd91f282 Mon Sep 17 00:00:00 2001
From: QI_YUJIE <2878090898@qq.com>
Date: Mon, 6 Nov 2023 17:14:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map/MapGisLine.vue         |   6 +-
 src/components/Map/MapGisTagDTGCopy.vue   | 424 ++++++++++++++++++++++
 src/views/sunVillage_info/fixedAssets.vue |   4 +-
 src/views/sunVillage_info/resource.vue    |   2 +-
 4 files changed, 431 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Map/MapGisTagDTGCopy.vue

diff --git a/src/components/Map/MapGisLine.vue b/src/components/Map/MapGisLine.vue
index 8374e04b..5033dd4c 100644
--- a/src/components/Map/MapGisLine.vue
+++ b/src/components/Map/MapGisLine.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
 <!--    <p class="fuTitle">地块位置绘制</p>-->
-    <div id="full-screen-acceptance" style="width: 100%;height:45vh;">
+    <div id="full-screen-acceptance" style="width: 100%;height:73vh;">
         <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
         <div id='land-btn-wrap'>
             <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>-->
@@ -366,7 +366,9 @@ export default {
   color: #1E88C7;
   text-decoration: none;
   text-indent: 0;
-  line-height: 20px;
+  line-height: 30px;
+  font-size: 28px;
+  margin: 5px 0 5px;
 }
 #land-btn-wrap{
   position: relative;
diff --git a/src/components/Map/MapGisTagDTGCopy.vue b/src/components/Map/MapGisTagDTGCopy.vue
new file mode 100644
index 00000000..8524086b
--- /dev/null
+++ b/src/components/Map/MapGisTagDTGCopy.vue
@@ -0,0 +1,424 @@
+<template>
+  <div>
+    <div id="full-screen-acceptance" style="width: 100%;height:73vh;">
+      <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
+      <div id='land-btn-wrap' v-show="showBtn">
+        <input :id="this.drawPolygonMap" class="ant-btn ant-btn-red" type="button" value="标记"/>&nbsp;&nbsp;
+        <!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->
+        <input :id="this.drawResetMap" type="button" class="ant-btn ant-btn-red" value="重置标记"/>
+      </div>
+    </div>
+    <div id="info" style="display: none"></div>
+  </div>
+</template>
+
+<script>
+  import $ from "jquery";
+  import {entityGet, treeselect} from "@/api/agriculturalTrusteeship";
+  import Cookies from "js-cookie";
+
+  export default {
+    data() {
+      return {
+        closeMoule: null,
+        reduction: null,
+        uuidMap: this.guidProduct(),
+        drawPolygonMap: this.guidProduct(),
+        drawResetMap: this.guidProduct(),
+      };
+    },
+    props: ['theGeom','message','showBtn'],
+    methods: {
+      //地图加载
+      formSubmit(){
+        //父组件监听的名字必须是formSubmit
+        // 子组件调用父组件的方法并传参
+        if(this.closeMoule =="" || this.closeMoule == null){
+          this.$emit('formSubmit', null);
+        }else{
+          this.$emit('formSubmit', JSON.stringify(this.closeMoule));
+        }
+      },
+      guidProduct(){
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+          var r = Math.random() * 16 | 0,
+            v = c == 'x' ? r : (r & 0x3 | 0x8);
+          return v.toString(16);
+        });
+      },
+      //地图查看
+      pointPaceCountryDarw() {
+        //加载地图编辑
+        var that = this;
+        var map;
+        //var hc_land;
+        var draw; // global so we can remove it later
+        var vector_drawing;
+        //矢量标注样式设置函数，设置image为图标ol.style.Icon
+        function createLabelStyle() {
+          return new ol.style.Style({
+            image: new ol.style.Icon({
+              //设置图标偏移
+              anchor: [0.5, 1],
+              //标注样式的起点位置
+              anchorOrigin: "top-right",
+              //X方向单位：分数
+              anchorXUnits: "fraction",
+              //Y方向单位：像素
+              anchorYUnits: "pixels",
+              //偏移起点位置的方向
+              offsetOrigin: "top-right",
+              //透明度
+              opacity: 0.9,
+              //图片路径
+              src: require("../../assets/images/housesteadSurvey/mark.png"),
+            }),
+            text: new ol.style.Text({
+              textAlign: "center", //位置
+              textBaseline: "middle", //基准线
+              font: "normal 12px 微软雅黑", //文字样式
+              //text: "标注点", //文本内容
+              fill: new ol.style.Fill({
+                //文本填充样式（即文字颜色)
+                color: "#ff0000",
+              }),
+            }),
+            zIndex: 9999,
+          });
+        }
+        if (that.message != null && that.message != ""
+          && that.message != undefined) {
+          this.closeMoule = null;
+          document.getElementById(that.uuidMap).innerHTML = '';
+          var hc_land;
+          var draw; // global so we can remove it later
+          var vector_drawing;
+          var projection = new ol.proj.Projection({
+            //地图投影类型
+            code: "EPSG:3857",
+            units: "degrees",
+            //extent:extent
+          });
+
+          var aerial = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
+                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "卫星影像图",
+          });
+
+          var yingxzi = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "天地图文字标注--卫星影像图",
+          });
+          //加载地图
+          map = new ol.Map({
+            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
+            layers: [aerial, yingxzi],
+            projection: projection,
+            target: that.uuidMap,
+            view: new ol.View({
+              //center: ol.proj.fromLonLat([115.452752, 31.789033]),
+              zoom: 15.9,
+              minZoom: 5, //地图缩小限制
+              maxZoom: 18.3, //地图放大限制
+            }),
+          });
+          //图层查询定位开始 ---------start
+          if(this.message.substring(0,1) =="{"){
+            var theGeomMap =this.message.replace("Point", "MultiPolygon");
+            var pointLeft = theGeomMap.replace("[", "[[[[");
+            var pointRight = pointLeft.replace("]", "]]]]");
+            hc_land = new ol.layer.Vector({
+              title: "add Layer",
+              source: new ol.source.Vector({
+                projection: projection,
+                features: new ol.format.GeoJSON().readFeatures("{\n" +
+                  "    \"type\": \"Feature\",\n" +
+                  "    \"geometry\":" + pointRight + "}"),
+              }),
+              style: new ol.style.Style({
+                fill: new ol.style.Fill({
+                  //矢量图层填充颜色，以及透明度
+                  color: "rgba(204, 255, 204,0.3)",
+                }),
+                stroke: new ol.style.Stroke({
+                  //边界样式
+                  color: "#47c68f",
+                  width: 3,
+                }),
+              }),
+            });
+          }
+          if(this.message.substring(0,1) =="["){
+            var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [[[this.message.replaceAll("\"","")]]]});
+            var leftJoin = zbNew.replace("\"[","[");
+            var rightJoin = leftJoin.replace("\"]","]");
+            hc_land = new ol.layer.Vector({
+              title: "add Layer",
+              source: new ol.source.Vector({
+                projection: projection,
+                features: new ol.format.GeoJSON().readFeatures("{\n" +
+                  "    \"type\": \"Feature\",\n" +
+                  "    \"geometry\":" + rightJoin + "}"),
+              }),
+              style: new ol.style.Style({
+                fill: new ol.style.Fill({
+                  //矢量图层填充颜色，以及透明度
+                  color: "rgba(204, 255, 204,0.3)",
+                }),
+                stroke: new ol.style.Stroke({
+                  //边界样式
+                  color: "#47c68f",
+                  width: 3,
+                }),
+              }),
+            });
+          }
+          map.addLayer(hc_land);
+          var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
+          var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
+          var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
+          var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
+          //定位查询位置
+          var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
+          var newcenterFeature = new ol.Feature({
+            geometry: new ol.geom.Point(center), //几何信息
+            name: "标注点",
+          });
+          var sourceMapLook = new ol.source.Vector({wrapX: false});
+          vector_drawing = new ol.layer.Vector({
+            source: sourceMapLook,
+          });
+          map.addLayer(vector_drawing);
+          newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
+          sourceMapLook.addFeature(newcenterFeature);
+          map.getView().animate({
+            // 只设置需要的属性即可
+            center: center, // 中心点
+            zoom: 15.9, // 缩放级别
+            rotation: undefined, // 缩放完成view视图旋转弧度
+            duration: 1000, // 缩放持续时间，默认不需要设置
+          });
+          //图层查询定位结束 ---------end
+          //开始绘制地图
+          $("#"+this.drawPolygonMap).click(function () {
+            map.removeLayer(hc_land);
+            map.removeLayer(vector_drawing);
+            that.closeMoule = null;
+            var source = new ol.source.Vector({wrapX: false});
+            vector_drawing = new ol.layer.Vector({
+              source: source,
+            });
+            map.addLayer(vector_drawing);
+
+            function addInteraction() {
+              draw = new ol.interaction.Draw({
+                source: vector_drawing.getSource(),
+                type: "Point",
+              });
+              draw.on('drawend', function (evt) {
+                map.removeInteraction(draw);
+                var feature = evt.feature;
+                var geometry = feature.getGeometry();
+                var coordinate = geometry.getCoordinates();
+                var newFeature = new ol.Feature({
+                  geometry: new ol.geom.Point(coordinate), //几何信息
+                  //name: "标注点",
+                });
+                newFeature.setStyle(createLabelStyle()); //设置要素样式
+                source.addFeature(newFeature);
+                that.closeMoule = coordinate;
+                that.reduction = coordinate;
+                that.formSubmit();
+              });
+              map.addInteraction(draw);
+            }
+            addInteraction();
+          });
+          //清除画图鼠标点击事件
+          // $("#drawRemove").click(function () {
+          //   //map.addLayer(hc_land);
+          //   map.removeInteraction(draw);
+          //   //map.removeLayer(vector_drawing);
+          // });
+          //还原之前图层
+          $("#" + this.drawResetMap).click(function () {
+            if(that.reduction !=null) {
+              map.removeInteraction(draw);
+              map.removeLayer(vector_drawing);
+              map.addLayer(hc_land);
+              newcenterFeature = new ol.Feature({
+                geometry: new ol.geom.Point(center), //几何信息
+                //name: "标注点",
+              });
+              sourceMapLook = new ol.source.Vector({wrapX: false});
+              vector_drawing = new ol.layer.Vector({
+                source: sourceMapLook,
+              });
+              map.addLayer(vector_drawing);
+              newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
+              sourceMapLook.addFeature(newcenterFeature);
+              that.closeMoule = null;
+              that.formSubmit();
+            }
+          });
+        }
+        else{
+          this.closeMoule = null;
+          document.getElementById(that.uuidMap).innerHTML = '';
+          var projection = new ol.proj.Projection({
+            //地图投影类型
+            code: "EPSG:3857",
+            units: "degrees",
+            //extent:extent
+          });
+
+          var aerial = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
+                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "卫星影像图",
+          });
+
+          var yingxzi = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "天地图文字标注--卫星影像图",
+          });
+          //获取坐标是否存在
+          var Zb;
+          var latitude;
+          var longitude;
+          //开始定位当前位置
+          navigator.geolocation.getCurrentPosition(function(position) {
+            latitude = position.coords.latitude;// 获取纬度
+            longitude = position.coords.longitude;// 获取经度
+          });
+          treeselect().then(res=>{
+            if (res.code == 200) {
+              Zb = [res.data[0].lng,res.data[0].lat]
+              //加载地图
+              map = new ol.Map({
+                controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
+                layers: [aerial, yingxzi],
+                projection: projection,
+                logo: 'false',
+                target: that.uuidMap,
+                view: new ol.View({
+                  center: ol.proj.fromLonLat(Zb),
+                  //center: ol.proj.fromLonLat([115.452752, 31.789033]),
+                  zoom: 15.9,
+                  minZoom: 5, //地图缩小限制
+                  maxZoom: 18, //地图放大限制
+                }),
+              });
+            }
+          })
+
+          //图层查询定位结束 ---------end
+          //开始绘制地图
+          $("#"+this.drawPolygonMap).click(function () {
+            //map.removeLayer(hc_land);
+            map.removeLayer(vector_drawing);
+            that.closeMoule = null;
+            map.removeInteraction(draw);
+            var sourceMap = new ol.source.Vector({wrapX: false});
+            vector_drawing = new ol.layer.Vector({
+              source: sourceMap,
+            });
+            map.addLayer(vector_drawing);
+
+            function addInteraction() {
+              draw = new ol.interaction.Draw({
+                source: vector_drawing.getSource(),
+                type: "Point",
+              });
+              draw.on('drawend', function (evt) {
+                map.removeInteraction(draw);
+                $("#drawRemove").trigger('click');
+                var feature = evt.feature;
+                var geometry = feature.getGeometry();
+                var coordinate = geometry.getCoordinates();
+                var newFeature = new ol.Feature({
+                  geometry: new ol.geom.Point(coordinate), //几何信息
+                  //name: "标注点",
+                });
+                newFeature.setStyle(createLabelStyle()); //设置要素样式
+                sourceMap.addFeature(newFeature);
+                that.closeMoule = coordinate;
+                that.formSubmit();
+              });
+              map.addInteraction(draw);
+            }
+            addInteraction();
+
+          });
+          //清除画图鼠标点击事件
+          // $("#drawRemove").click(function () {
+          //   //map.addLayer(hc_land);
+          //   map.removeInteraction(draw);
+          //   //map.removeLayer(vector_drawing);
+          // });
+          //还原之前图层
+          $("#" + this.drawResetMap).click(function () {
+            map.removeInteraction(draw);
+            map.removeLayer(vector_drawing);
+            //map.addLayer(hc_land);
+            that.closeMoule = null;
+            that.formSubmit();
+          });
+        }
+      },
+    },
+    watch: {},
+  };
+</script>
+
+<style scoped>
+  #peaceCountryMap {
+    width: 100%;
+    height: 100%;
+  }
+  .fuTitle {
+    border-top: 1px solid #e9e9e9;
+    text-align: center;
+    padding: 10px 0px 0px 0px;
+    font-size: 18px;
+    color: #999;
+  }
+  .ant-btn-red {
+    position: relative;
+    display: inline-block;
+    background: #D0EEFF;
+    border: 1px solid #99D3F5;
+    border-radius: 4px;
+    padding: 4px 12px;
+    overflow: hidden;
+    color: #1E88C7;
+    text-decoration: none;
+    text-indent: 0;
+    line-height: 30px;
+    font-size: 28px;
+    margin: 5px 0 5px;
+  }
+  #land-btn-wrap{
+    position: relative;
+    width: 25%;
+    left: 75%;
+    bottom: 100%;
+    z-index: 2000;
+    padding-top: 5%;
+  }
+</style>
diff --git a/src/views/sunVillage_info/fixedAssets.vue b/src/views/sunVillage_info/fixedAssets.vue
index b2c3c8a1..e3db7c50 100644
--- a/src/views/sunVillage_info/fixedAssets.vue
+++ b/src/views/sunVillage_info/fixedAssets.vue
@@ -59,7 +59,7 @@
           </div>
        </van-popup>
 
-       <van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '32%' }" >
+       <van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '80%' }" >
           <div style="padding: 0;text-align: center">
             <MapGisTag ref="clickLoading" :showBtn="true" :message="theGeom" v-on:formSubmit="MapTag"></MapGisTag>
             <div style="margin-top: 1.5vh">
@@ -81,7 +81,7 @@
      updatePermanent
    } from "@/api/sunVillage_info/fixedAssets";
    import request from '@/utils/request'
-   import MapGisTag from "@/components/Map/MapGisTagDTG";
+   import MapGisTag from "@/components/Map/MapGisTagDTGCopy";
    export default {
      name: "certificateList",
      components: {
diff --git a/src/views/sunVillage_info/resource.vue b/src/views/sunVillage_info/resource.vue
index 237fbc7b..af8dcaf8 100644
--- a/src/views/sunVillage_info/resource.vue
+++ b/src/views/sunVillage_info/resource.vue
@@ -47,7 +47,7 @@
 <!--            <span class="xs">已经到底啦</span>-->
 <!--         </div>-->
 
-       <van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '52%' }" >
+       <van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '80%' }" >
          <div style="padding: 0;text-align: center">
            <MapGisLine ref="clickLoading" :message="theGeom" v-on:formSubmit="MapTag"></MapGisLine>
            <div style="margin-top: 1.5vh">