<template>
  <div>
    <p class="fuTitle">地块位置绘制</p>
    <div id="full-screen-acceptance" style="width: 100%;height:45vh;">
        <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
        <div id='land-btn-wrap'>
          <el-row>
            <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="重置标记"/>
          </el-row>
        </div>
      </div>
    <div id="info" style="display: none"></div>
  </div>
</template>

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

export default {
  components: {
    getQueryLand,
  },
  data() {
    return {
      closeMoule: null,
      reduction: null,
      uuidMap: this.guidProduct(),
      drawPolygonMap: this.guidProduct(),
      drawResetMap: this.guidProduct(),
    };
  },
  props: ['theGeom','message'],
  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;// 获取经度
        });
        getQueryLand().then((response) => {
          if (response.code == 200) {
            let InsertCode = response.data;
            if (InsertCode != null) {
              var lat = InsertCode.lat;
              var lng = InsertCode.lng;
              if(latitude !=null && longitude !=null && latitude !="" && longitude !=""){
                Zb = [longitude,latitude];
              }else 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: 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: 20px;
}
#land-btn-wrap{
  position: relative;
  width: 25%;
  left: 75%;
  bottom: 100%;
  z-index: 2000;
  padding-top: 5%;
}
</style>
