From 085945bdc2ab20ac6cffdf9ce1adac4cf76ea529 Mon Sep 17 00:00:00 2001 From: QI_YUJIE <2878090898@qq.com> Date: Sun, 23 Apr 2023 15:58:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=A4=E6=B8=85=E4=B8=89=E5=8C=96=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/plotPremises/mark.png | Bin 0 -> 1769 bytes src/views/plotPremisesMobile/index.vue | 416 +++++++++++++++++++++++- 2 files changed, 413 insertions(+), 3 deletions(-) create mode 100644 src/assets/images/plotPremises/mark.png diff --git a/src/assets/images/plotPremises/mark.png b/src/assets/images/plotPremises/mark.png new file mode 100644 index 0000000000000000000000000000000000000000..f5f29b0c15f4da567b805c837574805e26fef6d1 GIT binary patch literal 1769 zcmaJ?X;2eq7~TP-a#{sJppY1}P>vix0*QohEMO|(22qQWV}StK4as5x208*QSca=g ztuQExCm=9VWt1ZY+R9;7zhj=~d7th6BmL!5%}{OOs)gE4PQGmdgqt zB;`wlVpNF0c$FfTha{m)0_ODZ6hz_`Sy;MMCahp2Iaf@g5Xq{PmVq43|3gKh6|@u$ zhW_#UpTg46WHCevhNMW6gpVCuw52MPnBgUXxF{kCMUaH$Dh9?PC?btT#CQkH65e{J z5EdXZ>1T@s4u`>pr6?EXLu`;qz$A!5p@2cAyEsxEs6JjkAcaEl_Vl26P`qf)E@Yac z6UEcTVVMge{3H3j&r+FgS6wG;XER_wZb!3I4-*#qE~BkFM`g;%Je0{<{KW;6v zb^TKV;^tI#yR&1*hC(gn^VTdy;kw{5_B~N+0{?x-=!5CnTfwJrhHEy)YvK-HMFSi z$+bu4suiI9f@kZahrYe-Q5PG|pPhENp+BYmtPPmeRDNHai}N@>{y=w5?Qo)NLe~qM znR^8fbv1_z@6(Kk!1&IM^(s}S4prg{!=;>Qb#&v7Pzp8~L% zPOHweXPHfBWgA`Xsu(@1Wtr61cDXx_g+3XvF@P0? z@is#Z??X;oy)lF5E|tzZ;fJdXYg+5_r__|LLesOgX%$uJpNENScU=+6yJ3YWGMQh_ z9<=I!3TKM%sf}BuoWNZ(dAy}g#@w9PmK~J+bY13x)M}VqP>^MI{Lrrme7&b8jc3$$KCQ~a&H82arP4q4w!6)i+^Gn+n!oB{dbOhG z;z_W}df+xmou+d=^?r7EP2cc(QGRa+Z=odMH+#3z1D(v8??(Fkw~YkU^>+%byqa!L ztv%M`GK5mdjlxb`Nc1fat56XFqQ~i9{-u_^ import $ from "jquery"; +import { getConfigKey } from "@/utils/data"; +import { treeselect } from "@/api/agriculturalTrusteeship"; export default { data() { @@ -205,10 +207,44 @@ export default { ], }, ], + addrOptions: [], + + map: "", // 地图 + // countyBorder: "", // 区县边界 + // townBorder: "", // 乡镇边界 + // villageBorder: "", // 村边界 + borderLayer: "", // 区域边界图层 + deptLayer: "", // 坐标点图层 + userRole: "", // 记录用户身份 + cityId: null, // 记录市的deptId + countyId: null, // 记录区县的deptId + townId: null, // 记录乡镇的deptId + deptPointLevel: null, // 地图上显示的坐标点级别 + + mapGeoServerUrl: "", // 加载geoserver地址 + countyBorderLayerName: "", // 区县边界图层名称 + townBorderLayerName: "", // 乡镇边界图层名称 + villageBorderLayerName: "", // 村边界图层名称 }; }, created() { + }, + mounted() { + // 获取geoserver的地址 + this.getGeoServerUrl(); + // 获取区县边界图层名称 + this.getCountyBorderLayerName(); + // 获取乡镇边界的图层名称 + this.getTownBorderLayerName(); + // 获取村边界的图层名称 + this.getVillageBorderLayerName(); + // 获取部门下拉树列表 + treeselect().then(response => { + this.addrOptions = response.data; + // 初始化地图 + this.initMap(); + }); }, methods: { tabChange(name){ @@ -219,7 +255,381 @@ export default { this.show = false; this.showZF = false; this.showZD = true; - } + }, + //获取geoserver的地址 + getGeoServerUrl() { + getConfigKey("system.geoServer.url").then(response => { + this.mapGeoServerUrl = response.msg; + }); + }, + //获取区县边界的图层名称 + getCountyBorderLayerName() { + getConfigKey("geoserver.layer.countyBorder").then(response => { + this.countyBorderLayerName = response.msg; + }); + }, + //获取乡镇边界的图层名称 + getTownBorderLayerName() { + getConfigKey("geoserver.layer.townBorder").then(response => { + this.townBorderLayerName = response.msg; + }); + }, + //获取村边界的图层名称 + getVillageBorderLayerName() { + getConfigKey("geoserver.layer.villageBorder").then(response => { + this.villageBorderLayerName = response.msg; + }); + }, + // 初始化地图 + initMap() { + const dept = this.addrOptions[0]; + // 定义地图中心坐标 + let mapCenterLocation; + if (dept.lng && dept.lat) { + mapCenterLocation = [dept.lng, dept.lat]; + } else { + mapCenterLocation = [116.391458, 39.902377]; + } + + document.getElementById("mapWrap").innerHTML = ""; + // 定义地图投影 + let projection = new ol.proj.Projection({ + code: "EPSG:3857", + units: "degrees", + }); + // 定义地图图层 + let 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: "卫星影像图", + }); + let 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: "天地图文字标注--卫星影像图", + }); + //加载地图 + this.map = new ol.Map({ + controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), + layers: [aerial, yingxzi], + projection: projection, + target: "mapWrap", + view: new ol.View({ + center: ol.proj.fromLonLat(mapCenterLocation), // 地图中心坐标 + zoom: 9.5, + minZoom: 1, //地图缩小限制 + maxZoom: 18, //地图放大限制 + // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416] + }), + interactions: ol.interaction.defaults({ + doubleClickZoom: false, // 双击放大地图 + // mouseWheelZoom: false, // 鼠标滚轮放大地图 + // shiftDragZoom: false, // shift + 鼠标左键拖拽 放大地图 + }) + }); + + if (dept.deptLevel === '5') { + // 登录身份为市级领导 + this.userRole = 'cityLeader'; + this.cityId = dept.id; + this.deptPointLevel = '4'; + // 添加区县边界 + this.addCountyBorder(); + } else if (dept.deptLevel === '4') { + // 登录身份为县级领导 + this.userRole = 'countyLeader'; + this.countyId = dept.id; + this.deptPointLevel = '3'; + // 添加乡镇边界 + this.addTownBorder(dept.id); + this.map.getView().setZoom(10.5); + } + // else if (dept.deptLevel === '3') { + // // 登录身份为镇级领导 + // this.userRole = 'townLeader'; + // this.townId = dept.id; + // this.deptPointLevel = '2'; + // // 添加村边界 + // this.addVillageBorder(dept.id); + // this.map.getView().setZoom(12.5); + // } + if (dept.children) { + this.addDeptLayer(dept.children); + } + + this.map.on("click", (evt) => { + let feature = this.map.forEachFeatureAtPixel( + evt.pixel, + (feature) => feature + ); + if (feature) { + // 镇级：加载村级坐标点 + if (feature.get('level') === 'deptPoint') { + const deptId = feature.get('deptId'); + const deptLevel = feature.get('deptLevel'); + const lng = feature.get('lng'); + const lat = feature.get('lat'); + if (deptLevel === '4' || deptLevel === '3') { + if (deptLevel === '4') { + this.countyId = deptId; + this.deptPointLevel = '3'; + this.map.removeLayer(this.borderLayer); + this.borderLayer = ''; + // 添加乡镇边界 + this.addTownBorder(deptId); + this.map.getView().animate({ + center: ol.proj.fromLonLat([lng, lat]), // 中心点 + zoom: 10.5, // 缩放级别 + rotation: undefined, // 缩放完成view视图旋转弧度 + duration: 1000, // 缩放持续时间，默认不需要设置 + }); + } else if (deptLevel === '3') { + this.townId = deptId; + this.deptPointLevel = '2'; + this.map.removeLayer(this.borderLayer); + this.borderLayer = ''; + // 添加村边界 + const cqlFilter = "parent_id = '" + deptId + "'"; + this.addVillageBorder(cqlFilter); + this.map.getView().animate({ + center: ol.proj.fromLonLat([lng, lat]), // 中心点 + zoom: 12.5, // 缩放级别 + rotation: undefined, // 缩放完成view视图旋转弧度 + duration: 1000, // 缩放持续时间，默认不需要设置 + }); + } + const deptNode = this.findNode(this.addrOptions, deptId); + if (deptNode && deptNode.children) { + this.map.removeLayer(this.deptLayer); + this.deptLayer = ''; + this.addDeptLayer(deptNode.children); + } + } else if (deptLevel === '2') { + this.map.removeLayer(this.borderLayer); + this.borderLayer = ''; + // 添加村边界 + const cqlFilter = "dept_id = '" + deptId + "'"; + this.addVillageBorder(cqlFilter); + + let villagePoint = { + id: deptId, + label: feature.get('deptName'), + lng: lng, + lat: lat, + deptLevel: '-1', // -1代表最末级的坐标点 + }; + this.deptPointLevel = '-1'; // -1代表最末级的坐标点 + let depts = []; + depts.push(villagePoint); + this.map.removeLayer(this.deptLayer); + this.deptLayer = ''; + this.addDeptLayer(depts); + this.map.getView().animate({ + center: ol.proj.fromLonLat([lng, lat]), // 中心点 + zoom: 16, // 缩放级别 + rotation: undefined, // 缩放完成view视图旋转弧度 + duration: 1000, // 缩放持续时间，默认不需要设置 + }); + } + } + } + }); + + // 缩小地图，重新加载页面 + this.map.on("moveend", (evt) => { + const zoom = this.map.getView().getZoom(); + if (this.userRole === 'cityLeader') { + if (this.deptPointLevel === '-1' && zoom < 13) { + this.deptPointLevel = '2'; + this.map.removeLayer(this.borderLayer); + this.borderLayer = ""; + const cqlFilter = "parent_id = '" + this.townId + "'"; + this.addVillageBorder(cqlFilter); + + this.map.removeLayer(this.deptLayer); + this.deptLayer = ""; + const deptNode = this.findNode(this.addrOptions, this.townId); + if (deptNode && deptNode.children) { + this.addDeptLayer(deptNode.children); + } + } else if (this.deptPointLevel === '2' && zoom < 11) { + this.deptPointLevel = '3'; + this.map.removeLayer(this.borderLayer); + this.borderLayer = ""; + this.addTownBorder(this.countyId); + + this.map.removeLayer(this.deptLayer); + this.deptLayer = ""; + const deptNode = this.findNode(this.addrOptions, this.countyId); + if (deptNode && deptNode.children) { + this.addDeptLayer(deptNode.children); + } + } else if (this.deptPointLevel === '3' && zoom < 9.5) { + this.deptPointLevel = '4'; + this.map.removeLayer(this.borderLayer); + this.borderLayer = ""; + this.addCountyBorder(); + + this.map.removeLayer(this.deptLayer); + this.deptLayer = ""; + const deptNode = this.findNode(this.addrOptions, this.cityId); + if (deptNode && deptNode.children) { + this.addDeptLayer(deptNode.children); + } + } + } else if (this.userRole === 'countyLeader') { + if (this.deptPointLevel === '-1' && zoom < 13) { + this.deptPointLevel = '2'; + this.map.removeLayer(this.borderLayer); + this.borderLayer = ""; + const cqlFilter = "parent_id = '" + this.townId + "'"; + this.addVillageBorder(cqlFilter); + + this.map.removeLayer(this.deptLayer); + this.deptLayer = ""; + const deptNode = this.findNode(this.addrOptions, this.townId); + if (deptNode && deptNode.children) { + this.addDeptLayer(deptNode.children); + } + } else if (this.deptPointLevel === '2' && zoom < 11) { + this.deptPointLevel = '3'; + this.map.removeLayer(this.borderLayer); + this.borderLayer = ""; + this.addTownBorder(this.countyId); + + this.map.removeLayer(this.deptLayer); + this.deptLayer = ""; + const deptNode = this.findNode(this.addrOptions, this.countyId); + if (deptNode && deptNode.children) { + this.addDeptLayer(deptNode.children); + } + } + } + }); + }, + findNode(tree, deptId) { + for (const node of tree) { + if (node.id === deptId) return node; + if (node.children) { + const res = this.findNode(node.children, deptId); + if (res) return res; + } + } + return null; + }, + // 添加区县边界 + addCountyBorder() { + this.borderLayer = new ol.layer.Image({ + source: new ol.source.ImageWMS({ + url: this.mapGeoServerUrl + '/wms', + params: { + LAYERS: this.countyBorderLayerName, + SRID: 3857, + } + }), + name: 'countyBorderLayer' + }); + this.map.getLayers().insertAt(2, this.borderLayer); + }, + // 添加乡镇边界 + addTownBorder(deptId) { + this.borderLayer = new ol.layer.Image({ + source: new ol.source.ImageWMS({ + url: this.mapGeoServerUrl + "/wms", + params: { + LAYERS: this.townBorderLayerName, + // TILED: true, + cql_filter: "parent_id = '" + deptId + "'", + SRID: 3857, + }, + }), + name: 'townBorderLayer' + }); + this.map.getLayers().insertAt(2, this.borderLayer); + }, + // 添加村边界 + addVillageBorder(cqlFilter) { + this.borderLayer = new ol.layer.Image({ + source: new ol.source.ImageWMS({ + url: this.mapGeoServerUrl + '/wms', + params: { + LAYERS: this.villageBorderLayerName, + cql_filter: cqlFilter, + SRID: 3857, + }, + }), + name: 'villageBorderLayer' + }); + this.map.getLayers().insertAt(2, this.borderLayer); + }, + // 创建矢量数据源 + addDeptLayer(depts) { + const createFeatureStyle = function(feature) { + 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, + // rotation: (Math.PI / 180) * 20, + //图片路径 + src: require("../../assets/images/plotPremises/mark.png"), + }), + text: new ol.style.Text({ + textAlign: "center", //位置 + textBaseline: "bottom", //基准线 + font: "normal 14px 微软雅黑", //文字样式 + text: feature.get("deptName"), //文本内容 + fill: new ol.style.Fill({ + //文本填充样式（即文字颜色) + color: "#ffffff", + }), + }), + }); + }; + let features = []; + for (let i = 0; i < depts.length; i++) { + let feature = new ol.Feature({ + geometry: new ol.geom.Point( + ol.proj.fromLonLat([depts[i].lng, depts[i].lat]) + ), + deptId: depts[i].id, + deptName: depts[i].label, + // orgCode: depts[i].orgCode, + lat: depts[i].lat, + lng: depts[i].lng, + deptLevel: depts[i].deptLevel, + level: 'deptPoint', + }); + // 创建下级部门坐标点 + feature.setStyle(createFeatureStyle(feature)); + features.push(feature); + } + const vectorSource = new ol.source.Vector({ + features: features, + }); + // 创建矢量图层 + this.deptLayer = new ol.layer.Vector({ + source: vectorSource, + name: 'deptLayer' + }); + // this.map.addLayer(this.deptLayer); + this.map.getLayers().insertAt(3, this.deptLayer); + }, }, }; @@ -236,8 +646,8 @@ export default { .map_main{ width: 100%; height: 100vh; - background: url("../../../static/images/plotPremises/map_bg.png") no-repeat center; - background-size: 100%; + /*background: url("../../../static/images/plotPremises/map_bg.png") no-repeat center;*/ + /*background-size: 100%;*/ } /deep/ .van-popup{ background: #F1F0F5;