nsgk_mobile/src/components/Map/MapGisLine.vue

<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>
            <!--<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.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="重置图层"/>
          </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,
      uuidMap: this.guidProduct(),
      drawingPolygonMap: this.guidProduct(),
      drawingResetMap: this.guidProduct(),
    };
  },
  props: ['theGeom','message'],
  // created() {
  //   // setTimeout(() => {
  //   //   this.drawingPaceCountryLine();
  //   // }, 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);
      });
    },
    //地图查看
    drawingPaceCountryLine() {
      //加载地图编辑
      var that = this;
      var map;
      //var hc_land;
      var draw; // global so we can remove it later
      var vector_drawing;
      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://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,
            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\":" + 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, // 缩放持续时间，默认不需要设置
          });
        }
        // 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_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: 17.9, // 缩放级别
        //     rotation: undefined, // 缩放完成view视图旋转弧度
        //     duration: 1000, // 缩放持续时间，默认不需要设置
        //   });
        // }
        //图层查询定位结束 ---------end
        //开始绘制地图
        $("#"+this.drawingPolygonMap).click(function () {
          map.removeLayer(hc_land);
          //map.removeLayer(hc_landFuther);
          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();
              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 () {
          if(that.closeMoule !=null) {
            map.removeLayer(vector_drawing);
            //map.removeLayer(hc_landFuther);
            map.removeInteraction(draw);
            map.addLayer(hc_land);
            //map.addLayer(hc_landFuther);
           // 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;
        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.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();
        });
      }
    },
  },
  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: 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>