nsgk_mobile/src/components/Map/MapGisDrawing.vue

<template>
  <div>
    <p class="fuTitle">地块位置绘制</p>
    <div id="full-screen-acceptance" style="width: 100%;height:45vh;position:relative;">
        <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>-->
            <!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->
            <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" type="primary">重置图层</el-button>-->
            <input :id="this.positioningMap" type="button" class="ant-btn ant-btn-red" value="图层定位"/>&nbsp;&nbsp;
            <input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;
            <input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/>
        </div>
      </div>
    <div id="info" style="display: none"></div>
  </div>
</template>

<script>
  import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
  import {getGeoServerConfigKey} from "@/api/system/config";
import $ from "jquery";

export default {
  components: {
    getQueryLand,
  },
  data() {
    return {
      closeMoule: null,
      uuidMap: this.guidProduct(),
      drawingPolygonMap: this.guidProduct(),
      drawingResetMap: this.guidProduct(),
      positioningMap: this.guidProduct(),
      newZb: null,
      newGeom: null,
      mapData: null,
      //地图服务地址
      mapGeoServerUrl:"",
    };
  },
  props: ['theGeom','message'],
  // created() {
  //   // setTimeout(() => {
  //   //   this.drawingPaceCountryDarw();
  //   // }, 100);
  // },
  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);
      });
    },
    //地图查看
    drawingPaceCountryDarw() {
/*      console.log(this.message);*/
      //加载地图编辑
      var that = this;
      var map;
      //var hc_land;
      var draw; // global so we can remove it later
      var vector_drawing;
      console.log(that.message);
      // if(that.$cookies.get("item").backMapZjdAData.theGeom !=null && that.$cookies.get("item").backMapZjdAData.theGeom !=""
      //   && that.$cookies.get("item").backMapZjdAData.theGeom.substring(0,1) =="["){
      //   console.log(that.$cookies.get("item"));
      //   that.message = that.$cookies.get("item").backMapZjdAData.theGeom;
      // }
      getGeoServerConfigKey().then(response => {
        that.mapGeoServerUrl = response.msg;
      if (that.message != null && that.message != ""
        && that.message != undefined) {
        document.getElementById(that.uuidMap).innerHTML = '';
        var hc_land;
        var hc_landFuther;
        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://t{0-7}.tianditu.com/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: "http://t{0-7}.tianditu.com/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,
            minZoom: 5, //地图缩小限制
            maxZoom: 18.3, //地图放大限制
          }),
        });
        that.mapData= that.message;
        var zjdTc;
        var zrzTc;
        var fsssTc;
        map.removeLayer(zrzTc);
        map.removeLayer(zjdTc);
        map.removeLayer(fsssTc);
        //宅基地图层查询开始 ------------------start
        var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + that.$cookies.get("item").zjddm + "'";
        zjdTc= new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: that.mapGeoServerUrl +"/geoserver/zjd_dc/wms",
            params: {
              LAYERS: 'zjd_dc:t_house_survey_zjdzd',
              TILED: true,
              cql_filter: cql_filter_all,
              SRID: 3857,
            },
          }),
        });
        map.addLayer(zjdTc);
        //宅基地图层查询开始 ------------------start
        //自然幢图层查询开始 ------------------start
        zrzTc= new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms",
            params: {
              LAYERS: 'zjd_dc:t_house_survey_zrz',
              TILED: true,
              cql_filter: cql_filter_all,
              SRID: 3857,
            },
          }),
        });
        map.addLayer(zrzTc);
        //自然幢图层查询结束 ------------------end

        //附属设施图层查询开始 ------------------start
        fsssTc= new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms",
            params: {
              LAYERS: 'zjd_dc:t_house_survey_fsss',
              TILED: true,
              cql_filter: cql_filter_all,
              SRID: 3857,
            },
          }),
        });
        map.addLayer(fsssTc);
        //附属设施图层查询结束 ------------------end
        //图层查询定位开始 ---------start
        if(this.message.substring(0,1) =="{"){
          //that.newHt ="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\":" + this.message + "}"),
            }),
            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]); //获取边界区域的中心位置
          map.getView().animate({
            // 只设置需要的属性即可
            center: center, // 中心点
            zoom: 17.9, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000, // 缩放持续时间，默认不需要设置
          });
          // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());
          // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);
          // map.getView().setResolution(resolution);
        } else if(this.message.substring(0,1) =="["){
          //that.newHt ="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]); //获取边界区域的中心位置
          map.getView().animate({
            // 只设置需要的属性即可
            center: center, // 中心点
            zoom: 16.9, // 缩放级别
            rotation: undefined, // 缩放完成view视图旋转弧度
            duration: 1000, // 缩放持续时间，默认不需要设置
          });
          // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());
          // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);
          // map.getView().setResolution(resolution);
        } else {

        }
        //图层查询定位结束 ---------end
        //开始绘制地图
        $("#"+this.drawingPolygonMap).click(function () {
          that.newGeom = 1;
          map.removeLayer(hc_land);
          map.removeLayer(vector_drawing);
          //that.closeMoule = null;
          map.removeInteraction(draw);
          //var source = new ol.source.Vector({wrapX: false});
          vector_drawing = new ol.layer.Vector({
            source: new ol.source.Vector(),
          });
          map.addLayer(vector_drawing);

          function addInteraction() {
            draw = new ol.interaction.Draw({
              source: vector_drawing.getSource(),
              type: "Polygon"
            });
            draw.on('drawend', function (evt) {
              var feature = evt.feature;
              var geometry = feature.getGeometry();
              var coordinate = geometry.getCoordinates();
              if(coordinate !="" && coordinate !=null){
                //map.addLayer(vector_drawing);
                map.removeInteraction(draw);
              }
              that.closeMoule = coordinate;
              that.formSubmit();
            });
            map.addInteraction(draw);
          }

          addInteraction();
        });
        //清除画图鼠标点击事件
        // $("#drawRemove").click(function () {
        //   //map.addLayer(hc_land);
        //   map.removeInteraction(draw);
        //   //map.removeLayer(vector_drawing);
        // });
        //还原之前图层
        $("#"+this.drawingResetMap).click(function () {
          that.newGeom = 2;
          if(that.closeMoule !=null) {
              map.addLayer(hc_land);
              map.removeInteraction(draw);
              map.removeLayer(vector_drawing);
            that.formSubmit();
          }
        });
        //定位当前绘制图层
        $("#"+this.positioningMap).click(function () {
          //图层查询定位开始 ---------start
          console.log(that.message);
          console.log(that.closeMoule);
          console.log(that.newGeom);
          // var dwmap;
          // if(that.closeMoule != null && that.closeMoule !=""){
          //   dwmap = JSON.stringify(that.closeMoule);
          // }else {
          //   console.log(that.newGeom);
          //   dwmap = JSON.stringify(that.newGeom);
          // }
          var deMap = JSON.stringify(that.closeMoule);
          if(that.newGeom == 1){
          if(deMap.substring(0,1) =="{"){
            //that.newHt ="1";
            // var theGeomMap =this.message.replace("Point", "MultiPolygon");
            // var pointLeft = theGeomMap.replace("[", "[[[[");
            // var pointRight = pointLeft.replace("]", "]]]]");
            hc_landFuther = 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\":" + deMap + "}"),
              }),
              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_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;
            var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;
            var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;
            var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;
            //定位查询位置
            var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
            map.getView().animate({
              // 只设置需要的属性即可
              center: center, // 中心点
              zoom: 17.9, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
            // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());
            // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);
            // map.getView().setResolution(resolution);
          } else if(deMap.substring(0,1) =="[") {
            //that.newHt ="1";
            var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [deMap.replaceAll("\"", "")]});
            var leftJoin = zbNew.replace("\"[", "[");
            var rightJoin = leftJoin.replace("\"]", "]");
            hc_landFuther = 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_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;
            var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;
            var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;
            var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;
            //定位查询位置
            var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
            map.getView().animate({
              // 只设置需要的属性即可
              center: center, // 中心点
              zoom: 16.9, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
          }
          } else {
            console.log(that.mapData);
            if(that.mapData.substring(0,1) =="{"){
              //that.newHt ="1";
              // var theGeomMap =this.message.replace("Point", "MultiPolygon");
              // var pointLeft = theGeomMap.replace("[", "[[[[");
              // var pointRight = pointLeft.replace("]", "]]]]");
              hc_landFuther = 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\":" + that.mapData + "}"),
                }),
                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_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;
              var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;
              var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;
              var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;
              //定位查询位置
              var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
              map.getView().animate({
                // 只设置需要的属性即可
                center: center, // 中心点
                zoom: 17.9, // 缩放级别
                rotation: undefined, // 缩放完成view视图旋转弧度
                duration: 1000, // 缩放持续时间，默认不需要设置
              });
              // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());
              // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);
              // map.getView().setResolution(resolution);
            } else if(that.mapData.substring(0,1) =="[") {
              //that.newHt ="1";
              var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.mapData.replaceAll("\"", "")]});
              var leftJoin = zbNew.replace("\"[", "[");
              var rightJoin = leftJoin.replace("\"]", "]");
              hc_landFuther = 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_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;
              var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;
              var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;
              var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;
              //定位查询位置
              var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
              map.getView().animate({
                // 只设置需要的属性即可
                center: center, // 中心点
                zoom: 16.9, // 缩放级别
                rotation: undefined, // 缩放完成view视图旋转弧度
                duration: 1000, // 缩放持续时间，默认不需要设置
              });
            }
          }
        });
      } 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://t{0-7}.tianditu.com/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: "http://t{0-7}.tianditu.com/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,
          logo: 'false',
          target: that.uuidMap,
          view: new ol.View({
            //center: ol.proj.fromLonLat(Zb),
            //center: ol.proj.fromLonLat([115.452752, 31.789033]),
            zoom: 16.9,
            minZoom: 5, //地图缩小限制
            maxZoom: 18, //地图放大限制
          }),
        });
        //获取坐标是否存在
        //var Zb;
        //村边界查询开始 ------------------------------start
        var cql_filter = "dept_id='" + that.$cookies.get("item").deptId + "'";
        var cunTc= new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: that.mapGeoServerUrl +"/geoserver/zjd_dc/wms",
            params: {
              LAYERS: 'zjd_dc:t_house_survey_border_village',
              TILED: true,
              cql_filter: cql_filter,
              SRID: 3857,
            },
          }),
        });
        //定位查询位置
        let param_dw = {
          srsName: "EPSG:3857",
          service: "WFS",
          version: "1.0.0",
          request: "GetFeature",
          typename: "zjd_dc:t_house_survey_border_village",
          //featureNS: 'nsgk_hc',//命名空间 URI
          cql_filter: cql_filter,
          //featurePrefix: 'nationalwater',//工作区名称
          //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
          outputFormat: "application/json",
          //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
        };
        let url_dw = that.mapGeoServerUrl +"/geoserver/zjd_dc/wfs"; //wfsurl;
        url_dw = url_dw + "?";
        for (let key in param_dw) {
          url_dw = url_dw + key + "=" + param_dw[key] + "&";
        }
        url_dw = url_dw.substr(0, url_dw.length - 1);
        fetch(url_dw, {
          method: "POST", // *GET, POST, PUT, DELETE, etc.
        })
          .then((res) => {
            var geojsonmap = res.json();
            return geojsonmap;
          })
          .then((data) => {
            console.log(data);
            let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize());
            map.getView().fit(data.bbox);
            map.getView().setResolution(resolution);
            // var datamap = data.bbox;
            // var center = ol.extent.getCenter(datamap);
            // map.getView().animate({
            //   // 只设置需要的属性即可
            //   center: center, // 中心点
            //   rotation: undefined, // 缩放完成view视图旋转弧度
            // });
          })
          .catch((error) => {
            console.log("【异常】", error);
          });
        map.addLayer(cunTc);
        //村边界查询开始 ------------------------------end
        //宅基地图层查询开始 ------------------start
        //var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'";
        var zjdTc= new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms",
            params: {
              LAYERS: 'zjd_dc:t_house_survey_zjdzd',
              TILED: true,
              cql_filter: cql_filter,
              SRID: 3857,
            },
          }),
        });
        map.addLayer(zjdTc);
        //宅基地图层查询开始 ------------------start
        // getQueryLand().then((response) => {
        //   if (response.code == 200) {
        //     let InsertCode = response.data;
        //     if (InsertCode != null) {
        //       var lat = InsertCode.lat;
        //       var lng = InsertCode.lng;
        //       if(lat !=null && lng !=null && lat !="" && lng !=""){
        //         Zb = [lng,lat];
        //       }else {
        //         Zb =[115.452752, 31.789033];
        //       }
        //       //加载地图
        //       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: 16.9,
        //           minZoom: 5, //地图缩小限制
        //           maxZoom: 18, //地图放大限制
        //         }),
        //       });
        //     }
        //   }
        // });

        //图层查询定位结束 ---------end
        //开始绘制地图
        $("#"+this.drawingPolygonMap).click(function () {
          //that.closeMoule = null;
          map.removeInteraction(draw);
          //var source = new ol.source.Vector({wrapX: false});
          vector_drawing = new ol.layer.Vector({
            source: new ol.source.Vector(),
          });
          map.addLayer(vector_drawing);

          function addInteraction() {
            draw = new ol.interaction.Draw({
              source: vector_drawing.getSource(),
              type: "Polygon"
            });
            draw.on('drawend', function (evt) {
              var feature = evt.feature;
              var geometry = feature.getGeometry();
              var coordinate = geometry.getCoordinates();
              that.newZb = JSON.stringify(coordinate);
              if(coordinate !="" && coordinate !=null){
                //map.addLayer(vector_drawing);
                map.removeInteraction(draw);
              }
              that.closeMoule = coordinate;
              that.formSubmit();
            });
            map.addInteraction(draw);
          }

          addInteraction();

        });
        //清除画图鼠标点击事件
        // $("#drawRemove").click(function () {
        //   //map.addLayer(hc_land);
        //   map.removeInteraction(draw);
        //   //map.removeLayer(vector_drawing);
        // });
        //还原之前图层
        $("#"+this.drawingResetMap).click(function () {
          map.removeInteraction(draw);
          map.removeLayer(vector_drawing);
          //that.closeMoule = null;
          that.formSubmit();
        });
        //定位当前绘制图层
        $("#"+this.positioningMap).click(function () {
          console.log(that.newZb);
          //图层查询定位开始 ---------start
          //if(){}
          //map.removeLayer(hc_landFuther);
          if(that.newZb.substring(0,1) =="{"){
            //that.newHt ="1";
            // var theGeomMap =this.message.replace("Point", "MultiPolygon");
            // var pointLeft = theGeomMap.replace("[", "[[[[");
            // var pointRight = pointLeft.replace("]", "]]]]");
            hc_landFuther = 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\":" + that.newZb + "}"),
              }),
              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_landFuther);
            var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;
            var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;
            var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;
            var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;
            //定位查询位置
            var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
            map.getView().animate({
              // 只设置需要的属性即可
              center: center, // 中心点
              zoom: 17.9, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
            // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());
            // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);
            // map.getView().setResolution(resolution);
          } else if(that.newZb.substring(0,1) =="["){
            //that.newHt ="1";
            var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.newZb.replaceAll("\"","")]});
            var leftJoin = zbNew.replace("\"[","[");
            var rightJoin = leftJoin.replace("\"]","]");
            hc_landFuther = 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_landFuther);
            var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;
            var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;
            var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;
            var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;
            //定位查询位置
            var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
            map.getView().animate({
              // 只设置需要的属性即可
              center: center, // 中心点
              zoom: 16.9, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
            // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());
            // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);
            // map.getView().setResolution(resolution);
          } else {

          }
          //图层查询定位结束 ---------end
        });
      }
    });
    },
  },
  watch: {},
};
</script>

<style scoped>
#that.message {
  width: 100%;
  height: 100%;
}
.fuTitle {
  border-top: 1px solid #e9e9e9;
  text-align: center;
  padding: 10px 0px 0px 0px;
  font-size: 36px;
  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: 20px;

}
#land-btn-wrap{
  position: absolute;
  right: 3%;
  top: 5%;
  z-index: 2000;
}
</style>