diff --git a/src/views/modules/visual/plugin/power/components/screen-org-map.vue b/src/views/modules/visual/plugin/power/components/screen-org-map.vue index dbec75de..db7d4a6b 100644 --- a/src/views/modules/visual/plugin/power/components/screen-org-map.vue +++ b/src/views/modules/visual/plugin/power/components/screen-org-map.vue @@ -23,6 +23,7 @@ import { createStringXY } from 'ol/coordinate' import { defaults as defaultControls } from 'ol/control' import { mapGetters } from "vuex" import { Loading } from 'element-ui' +import { requestPost } from "@/js/dai/request" let map let mapView @@ -30,6 +31,21 @@ let gaodeMapLayer // 背景地图图层 let markerSource let markerLayer + + +let parentLayer;//上级组织图层 +let parentSource;//上级组织多边形 +let parentPolygon = [] +let subAgencyArray = [] +// let coordinates = "120.37330480288234,36.09522923236327,120.37414203308269,36.08471360544846,120.37538113592544,36.08156561138691,120.37856261681883,36.08273773673343,120.380806397435,36.082838206810294,120.38244737292013,36.082804716145915,120.3844902172151,36.082804716145915,120.38552838373664,36.08277122739781,120.38991547489212,36.08166608146377,120.39209227801209,36.08099629692024,120.3958095865403,36.080192555468,120.39912502242612,36.080192555468,120.40110089305742,36.08025953296422,120.40197160817334,36.082369356671684,120.4011678667211,36.08457964662348,120.40006272270334,36.08665598158284,120.3979863858277,36.08889976219901,120.39751753952164,36.09037329011105,120.39785243083527,36.09161239295379,120.3990245561818,36.09419106584173,120.39775196842349,36.09573157124999,120.3975845208504,36.09646833520601,120.37330480288234,36.09522923236327" +let polygonSource;//变电站标注多边形 +let iconSource; // icon +let polygonLayer;//变电站标注图层 +let select;//选中标注 +let iconLayer; // icon标注图层 +let iconCoordinators = [] + + const iconArray = [ 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png', 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png', @@ -40,21 +56,72 @@ const textColorArray = [ 'rgba(0, 146, 238, 0.75)', 'rgba(238, 151, 0, 0.8)' ] +let polygonColorArray = [ + 'rgba(210, 2, 2, 0.24)', + 'rgba(43, 231, 253, 0.25)', + 'rgba(183, 185, 0, 0.16)' +]; +let iconUrlArray = [ + 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png', + 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png', + 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png' +]; +//变电站标注的文字样式 var createTextStyle = function (feature) { return new Text({ textAlign: undefined, font: "18px Arial", - text: feature.values_.properties.name, + //fontFamily: "Courier New, monospace", + // fontWeight: "bold", + text: feature.values_.name, backgroundFill: new Fill({ - color: textColorArray[0] + // color: 'rgba(0, 146, 238, 0.75)' + color: textColorArray[feature.values_.colorIndex] }), padding: [4, 10, 4, 10], + //text: "变电站名称", fill: new Fill({ color: "#ffffff" }), + // stroke: new Stroke({ color: "#ffffff", width: 3 }), offsetY: -30, offsetX: -50, overflow: true, - }) -} + }); +}; +//上级组织标注样式 +var parentStyleFunction = (function () { + return function (feature) { + return new Style({ + // fill: new Fill({ + // color: [255, 255, 255, 0.3] + // }), + stroke: new Stroke({ + color: [0, 103, 182, 1], + width: 2 + }), + + // text: createTextStyle(feature) + });; + }; +})() + + +//变电站标注样式 +var polygonStyleFunction = (function () { + return function (feature) { + return new Style({ + fill: new Fill({ + // color: [255, 255, 255, 0.3] + color: polygonColorArray[feature.values_.colorIndex] + }), + stroke: new Stroke({ + color: polygonColorArray[feature.values_.colorIndex], + width: 3 + }), + + text: createTextStyle(feature) + });; + }; +})() export default { name: "screen-org-map", data() { @@ -64,8 +131,21 @@ export default { minZoom: 1, // 最小缩放 } }, - mounted() { + async mounted() { + + //加载组织数据 + await this.loadOrgData() this.initMap() + this.addParentLayer() + this.loadParentPolygon() + //添加标注图层 + this.addPolygonLayer() + + //添加icontuceng + this.addIconLayer() + + //加载当前园区的标注 + this.loadPolygon() }, methods: { initMap () { @@ -151,6 +231,271 @@ export default { markerSource.addFeatures(features) map.addLayer(markerLayer) }, + //加载组织数据 + async loadOrgData () { + + const url = "/gov/org/agency/maporg" + let params = { + orgId: '', + level: '' + } + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + + // this.orgData = data + // this.orgId = this.orgData.id + // this.orgLevel = this.orgData.level + parentPolygon = [] + parentPolygon.push(data) + if (data.children && data.children.length > 0) { + subAgencyArray = data.children + } else { + subAgencyArray = [] + } + + } else { + this.$message.error(msg) + } + + }, + //加载父级组织多边形 + loadParentPolygon () { + parentSource.clear()//清空变电站标注 + + let featureData = []//标注数据 + if (parentPolygon && parentPolygon.length > 0) {//判断是否存在下级标注 + let oneData = {} + + parentPolygon.forEach(agencyItem => { + + if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标 + oneData = { + type: 'Feature', + id: agencyItem.id, + properties: { + id: agencyItem.id, + level: agencyItem.level, + name: agencyItem.name + }, + geometry: { + type: 'Polygon', + coordinates: [], + }, + } + let coorArray = agencyItem.coordinates.split(',')//坐标数组 + + let itemArray = []//单个点位的[lon,lat],数组 + let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组 + + coorArray.forEach((item, index) => { + itemArray.push(item) + if (index % 2 == 0) {//偶 + + } else {//奇 + polygonArray.push(itemArray) + itemArray = [] + } + + }); + oneData.geometry.coordinates.push(polygonArray) + featureData.push(oneData) + } + }); + } + + if (featureData && featureData.length > 0) { + var geojsonObject = { + 'type': 'FeatureCollection', + 'features': featureData + }; + let feature = (new GeoJSON()).readFeatures(geojsonObject) + parentSource.addFeatures(feature) + + } + + }, + //加载当前园区的标注 + loadPolygon () { + let featureData = []//标注数据 + + if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注 + let oneData = {} + + let count = 0 + for (let i = 0; i < subAgencyArray.length; i++) { + const agencyItem = subAgencyArray[i] + + + if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标 + let urlNum = count % 3 + count++ + + oneData = { + type: 'Feature', + id: agencyItem.id, + properties: { + id: agencyItem.id, + level: agencyItem.level, + name: agencyItem.name, + colorIndex: urlNum//颜色随机的索引 + }, + geometry: { + type: 'Polygon', + coordinates: [], + }, + } + let coorArray = agencyItem.coordinates.split(',')//坐标数组 + + let itemArray = []//单个点位的[lon,lat],数组 + let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组 + + coorArray.forEach((item, index) => { + itemArray.push(item) + if (index % 2 == 0) {//偶 + + } else {//奇 + polygonArray.push(itemArray) + itemArray = [] + } + + }); + oneData.geometry.coordinates.push(polygonArray) + featureData.push(oneData) + } + } + } + + if (featureData && featureData.length > 0) { + var geojsonObject = { + 'type': 'FeatureCollection', + 'features': featureData + }; + let feature = (new GeoJSON()).readFeatures(geojsonObject) + polygonSource.addFeatures(feature) + + let iconFeatures = []; + feature.forEach(oneIcon => { + var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界,格式为[minx,miny,maxx,maxy] + // var center = getCenter(extent); //获取边界区域的中心位置 + //添加标注 + let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2 + let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2 + + let oneArray = [x, y] + iconCoordinators.push(oneArray) + // debugger + //地图icon样式 + let oneCctv = new Feature({ + geometry: new Point([x, y]), + id: oneIcon.id_, + properties: { + type: "icon", + id: oneIcon.id_ + } + }); + + let iconStyle = new Style({ + image: new Icon({ + // anchor: [0.5, 0.5], + // imgSize: [32, 32], + scale: 0.5, + // src: "/img/largeScreen/icon_camra.png" + // src: "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png" + src: iconUrlArray[oneIcon.values_.colorIndex] + }) + }); + + oneCctv.setStyle(iconStyle); + iconFeatures.push(oneCctv); + + }); + + iconSource.addFeatures(iconFeatures); + } + + }, + //添加变电站标注图层 + addParentLayer () { + parentSource = new VectorSource({ + //features: (new GeoJSON()).readFeatures(geojsonObject) + }); + + parentLayer = new VectorLayer({ + source: parentSource, + style: parentStyleFunction, + zIndex: 50 + }); + map.addLayer(parentLayer) + }, + //添加变电站标注图层 + addPolygonLayer () { + polygonSource = new VectorSource({ + //features: (new GeoJSON()).readFeatures(geojsonObject) + }); + + polygonLayer = new VectorLayer({ + source: polygonSource, + style: polygonStyleFunction, + zIndex: 50 + }); + + //选中多边形后的样式 + var overlayStyle = (function () { + + return function (feature) { + var styles = {}; + styles['Polygon'] = [ + new Style({ + stroke: new Stroke({ + color: '#ec9000', + width: 2 + }) + }), + + new Style({ + fill: new Fill({ + color: 'rgba(0, 0, 255, 0.1)' + }) + }), + new Style({ + text: createTextStyle(feature) + }) + ]; + styles['MultiPolygon'] = styles['Polygon']; + return styles[feature.getGeometry().getType()]; + }; + })(); + + select = new Select({ + style: overlayStyle + }); + + + map.addLayer(polygonLayer) + map.addInteraction(select); + + // select.on('select', e => { + // this.toSubAgency('polygon', e) + // }); + + }, + + addIconLayer () { + iconSource = new VectorSource({ + //features: (new GeoJSON()).readFeatures(geojsonObject) + }); + + iconLayer = new VectorLayer({ + source: iconSource, + zIndex: 70 + }); + + map.addLayer(iconLayer); + + }, + }, } diff --git a/src/views/modules/visual/plugin/power/organization.vue b/src/views/modules/visual/plugin/power/organization.vue index 62fdfc1f..f8501043 100644 --- a/src/views/modules/visual/plugin/power/organization.vue +++ b/src/views/modules/visual/plugin/power/organization.vue @@ -129,7 +129,7 @@ export default { return { headerList: [ { title: "序号", coulmn: 'index', width: '100px' }, - { title: "党员", coulmn: 'ownerName' }, + { title: "党员", coulmn: 'kernelMemberNameConcat' }, { title: "地址", coulmn: 'address' } ], headerStyle: [