nsgk_mobile/src/components/Map/MapGisObtain.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>
<!--    <div id="info" > <button type="button" @click="showHistoryDown">保 存</button></div>-->
  </div>
</template>

<script>
  import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
  import {selectTHouseBaseObligeeMapList} from "@/api/onlineHome/homestead/circulation";
  import {getByLyZjddm } from "@/api/onlineHome/homestead/circulation";
import $ from "jquery";

export default {
  components: {
    getQueryLand,getByLyZjddm
  },
  data() {
    return {
      uuidMap: this.guidProduct(),
      map:this.guidProduct(),
      showHistoryTable: false,
      closeMoule: null,
    };
  },
  props: ['theGeom','shqrxm'],
  methods: {
    //地图加载
    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);
      });
    },
    //地图查看
    drawingLyPaceCountryDarw() {
      //加载地图编辑
      var that = this;
      console.info(this.shqrxm);
      selectTHouseBaseObligeeMapList({shyqrdbxm:this.shqrxm}).then((response) => {
        if (response.code == 200) {

          document.getElementById(that.uuidMap).innerHTML = '';
          var hc_land;
          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: "卫星影像图",
            resolution:Math.random() * 0.00000001
          });

          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: "天地图文字标注--卫星影像图",
            resolution:Math.random() * 0.00000001
          });
          //加载地图
          that.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, //地图放大限制
            }),
            interactions: ol.interaction.defaults({
              pinchRotate: false // 移动端禁止地图旋转
            }),
            //view: new ol.View({ol.view.getResolution() + Math.random() * 0.00000001)});//随机数缩放实现刷新
          });
          if (response.data.length > 0) {
            //setTimeout(() => {
            for (var i = 0; response.data.length > i; i++) {
              //图层查询定位开始 ---------start
              console.log( response.data[i].zjdzd.theGeom);
              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\":" + response.data[i].zjdzd.theGeom  + ",  " +
                    "  \"properties\":" + JSON.stringify(response.data[i]) + "}"),
                }),
                resolution:Math.random() * 0.00000001,
                style: new ol.style.Style({
                  fill: new ol.style.Fill({
                    //矢量图层填充颜色，以及透明度
                    color: "rgba(204, 255, 204,0.3)",
                  }),
                  stroke: new ol.style.Stroke({
                    //边界样式
                    color: "#CCFF66",
                    width: 3,
                  }),
                }),
              });
              that.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]); //获取边界区域的中心位置
              that.map.getView().animate({
                // 只设置需要的属性即可
                center: center, // 中心点
                zoom: 16.9, // 缩放级别
                rotation: undefined, // 缩放完成view视图旋转弧度
                duration: 1000, // 缩放持续时间，默认不需要设置
                resolution:Math.random() * 0.00000001,
              });
            }
          } else {  // 加载全部地图，不带宅基地图斑
            let deptName = this.$store.state.user.loginDeptId + "";
            getQueryLand(deptName).then((response) => {
              if (response.code == 200) {
                let InsertCode = response.data;
                if (InsertCode != null) {
                  let lat = InsertCode.lat;
                  let lng = InsertCode.lng;
                  let center;
                  if(lat !=null && lng !=null && lat !="" && lng !=""){
                    center = [lng,lat];
                  }else {
                    center = [115.452752, 31.789033];
                  }
                  that.map.getView().animate({
                    // 只设置需要的属性即可
                    center: ol.proj.fromLonLat(center), // 中心点
                    zoom: 17.9, // 缩放级别
                    rotation: undefined, // 缩放完成view视图旋转弧度
                    duration: 1000, // 缩放持续时间，默认不需要设置
                  });
                }
              }
            });
          }
          var geo_zjdzd;
          that.map.on("singleclick", function (evt) {
            let feature = that.map.forEachFeatureAtPixel(
              evt.pixel,
              (feature) => feature
            );
            //document.getElementById(that.uuidMap).innerHTML = '';
            if (feature && (feature !==undefined)) {
              that.map.removeLayer(geo_zjdzd);
              var aleft = [];
              for(var i=0;i<feature.values_.geometry.flatCoordinates.length;i++){
                aleft.push("["+feature.values_.geometry.flatCoordinates[i]+","+feature.values_.geometry.flatCoordinates[i+1] +"]")
                i = i+1;
              }
              var aright = "[[["+aleft +"]]]";
              var geoThegeom = "{\"type\": \"MultiPolygon\", \"coordinates\": "+aright + "}";
              this.closeMoule= null;
              //图层查询定位开始 ---------start
              geo_zjdzd = 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\":" + geoThegeom + "}"),
                }),
                resolution:Math.random() * 0.00000001,
                style: new ol.style.Style({
                  fill: new ol.style.Fill({
                    //矢量图层填充颜色，以及透明度
                    color: "rgb(204, 255, 255,0.5)",
                  }),
                  stroke: new ol.style.Stroke({
                    //边界样式
                    color: "#00FFFF",
                    width: 3,
                  }),
                }),
              });
              that.map.addLayer(geo_zjdzd);
              //that.closeMoule = feature.values_.zjddm;
              that.$emit('closeMoule', feature.values_.zjddm);
              var maxXMap = geo_zjdzd.values_.source.featuresRtree_.rbush_.data.maxX;
              var maxYMap = geo_zjdzd.values_.source.featuresRtree_.rbush_.data.maxY;
              var minXMap = geo_zjdzd.values_.source.featuresRtree_.rbush_.data.minX;
              var minYMap = geo_zjdzd.values_.source.featuresRtree_.rbush_.data.minY;
              //定位查询位置
              var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
              that.map.getView().animate({
                // 只设置需要的属性即可
                center: center, // 中心点
                zoom: 16.9, // 缩放级别
                rotation: undefined, // 缩放完成view视图旋转弧度
                duration: 1000, // 缩放持续时间，默认不需要设置
                resolution:Math.random() * 0.00000001,
              });

            }
          });
        }
      });
    },
    showHistoryDown() {
      this.showHistoryTable = false;
      this.$emit('closeMoule', this.closeMoule);
      this.closeMoule = null;
    },
  },
  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>