diff --git a/src/components/gis/MapField.vue b/src/components/gis/MapField.vue new file mode 100644 index 0000000..d187e5f --- /dev/null +++ b/src/components/gis/MapField.vue @@ -0,0 +1,409 @@ + + + + + diff --git a/src/components/house/MapField.vue b/src/components/house/MapField.vue deleted file mode 100644 index e531168..0000000 --- a/src/components/house/MapField.vue +++ /dev/null @@ -1,286 +0,0 @@ - - - - - diff --git a/src/views/resource/land/index.vue b/src/views/resource/land/index.vue index 3cfc725..6449826 100644 --- a/src/views/resource/land/index.vue +++ b/src/views/resource/land/index.vue @@ -332,18 +332,19 @@
-    - - +    + +
+ @@ -357,14 +358,13 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css" import "splitpanes/dist/splitpanes.css" import { deptTreeSelect } from "@/api/system/user" import {getConfigKey} from "@/api/system/config"; -import {getDept,getInfoByImportCode} from "@/api/system/dept"; -import MapField from "@/components/house/MapField"; +import {getDept, getInfoByImportCode} from "@/api/system/dept"; import $ from "jquery"; export default { name: "Land", dicts: ['ownership_type', 'land_use_type', 'survey_status', 'is_common', 'land_grade_type', 'land_type', 'land_use'], - components: { Treeselect, Splitpanes, Pane,MapField }, + components: { Treeselect, Splitpanes, Pane }, data() { return { // 遮罩层 @@ -407,15 +407,13 @@ export default { children: "children", label: "label" }, - // 遮罩按钮新增点击状态 - diglogStatus: true, - //地图 + //地图参数 openMap: false, mapTheGeomId: null, mapTheGeom: null, drawInsert:null, - tGeoOrganizationLng: null, - tGeoOrganizationLat: null, + jingdu: null, + weidu: null, // 查询参数 queryParams: { pageNum: 1, @@ -447,7 +445,6 @@ export default { scmjm: [ { required: true, message: "实测面积不能为空", trigger: "blur" } ], - }, // EXCEL导入 upload: { @@ -464,7 +461,6 @@ export default { // 上传的地址 url: process.env.VUE_APP_BASE_API + "/resource/land/importData" }, - } }, watch: { @@ -476,6 +472,7 @@ export default { created() { this.getDeptTree() this.getList() + // 获取geoserver的地址 this.getGeoServerUrl(); // 获取地块图层名称 @@ -500,7 +497,7 @@ export default { this.open = false this.reset() }, - // 取消按钮 + // 取消地图按钮 cancelMap() { this.openMap = false; this.reset(); @@ -535,7 +532,6 @@ export default { deptName: null, sfzwd: '2' } - this.diglogStatus = true; this.resetForm("form") }, /** 搜索按钮操作 */ @@ -772,8 +768,8 @@ export default { getDept(deptId).then(response => { let insertCode = response.data; if (insertCode != null) { - this.tGeoOrganizationLat = insertCode.latitude; - this.tGeoOrganizationLng = insertCode.longitude; + this.weidu = insertCode.latitude; + this.jingdu = insertCode.longitude; } }); }, @@ -783,8 +779,8 @@ export default { getInfoByImportCode(row.importCode).then((res) => { let insertCode = res.data; if (insertCode != null) { - this.tGeoOrganizationLat = insertCode.latitude; - this.tGeoOrganizationLng = insertCode.longitude; + this.weidu = insertCode.latitude; + this.jingdu = insertCode.longitude; } const tableRow = { importCode: row.importCode }; listLandQuery(tableRow).then(response => { @@ -798,43 +794,40 @@ export default { }, /** 地图提交按钮 */ submitFormMap() { - this.diglogStatus = false; if(this.drawInsert !=null && this.drawInsert !=""){ this.mapTheGeomId.theGeom = JSON.stringify(this.drawInsert); }else{ this.mapTheGeomId.theGeom = this.mapTheGeomId.theGeomText } - let sysGis = { tableName: 't_resource_land',priId: 'fid',id: this.mapTheGeomId.fid,theGeom: this.mapTheGeomId.theGeom }; + let sysGis = { tableName: 't_resource_land', priId: 'fid', id: this.mapTheGeomId.fid, theGeom: this.mapTheGeomId.theGeom }; if (this.mapTheGeomId != null) { areaSavePri(sysGis).then(response => { this.$modal.msgSuccess("修改成功"); this.openMap = false; - this.getList(); - this.diglogStatus = true; + //this.getList(); }); } }, /** 清除坐标点图层 */ clearMapLayer() { - let sysGis = { tableName: 't_resource_land',priId: 'fid',id: this.mapTheGeomId.fid}; + let sysGis = { tableName: 't_resource_land', priId: 'fid', id: this.mapTheGeomId.fid}; cleanSavePri(sysGis).then(response => { this.$modal.msgSuccess("清除成功"); this.openMap = false; - this.getList(); + //this.getList(); }); }, pointDarw(resourceList) { //加载地图编辑 var that = this; var map; - //var hc_land; - var draw; // global so we can remove it later + var draw; var vector_drawing; var startDarw =false; var openDarw = false; this.mapTheGeomId = resourceList.find((land) => { //model就是上面的数据源 - return land.fid === this.mapTheGeomId.fid; //筛选出匹配数据 + return land.fid === this.mapTheGeomId.fid; }); if (this.mapTheGeomId.theGeom != null && this.mapTheGeomId.theGeom != "" && this.mapTheGeomId.theGeom != undefined) { @@ -844,9 +837,10 @@ export default { startDarw = false; openDarw = true; } + if (startDarw) { document.getElementById("mapWrap").innerHTML = ''; - var hc_land; + var thePolygon; var draw; // global so we can remove it later var vector_drawing; var projection = new ol.proj.Projection({ @@ -855,7 +849,6 @@ export default { units: "degrees", //extent:extent }); - var aerial = new ol.layer.Tile({ source: new ol.source.XYZ({ url: "http://t0.tianditu.gov.cn/img_w/wmts?" + @@ -865,7 +858,6 @@ export default { 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", @@ -882,8 +874,8 @@ export default { view: new ol.View({ //center: ol.proj.fromLonLat([115.452752, 31.789033]), zoom: 17.8, - minZoom: 0, //地图缩小限制 - maxZoom: 18.3, //地图放大限制 + minZoom: 0, + maxZoom: 18.3, }), }); // 添加村边界 @@ -899,7 +891,6 @@ export default { name: 'villageBorderLayer' }); map.addLayer(mapBorder); - // 添加已经存在的资源图层 let vectorSource = new ol.source.Vector(); for (let resource of resourceList) { @@ -911,7 +902,6 @@ export default { vectorSource.addFeature(feature); } } - let resourceLayer = new ol.layer.Vector({ source: vectorSource, style: (feature, resolution) => { @@ -929,8 +919,8 @@ export default { } }); map.addLayer(resourceLayer); - //图层查询定位开始 ---------start - hc_land = new ol.layer.Vector({ + //当前图层查询定位 + thePolygon = new ol.layer.Vector({ title: "add Layer", source: new ol.source.Vector({ projection: projection, @@ -950,24 +940,21 @@ export default { }), }), }); - 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.addLayer(thePolygon); + var maxXMap = thePolygon.values_.source.featuresRtree_.rbush_.data.maxX; + var maxYMap = thePolygon.values_.source.featuresRtree_.rbush_.data.maxY; + var minXMap = thePolygon.values_.source.featuresRtree_.rbush_.data.minX; + var minYMap = thePolygon.values_.source.featuresRtree_.rbush_.data.minY; + var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); map.getView().animate({ - // 只设置需要的属性即可 - center: center, // 中心点 - zoom: 17.8, // 缩放级别 - rotation: undefined, // 缩放完成view视图旋转弧度 - duration: 1000, // 缩放持续时间,默认不需要设置 + center: center, + zoom: 17.8, + rotation: undefined, + duration: 1000, }); - //图层查询定位结束 ---------end //开始绘制地图 $("#drawPolygon").off("click").on("click", function () { - map.removeLayer(hc_land); + map.removeLayer(thePolygon); map.removeLayer(vector_drawing); that.drawInsert = null; //var source = new ol.source.Vector({wrapX: false}); @@ -975,7 +962,6 @@ export default { source: new ol.source.Vector(), }); map.addLayer(vector_drawing); - function addInteraction() { draw = new ol.interaction.Draw({ source: vector_drawing.getSource(), @@ -990,12 +976,11 @@ export default { }); map.addInteraction(draw); } - addInteraction(); }); //清除画图鼠标点击事件 $("#drawRemove").off("click").on("click", function () { - //map.addLayer(hc_land); + //map.addLayer(thePolygon); map.removeInteraction(draw); //map.removeLayer(vector_drawing); }); @@ -1003,10 +988,11 @@ export default { $("#drawReset").off("click").on("click", function () { map.removeInteraction(draw); map.removeLayer(vector_drawing); - map.addLayer(hc_land); + map.addLayer(thePolygon); that.drawInsert = null; }); } + if (openDarw) { document.getElementById("mapWrap").innerHTML = ''; var projection = new ol.proj.Projection({ @@ -1015,7 +1001,6 @@ export default { units: "degrees", //extent:extent }); - var aerial = new ol.layer.Tile({ source: new ol.source.XYZ({ url: "http://t0.tianditu.gov.cn/img_w/wmts?" + @@ -1035,9 +1020,8 @@ export default { }); //获取坐标是否存在 var Zb; - if (this.tGeoOrganizationLng != null && this.tGeoOrganizationLat != null && this.tGeoOrganizationLng !="" - && this.tGeoOrganizationLat !="" && this.tGeoOrganizationLng !=undefined && this.tGeoOrganizationLat !=undefined) { - Zb = [this.tGeoOrganizationLng, this.tGeoOrganizationLat] + if (this.jingdu != null && this.jingdu !="") { + Zb = [this.jingdu, this.weidu] } else { Zb = [115.452752, 31.789033]; } @@ -1069,7 +1053,6 @@ export default { name: 'villageBorderLayer' }); map.addLayer(mapBorder); - // 添加已经存在的资源图层 let vectorSource = new ol.source.Vector(); for (let resource of resourceList) { @@ -1081,7 +1064,6 @@ export default { vectorSource.addFeature(feature); } } - let resourceLayer = new ol.layer.Vector({ source: vectorSource, style: (feature, resolution) => { @@ -1100,10 +1082,9 @@ export default { }); map.addLayer(resourceLayer); - //图层查询定位结束 ---------end //开始绘制地图 $("#drawPolygon").off("click").on("click", function () { - //map.removeLayer(hc_land); + //map.removeLayer(thePolygon); map.removeLayer(vector_drawing); that.drawInsert = null; map.removeInteraction(draw); @@ -1130,20 +1111,21 @@ export default { }); map.addInteraction(draw); } - addInteraction(); }); + //清除画图鼠标点击事件 $("#drawRemove").off("click").on("click", function () { - //map.addLayer(hc_land); + //map.addLayer(thePolygon); map.removeInteraction(draw); //map.removeLayer(vector_drawing); }); + //还原之前图层 $("#drawReset").off("click").on("click", function () { map.removeInteraction(draw); map.removeLayer(vector_drawing); - //map.addLayer(hc_land); + //map.addLayer(thePolygon); that.drawInsert = null; }); } @@ -1156,6 +1138,7 @@ export default { height: 75vh; overflow-y: scroll; } + #land-btn-wrap { position: relative; width: 40%; @@ -1163,7 +1146,6 @@ export default { bottom: 95%; z-index: 2000; } - #mapWrap { width: 100%; height: 100%;