zhangzl
/
nsgk_mobile
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
474 Commits
7 Branches
79 MiB
 
 
Tree: 2b32813095
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2b32813095'
${ noResults }
nsgk_mobile/src/components/Map/MapGisDrawing.vue

857 lines
36 KiB
Raw Blame History 

  1. <template>

  2.   <div>

  3.     <p class="fuTitle">地块位置绘制</p>

  4.     <div id="full-screen-acceptance" style="width: 100%;height:45vh;position:relative;">

  5.         <div :id=this.uuidMap style="width: 100%;height: 100%"></div>

  6.         <div id='land-btn-wrap'>

  7.             <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>-->

  8.             <!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->

  9.             <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" type="primary">重置图层</el-button>-->

  10.             <input :id="this.positioningMap" type="button" class="ant-btn ant-btn-red" value="图层定位"/>&nbsp;&nbsp;

  11.             <input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;

  12.             <input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/>

  13.         </div>

  14.       </div>

  15.     <div id="info" style="display: none"></div>

  16.   </div>

  17. </template>

  18. 

  19. <script>

  20.   import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";

  21.   import {getGeoServerConfigKey} from "@/api/system/config";

  22. import $ from "jquery";

  23. 

  24. export default {

  25.   components: {

  26.     getQueryLand,

  27.   },

  28.   data() {

  29.     return {

  30.       closeMoule: null,

  31.       uuidMap: this.guidProduct(),

  32.       drawingPolygonMap: this.guidProduct(),

  33.       drawingResetMap: this.guidProduct(),

  34.       positioningMap: this.guidProduct(),

  35.       newZb: null,

  36.       newGeom: null,

  37.       mapData: null,

  38.       map:this.guidProduct(),

  39.       //地图服务地址

  40.       mapGeoServerUrl:"",

  41.     };

  42.   },

  43.   props: ['theGeom','message'],

  44.   // created() {

  45.   //   // setTimeout(() => {

  46.   //   //   this.drawingPaceCountryDarw();

  47.   //   // }, 100);

  48.   // },

  49.   methods: {

  50.     //地图加载

  51.     formSubmit(){

  52.        //父组件监听的名字必须是formSubmit

  53.       // 子组件调用父组件的方法并传参

  54.       if(this.closeMoule =="" || this.closeMoule == null){

  55.         this.$emit('formSubmit', null);

  56.       }else{

  57.         this.$emit('formSubmit', JSON.stringify(this.closeMoule));

  58.       }

  59.     },

  60.     guidProduct(){

  61.       return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {

  62.         var r = Math.random() * 16 | 0,

  63.           v = c == 'x' ? r : (r & 0x3 | 0x8);

  64.         return v.toString(16);

  65.       });

  66.     },

  67.     //地图查看

  68.     drawingPaceCountryDarw() {

  69. /*      console.log(this.message);*/

  70.       //加载地图编辑

  71.       var that = this;

  72.       //var map;

  73.       //var hc_land;

  74.       var draw; // global so we can remove it later

  75.       var vector_drawing;

  76.       console.log(that.message);

  77.       // if(that.$cookies.get("item").backMapZjdAData.theGeom !=null && that.$cookies.get("item").backMapZjdAData.theGeom !=""

  78.       //   && that.$cookies.get("item").backMapZjdAData.theGeom.substring(0,1) =="["){

  79.       //   console.log(that.$cookies.get("item"));

  80.       //   that.message = that.$cookies.get("item").backMapZjdAData.theGeom;

  81.       // }

  82.       getGeoServerConfigKey().then(response => {

  83.         that.mapGeoServerUrl = response.msg;

  84.       if (that.message != null && that.message != ""

  85.         && that.message != undefined) {

  86.         document.getElementById(that.uuidMap).innerHTML = '';

  87.         var hc_land;

  88.         var hc_landFuther;

  89.         var draw; // global so we can remove it later

  90.         var vector_drawing;

  91.         var projection = new ol.proj.Projection({

  92.           //地图投影类型

  93.           code: "EPSG:3857",

  94.           units: "degrees",

  95.           //extent:extent

  96.         });

  97. 

  98.         var aerial = new ol.layer.Tile({

  99.           source: new ol.source.XYZ({

  100.             url: "http://t{0-7}.tianditu.com/img_w/wmts?" +

  101.               "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +

  102.               "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",

  103.           }),

  104.           isGroup: true,

  105.           name: "卫星影像图",

  106.           resolution:Math.random() * 0.00000001

  107.         });

  108. 

  109.         var yingxzi = new ol.layer.Tile({

  110.           source: new ol.source.XYZ({

  111.             url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",

  112.           }),

  113.           isGroup: true,

  114.           name: "天地图文字标注--卫星影像图",

  115.           resolution:Math.random() * 0.00000001

  116.         });

  117.         //加载地图

  118.         that.map = new ol.Map({

  119.           controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮

  120.           layers: [aerial, yingxzi],

  121.           projection: projection,

  122.           target: that.uuidMap,

  123.           view: new ol.View({

  124.             //center: ol.proj.fromLonLat([115.452752, 31.789033]),

  125.             zoom: 15,

  126.             minZoom: 5, //地图缩小限制

  127.             maxZoom: 18.3, //地图放大限制

  128.             resolution:Math.random() * 0.00000001,

  129.           }),

  130.           interactions: ol.interaction.defaults({

  131.             pinchRotate: false // 移动端禁止地图旋转

  132.           }),

  133.           //view: new ol.View({ol.view.getResolution() + Math.random() * 0.00000001)});//随机数缩放实现刷新

  134.         });

  135.         that.mapData= that.message;

  136.         var zjdTc;

  137.         var zrzTc;

  138.         var fsssTc;

  139.         that.map.removeLayer(zrzTc);

  140.         that.map.removeLayer(zjdTc);

  141.         that.map.removeLayer(fsssTc);

  142.         //宅基地图层查询开始 ------------------start

  143. 

  144.         //村边界查询开始 ------------------------------end

  145.         var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + that.$cookies.get("search").zjddm + "'";

  146.         console.log(cql_filter_all);

  147.         zjdTc= new ol.layer.Image({

  148.           source: new ol.source.ImageWMS({

  149.             url: that.mapGeoServerUrl +"/geoserver/zjd_dc/wms",

  150.             params: {

  151.               LAYERS: 'zjd_dc:t_house_survey_zjdzd',

  152.               TILED: true,

  153.               cql_filter: cql_filter_all,

  154.               SRID: 3857,

  155.             },

  156.             resolution:Math.random() * 0.00000001,

  157.           }),

  158.         });

  159.         that.map.addLayer(zjdTc);

  160.         //宅基地图层查询开始 ------------------start

  161.         //自然幢图层查询开始 ------------------start

  162.         zrzTc= new ol.layer.Image({

  163.           source: new ol.source.ImageWMS({

  164.             url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms",

  165.             params: {

  166.               LAYERS: 'zjd_dc:t_house_survey_zrz',

  167.               TILED: true,

  168.               cql_filter: cql_filter_all,

  169.               SRID: 3857,

  170.             },

  171.             resolution:Math.random() * 0.00000001,

  172.           }),

  173.         });

  174.         that.map.addLayer(zrzTc);

  175.         //自然幢图层查询结束 ------------------end

  176. 

  177.         //附属设施图层查询开始 ------------------start

  178.         fsssTc= new ol.layer.Image({

  179.           source: new ol.source.ImageWMS({

  180.             url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms",

  181.             params: {

  182.               LAYERS: 'zjd_dc:t_house_survey_fsss',

  183.               TILED: true,

  184.               cql_filter: cql_filter_all,

  185.               SRID: 3857,

  186.             },

  187.             resolution:Math.random() * 0.00000001,

  188.           }),

  189.         });

  190.         that.map.addLayer(fsssTc);

  191.         //附属设施图层查询结束 ------------------end

  192.         //图层查询定位开始 ---------start

  193.         if(this.message.substring(0,1) =="{"){

  194.           //that.newHt ="1";

  195.           // var theGeomMap =this.message.replace("Point", "MultiPolygon");

  196.           // var pointLeft = theGeomMap.replace("[", "[[[[");

  197.           // var pointRight = pointLeft.replace("]", "]]]]");

  198.           hc_land = new ol.layer.Vector({

  199.             title: "add Layer",

  200.             source: new ol.source.Vector({

  201.               projection: projection,

  202.               features: new ol.format.GeoJSON().readFeatures("{\n" +

  203.                 "    \"type\": \"Feature\",\n" +

  204.                 "    \"geometry\":" + this.message + "}"),

  205.             }),

  206.             resolution:Math.random() * 0.00000001,

  207.             style: new ol.style.Style({

  208.               fill: new ol.style.Fill({

  209.                 //矢量图层填充颜色，以及透明度

  210.                 color: "rgba(204, 255, 204,0.3)",

  211.               }),

  212.               stroke: new ol.style.Stroke({

  213.                 //边界样式

  214.                 color: "#CCFF66",

  215.                 width: 3,

  216.               }),

  217.             }),

  218.           });

  219.           that.map.addLayer(hc_land);

  220.           var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;

  221.           var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;

  222.           var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;

  223.           var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;

  224.           //定位查询位置

  225.           var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  226.           that.map.getView().animate({

  227.             // 只设置需要的属性即可

  228.             center: center, // 中心点

  229.             zoom: 16.9, // 缩放级别

  230.             rotation: undefined, // 缩放完成view视图旋转弧度

  231.             duration: 1000, // 缩放持续时间，默认不需要设置

  232.             resolution:Math.random() * 0.00000001,

  233.           });

  234.           // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());

  235.           // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);

  236.           // map.getView().setResolution(resolution);

  237.         } else if(this.message.substring(0,1) =="["){

  238.           //that.newHt ="1";

  239.           var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [this.message.replaceAll("\"","")]});

  240.           var leftJoin = zbNew.replace("\"[","[");

  241.           var rightJoin = leftJoin.replace("\"]","]");

  242.           hc_land = new ol.layer.Vector({

  243.             title: "add Layer",

  244.             source: new ol.source.Vector({

  245.               projection: projection,

  246.               features: new ol.format.GeoJSON().readFeatures("{\n" +

  247.                 "    \"type\": \"Feature\",\n" +

  248.                 "    \"geometry\":" + rightJoin + "}"),

  249.             }),

  250.             resolution:Math.random() * 0.00000001,

  251.             style: new ol.style.Style({

  252.               fill: new ol.style.Fill({

  253.                 //矢量图层填充颜色，以及透明度

  254.                 color: "rgba(204, 255, 204,0.3)",

  255.               }),

  256.               stroke: new ol.style.Stroke({

  257.                 //边界样式

  258.                 color: "#CCFF66",

  259.                 width: 3,

  260.               }),

  261.             }),

  262.           });

  263.           that.map.addLayer(hc_land);

  264.           var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;

  265.           var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;

  266.           var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;

  267.           var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;

  268.           //定位查询位置

  269.           var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  270.           that.map.getView().animate({

  271.             // 只设置需要的属性即可

  272.             center: center, // 中心点

  273.             zoom: 16.9, // 缩放级别

  274.             rotation: undefined, // 缩放完成view视图旋转弧度

  275.             duration: 1000, // 缩放持续时间，默认不需要设置

  276.             resolution:Math.random() * 0.00000001,

  277.           });

  278.           // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());

  279.           // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);

  280.           // map.getView().setResolution(resolution);

  281.         } else {

  282. 

  283.         }

  284.         //图层查询定位结束 ---------end

  285.         //开始绘制地图

  286.         $("#"+this.drawingPolygonMap).click(function () {

  287.           that.newGeom = 1;

  288.           that.map.removeLayer(hc_land);

  289.           that.map.removeLayer(vector_drawing);

  290.           //that.closeMoule = null;

  291.           that.map.removeInteraction(draw);

  292.           //var source = new ol.source.Vector({wrapX: false});

  293.           vector_drawing = new ol.layer.Vector({

  294.             source: new ol.source.Vector(),

  295.           });

  296.           that.map.addLayer(vector_drawing);

  297. 

  298.           function addInteraction() {

  299.             draw = new ol.interaction.Draw({

  300.               source: vector_drawing.getSource(),

  301.               type: "Polygon"

  302.             });

  303.             draw.on('drawend', function (evt) {

  304.               var feature = evt.feature;

  305.               var geometry = feature.getGeometry();

  306.               var coordinate = geometry.getCoordinates();

  307.               if(coordinate !="" && coordinate !=null){

  308.                 //map.addLayer(vector_drawing);

  309.                 that.map.removeInteraction(draw);

  310.               }

  311.               that.closeMoule = coordinate;

  312.               that.formSubmit();

  313.             });

  314.             that.map.addInteraction(draw);

  315.           }

  316. 

  317.           addInteraction();

  318.         });

  319.         //清除画图鼠标点击事件

  320.         // $("#drawRemove").click(function () {

  321.         //   //map.addLayer(hc_land);

  322.         //   map.removeInteraction(draw);

  323.         //   //map.removeLayer(vector_drawing);

  324.         // });

  325.         //还原之前图层

  326.         $("#"+this.drawingResetMap).click(function () {

  327.           that.newGeom = 2;

  328.           if(that.closeMoule !=null) {

  329.             that.map.addLayer(hc_land);

  330.             that.map.removeInteraction(draw);

  331.             that.map.removeLayer(vector_drawing);

  332.             that.formSubmit();

  333.           }

  334.         });

  335.         //定位当前绘制图层

  336.         $("#"+this.positioningMap).click(function () {

  337.           //图层查询定位开始 ---------start

  338.           console.log(that.message);

  339.           console.log(that.closeMoule);

  340.           console.log(that.newGeom);

  341.           // var dwmap;

  342.           // if(that.closeMoule != null && that.closeMoule !=""){

  343.           //   dwmap = JSON.stringify(that.closeMoule);

  344.           // }else {

  345.           //   console.log(that.newGeom);

  346.           //   dwmap = JSON.stringify(that.newGeom);

  347.           // }

  348.           var deMap = JSON.stringify(that.closeMoule);

  349.           if(that.newGeom == 1){

  350.           if(deMap.substring(0,1) =="{"){

  351.             //that.newHt ="1";

  352.             // var theGeomMap =this.message.replace("Point", "MultiPolygon");

  353.             // var pointLeft = theGeomMap.replace("[", "[[[[");

  354.             // var pointRight = pointLeft.replace("]", "]]]]");

  355.             hc_landFuther = new ol.layer.Vector({

  356.               title: "add Layer",

  357.               source: new ol.source.Vector({

  358.                 projection: projection,

  359.                 features: new ol.format.GeoJSON().readFeatures("{\n" +

  360.                   "    \"type\": \"Feature\",\n" +

  361.                   "    \"geometry\":" + deMap + "}"),

  362.               }),

  363.               style: new ol.style.Style({

  364.                 fill: new ol.style.Fill({

  365.                   //矢量图层填充颜色，以及透明度

  366.                   color: "rgba(204, 255, 204,0.3)",

  367.                 }),

  368.                 stroke: new ol.style.Stroke({

  369.                   //边界样式

  370.                   color: "#CCFF66",

  371.                   width: 3,

  372.                 }),

  373.               }),

  374.             });

  375.             //map.addLayer(hc_land);

  376.             var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;

  377.             var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;

  378.             var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;

  379.             var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;

  380.             //定位查询位置

  381.             var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  382.             that.map.getView().animate({

  383.               // 只设置需要的属性即可

  384.               center: center, // 中心点

  385.               zoom: 17.9, // 缩放级别

  386.               rotation: undefined, // 缩放完成view视图旋转弧度

  387.               duration: 1000, // 缩放持续时间，默认不需要设置

  388.             });

  389.             // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());

  390.             // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);

  391.             // map.getView().setResolution(resolution);

  392.           } else if(deMap.substring(0,1) =="[") {

  393.             //that.newHt ="1";

  394.             var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [deMap.replaceAll("\"", "")]});

  395.             var leftJoin = zbNew.replace("\"[", "[");

  396.             var rightJoin = leftJoin.replace("\"]", "]");

  397.             hc_landFuther = new ol.layer.Vector({

  398.               title: "add Layer",

  399.               source: new ol.source.Vector({

  400.                 projection: projection,

  401.                 features: new ol.format.GeoJSON().readFeatures("{\n" +

  402.                   "    \"type\": \"Feature\",\n" +

  403.                   "    \"geometry\":" + rightJoin + "}"),

  404.               }),

  405.               style: new ol.style.Style({

  406.                 fill: new ol.style.Fill({

  407.                   //矢量图层填充颜色，以及透明度

  408.                   color: "rgba(204, 255, 204,0.3)",

  409.                 }),

  410.                 stroke: new ol.style.Stroke({

  411.                   //边界样式

  412.                   color: "#CCFF66",

  413.                   width: 3,

  414.                 }),

  415.               }),

  416.             });

  417.             //map.addLayer(hc_land);

  418.             var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;

  419.             var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;

  420.             var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;

  421.             var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;

  422.             //定位查询位置

  423.             var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  424.             that.map.getView().animate({

  425.               // 只设置需要的属性即可

  426.               center: center, // 中心点

  427.               zoom: 16.9, // 缩放级别

  428.               rotation: undefined, // 缩放完成view视图旋转弧度

  429.               duration: 1000, // 缩放持续时间，默认不需要设置

  430.             });

  431.           }

  432.           } else {

  433.             console.log(that.mapData);

  434.             if(that.mapData.substring(0,1) =="{"){

  435.               //that.newHt ="1";

  436.               // var theGeomMap =this.message.replace("Point", "MultiPolygon");

  437.               // var pointLeft = theGeomMap.replace("[", "[[[[");

  438.               // var pointRight = pointLeft.replace("]", "]]]]");

  439.               hc_landFuther = new ol.layer.Vector({

  440.                 title: "add Layer",

  441.                 source: new ol.source.Vector({

  442.                   projection: projection,

  443.                   features: new ol.format.GeoJSON().readFeatures("{\n" +

  444.                     "    \"type\": \"Feature\",\n" +

  445.                     "    \"geometry\":" + that.mapData + "}"),

  446.                 }),

  447.                 style: new ol.style.Style({

  448.                   fill: new ol.style.Fill({

  449.                     //矢量图层填充颜色，以及透明度

  450.                     color: "rgba(204, 255, 204,0.3)",

  451.                   }),

  452.                   stroke: new ol.style.Stroke({

  453.                     //边界样式

  454.                     color: "#CCFF66",

  455.                     width: 3,

  456.                   }),

  457.                 }),

  458.               });

  459.               //map.addLayer(hc_land);

  460.               var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;

  461.               var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;

  462.               var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;

  463.               var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;

  464.               //定位查询位置

  465.               var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  466.               that.map.getView().animate({

  467.                 // 只设置需要的属性即可

  468.                 center: center, // 中心点

  469.                 zoom: 17.9, // 缩放级别

  470.                 rotation: undefined, // 缩放完成view视图旋转弧度

  471.                 duration: 1000, // 缩放持续时间，默认不需要设置

  472.                 resolution:Math.random() * 0.00000001,

  473.               });

  474.               // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());

  475.               // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);

  476.               // map.getView().setResolution(resolution);

  477.             } else if(that.mapData.substring(0,1) =="[") {

  478.               //that.newHt ="1";

  479.               var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.mapData.replaceAll("\"", "")]});

  480.               var leftJoin = zbNew.replace("\"[", "[");

  481.               var rightJoin = leftJoin.replace("\"]", "]");

  482.               hc_landFuther = new ol.layer.Vector({

  483.                 title: "add Layer",

  484.                 source: new ol.source.Vector({

  485.                   projection: projection,

  486.                   features: new ol.format.GeoJSON().readFeatures("{\n" +

  487.                     "    \"type\": \"Feature\",\n" +

  488.                     "    \"geometry\":" + rightJoin + "}"),

  489.                 }),

  490.                 style: new ol.style.Style({

  491.                   fill: new ol.style.Fill({

  492.                     //矢量图层填充颜色，以及透明度

  493.                     color: "rgba(204, 255, 204,0.3)",

  494.                   }),

  495.                   stroke: new ol.style.Stroke({

  496.                     //边界样式

  497.                     color: "#CCFF66",

  498.                     width: 3,

  499.                   }),

  500.                 }),

  501.               });

  502.               //map.addLayer(hc_land);

  503.               var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;

  504.               var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;

  505.               var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;

  506.               var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;

  507.               //定位查询位置

  508.               var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  509.               that.map.getView().animate({

  510.                 // 只设置需要的属性即可

  511.                 center: center, // 中心点

  512.                 zoom: 16.9, // 缩放级别

  513.                 rotation: undefined, // 缩放完成view视图旋转弧度

  514.                 duration: 1000, // 缩放持续时间，默认不需要设置

  515.                 resolution:Math.random() * 0.00000001,

  516.               });

  517.             }

  518.           }

  519.         });

  520.       } else{

  521.         //this.closeMoule = null;

  522.         document.getElementById(that.uuidMap).innerHTML = '';

  523.         var projection = new ol.proj.Projection({

  524.           //地图投影类型

  525.           code: "EPSG:3857",

  526.           units: "degrees",

  527.           //extent:extent

  528.         });

  529. 

  530.         var aerial = new ol.layer.Tile({

  531.           source: new ol.source.XYZ({

  532.             url: "http://t{0-7}.tianditu.com/img_w/wmts?" +

  533.               "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +

  534.               "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",

  535.           }),

  536.           isGroup: true,

  537.           name: "卫星影像图",

  538.         });

  539. 

  540.         var yingxzi = new ol.layer.Tile({

  541.           source: new ol.source.XYZ({

  542.             url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",

  543.           }),

  544.           isGroup: true,

  545.           name: "天地图文字标注--卫星影像图",

  546.         });

  547. 

  548.         //加载地图

  549.         that.map = new ol.Map({

  550.           controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮

  551.           layers: [aerial, yingxzi],

  552.           projection: projection,

  553.           logo: 'false',

  554.           target: that.uuidMap,

  555.           view: new ol.View({

  556.             //center: ol.proj.fromLonLat(Zb),

  557.             //center: ol.proj.fromLonLat([115.452752, 31.789033]),

  558.             zoom: 16.9,

  559.             minZoom: 5, //地图缩小限制

  560.             maxZoom: 18, //地图放大限制

  561.             resolution:Math.random() * 0.00000001,

  562.           }),

  563.         });

  564.         //view.setResolution(view.getResolution() + Math.random() * 0.00000001);//随机数缩放实现刷新

  565.         //获取坐标是否存在

  566.         //var Zb;

  567.         //村边界查询开始 ------------------------------start

  568.         var cql_filter = "dept_id='" + that.$cookies.get("item").deptId + "'";

  569.         console.log(cql_filter);

  570.         var cunTc= new ol.layer.Image({

  571.           source: new ol.source.ImageWMS({

  572.             url: that.mapGeoServerUrl +"/geoserver/zjd_dc/wms",

  573.             params: {

  574.               LAYERS: 'zjd_dc:t_house_survey_border_village',

  575.               TILED: true,

  576.               cql_filter: cql_filter,

  577.               SRID: 3857,

  578.             },

  579.           }),

  580.         });

  581.         //定位查询位置

  582.         let param_dw = {

  583.           srsName: "EPSG:3857",

  584.           service: "WFS",

  585.           version: "1.0.0",

  586.           request: "GetFeature",

  587.           typename: "zjd_dc:t_house_survey_border_village",

  588.           //featureNS: 'nsgk_hc',//命名空间 URI

  589.           cql_filter: cql_filter,

  590.           //featurePrefix: 'nationalwater',//工作区名称

  591.           //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开

  592.           outputFormat: "application/json",

  593.           //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值

  594.         };

  595.         let url_dw = that.mapGeoServerUrl +"/geoserver/zjd_dc/wfs"; //wfsurl;

  596.         url_dw = url_dw + "?";

  597.         for (let key in param_dw) {

  598.           url_dw = url_dw + key + "=" + param_dw[key] + "&";

  599.         }

  600.         url_dw = url_dw.substr(0, url_dw.length - 1);

  601.         fetch(url_dw, {

  602.           method: "POST", // *GET, POST, PUT, DELETE, etc.

  603.         })

  604.           .then((res) => {

  605.             var geojsonmap = res.json();

  606.             return geojsonmap;

  607.           })

  608.           .then((data) => {

  609.             console.log(data);

  610.             let resolution = that.map.getView().getResolutionForExtent(data.bbox,that.map.getSize());

  611.             resolution:resolution + Math.random() * 0.00000001,

  612.               that.map.getView().fit(data.bbox);

  613.             that.map.getView().setResolution(resolution);

  614.             // var datamap = data.bbox;

  615.             // var center = ol.extent.getCenter(datamap);

  616.             // map.getView().animate({

  617.             //   // 只设置需要的属性即可

  618.             //   center: center, // 中心点

  619.             //   rotation: undefined, // 缩放完成view视图旋转弧度

  620.             // });

  621.           })

  622.           .catch((error) => {

  623.             console.log("【异常】", error);

  624.           });

  625.         that.map.addLayer(cunTc);

  626.         //村边界查询开始 ------------------------------end

  627.         //宅基地图层查询开始 ------------------start

  628.         //var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'";

  629.         var zjdTc= new ol.layer.Image({

  630.           source: new ol.source.ImageWMS({

  631.             url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms",

  632.             params: {

  633.               LAYERS: 'zjd_dc:t_house_survey_zjdzd',

  634.               TILED: true,

  635.               cql_filter: cql_filter,

  636.               SRID: 3857,

  637.             },

  638.           }),

  639.         });

  640.         that.map.addLayer(zjdTc);

  641.         //宅基地图层查询开始 ------------------start

  642.         // getQueryLand().then((response) => {

  643.         //   if (response.code == 200) {

  644.         //     let InsertCode = response.data;

  645.         //     if (InsertCode != null) {

  646.         //       var lat = InsertCode.lat;

  647.         //       var lng = InsertCode.lng;

  648.         //       if(lat !=null && lng !=null && lat !="" && lng !=""){

  649.         //         Zb = [lng,lat];

  650.         //       }else {

  651.         //         Zb =[115.452752, 31.789033];

  652.         //       }

  653.         //       //加载地图

  654.         //       map = new ol.Map({

  655.         //         controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮

  656.         //         layers: [aerial, yingxzi],

  657.         //         projection: projection,

  658.         //         logo: 'false',

  659.         //         target: that.uuidMap,

  660.         //         view: new ol.View({

  661.         //           center: ol.proj.fromLonLat(Zb),

  662.         //           //center: ol.proj.fromLonLat([115.452752, 31.789033]),

  663.         //           zoom: 16.9,

  664.         //           minZoom: 5, //地图缩小限制

  665.         //           maxZoom: 18, //地图放大限制

  666.         //         }),

  667.         //       });

  668.         //     }

  669.         //   }

  670.         // });

  671. 

  672.         //图层查询定位结束 ---------end

  673.         //开始绘制地图

  674.         $("#"+this.drawingPolygonMap).click(function () {

  675.           //that.closeMoule = null;

  676.           that.map.removeInteraction(draw);

  677.           //var source = new ol.source.Vector({wrapX: false});

  678.           vector_drawing = new ol.layer.Vector({

  679.             source: new ol.source.Vector(),

  680.           });

  681.           that.map.addLayer(vector_drawing);

  682. 

  683.           function addInteraction() {

  684.             draw = new ol.interaction.Draw({

  685.               source: vector_drawing.getSource(),

  686.               type: "Polygon"

  687.             });

  688.             draw.on('drawend', function (evt) {

  689.               var feature = evt.feature;

  690.               var geometry = feature.getGeometry();

  691.               var coordinate = geometry.getCoordinates();

  692.               that.newZb = JSON.stringify(coordinate);

  693.               if(coordinate !="" && coordinate !=null){

  694.                 //map.addLayer(vector_drawing);

  695.                 map.removeInteraction(draw);

  696.               }

  697.               that.closeMoule = coordinate;

  698.               that.formSubmit();

  699.             });

  700.             that.map.addInteraction(draw);

  701.           }

  702. 

  703.           addInteraction();

  704. 

  705.         });

  706.         //清除画图鼠标点击事件

  707.         // $("#drawRemove").click(function () {

  708.         //   //map.addLayer(hc_land);

  709.         //   map.removeInteraction(draw);

  710.         //   //map.removeLayer(vector_drawing);

  711.         // });

  712.         //还原之前图层

  713.         $("#"+this.drawingResetMap).click(function () {

  714.           that.map.removeInteraction(draw);

  715.           that.map.removeLayer(vector_drawing);

  716.           //that.closeMoule = null;

  717.           that.formSubmit();

  718.         });

  719.         //定位当前绘制图层

  720.         $("#"+this.positioningMap).click(function () {

  721.           console.log(that.newZb);

  722.           //图层查询定位开始 ---------start

  723.           //if(){}

  724.           //map.removeLayer(hc_landFuther);

  725.           if(that.newZb.substring(0,1) =="{"){

  726.             //that.newHt ="1";

  727.             // var theGeomMap =this.message.replace("Point", "MultiPolygon");

  728.             // var pointLeft = theGeomMap.replace("[", "[[[[");

  729.             // var pointRight = pointLeft.replace("]", "]]]]");

  730.             hc_landFuther = new ol.layer.Vector({

  731.               title: "add Layer",

  732.               source: new ol.source.Vector({

  733.                 projection: projection,

  734.                 features: new ol.format.GeoJSON().readFeatures("{\n" +

  735.                   "    \"type\": \"Feature\",\n" +

  736.                   "    \"geometry\":" + that.newZb + "}"),

  737.               }),

  738.               style: new ol.style.Style({

  739.                 fill: new ol.style.Fill({

  740.                   //矢量图层填充颜色，以及透明度

  741.                   color: "rgba(204, 255, 204,0.3)",

  742.                 }),

  743.                 stroke: new ol.style.Stroke({

  744.                   //边界样式

  745.                   color: "#CCFF66",

  746.                   width: 3,

  747.                 }),

  748.               }),

  749.             });

  750.             //map.addLayer(hc_landFuther);

  751.             var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;

  752.             var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;

  753.             var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;

  754.             var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;

  755.             //定位查询位置

  756.             var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  757.             that.map.getView().animate({

  758.               // 只设置需要的属性即可

  759.               center: center, // 中心点

  760.               zoom: 17.9, // 缩放级别

  761.               rotation: undefined, // 缩放完成view视图旋转弧度

  762.               duration: 1000, // 缩放持续时间，默认不需要设置

  763.               resolution:Math.random() * 0.00000001,

  764.             });

  765.             // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());

  766.             // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);

  767.             // map.getView().setResolution(resolution);

  768.           } else if(that.newZb.substring(0,1) =="["){

  769.             //that.newHt ="1";

  770.             var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.newZb.replaceAll("\"","")]});

  771.             var leftJoin = zbNew.replace("\"[","[");

  772.             var rightJoin = leftJoin.replace("\"]","]");

  773.             hc_landFuther = new ol.layer.Vector({

  774.               title: "add Layer",

  775.               source: new ol.source.Vector({

  776.                 projection: projection,

  777.                 features: new ol.format.GeoJSON().readFeatures("{\n" +

  778.                   "    \"type\": \"Feature\",\n" +

  779.                   "    \"geometry\":" + rightJoin + "}"),

  780.               }),

  781.               style: new ol.style.Style({

  782.                 fill: new ol.style.Fill({

  783.                   //矢量图层填充颜色，以及透明度

  784.                   color: "rgba(204, 255, 204,0.3)",

  785.                 }),

  786.                 stroke: new ol.style.Stroke({

  787.                   //边界样式

  788.                   color: "#CCFF66",

  789.                   width: 3,

  790.                 }),

  791.               }),

  792.             });

  793.             //map.addLayer(hc_landFuther);

  794.             var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;

  795.             var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;

  796.             var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;

  797.             var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;

  798.             //定位查询位置

  799.             var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  800.             that.map.getView().animate({

  801.               // 只设置需要的属性即可

  802.               center: center, // 中心点

  803.               zoom: 16.9, // 缩放级别

  804.               rotation: undefined, // 缩放完成view视图旋转弧度

  805.               duration: 1000, // 缩放持续时间，默认不需要设置

  806.               resolution:Math.random() * 0.00000001,

  807.             });

  808.             // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize());

  809.             // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]);

  810.             // map.getView().setResolution(resolution);

  811.           } else {

  812. 

  813.           }

  814.           //图层查询定位结束 ---------end

  815.         });

  816.       }

  817.     });

  818.     },

  819.   },

  820.   watch: {},

  821. };

  822. </script>

  823. 

  824. <style scoped>

  825. #that.message {

  826.   width: 100%;

  827.   height: 100%;

  828. }

  829. .fuTitle {

  830.   border-top: 1px solid #e9e9e9;

  831.   text-align: center;

  832.   padding: 10px 0px 0px 0px;

  833.   font-size: 36px;

  834.   color: #999;

  835. }

  836. .ant-btn-red {

  837.   position: relative;

  838.   display: inline-block;

  839.   background: #D0EEFF;

  840.   border: 1px solid #99D3F5;

  841.   border-radius: 4px;

  842.   padding: 4px 12px;

  843.   overflow: hidden;

  844.   color: #1E88C7;

  845.   text-decoration: none;

  846.   text-indent: 0;

  847.   line-height: 20px;

  848. 

  849. }

  850. #land-btn-wrap{

  851.   position: absolute;

  852.   right: 3%;

  853.   top: 5%;

  854.   z-index: 2000;

  855. }

  856. </style>