From 604b007d2f9efc50967ad9e524dfe65d53a6c289 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Tue, 16 Nov 2021 15:40:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=A0=B7=E5=BC=8F=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/img/largeScreen/icon_camra.png | Bin 0 -> 6926 bytes src/assets/scss/common.scss | 2 +- src/assets/scss/main-shuju.scss | 52 ++-- .../scss/modules/visual/basicInfoMain.scss | 10 +- .../visual/basicinfo/basicInfoMain.vue | 271 +++++++++++------- 5 files changed, 206 insertions(+), 129 deletions(-) create mode 100644 public/img/largeScreen/icon_camra.png diff --git a/public/img/largeScreen/icon_camra.png b/public/img/largeScreen/icon_camra.png new file mode 100644 index 0000000000000000000000000000000000000000..a9440c64c48bc77895396d4a2765f850db69f10a GIT binary patch literal 6926 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 U@zvarUH||907*qoM6N<$f_!IQ#sB~S literal 0 HcmV?d00001 diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss index c16afbd5..235b0b2b 100644 --- a/src/assets/scss/common.scss +++ b/src/assets/scss/common.scss @@ -560,7 +560,7 @@ img { .aui-content { position: relative; padding: $content--padding; - min-height: calc(100vh - #{$navbar--height}); + // min-height: calc(100vh - #{$navbar--height}); &__wrapper { position: relative; margin-left: $sidebar--width; diff --git a/src/assets/scss/main-shuju.scss b/src/assets/scss/main-shuju.scss index 7fbd5c19..ce4ca79d 100644 --- a/src/assets/scss/main-shuju.scss +++ b/src/assets/scss/main-shuju.scss @@ -1,5 +1,5 @@ -@import "~@/element-ui/theme-variables.scss"; -@import "./variables.scss"; +@import '~@/element-ui/theme-variables.scss'; +@import './variables.scss'; // $navbar--height: 60px; body { @@ -72,8 +72,8 @@ body { background-color: transparent; } &-add { - > span > *[class*="el-icon-"], - > span > *[class*="icon"] { + > span > *[class*='el-icon-'], + > span > *[class*='icon'] { vertical-align: middle; font-size: 18px; margin-right: 5px; @@ -233,13 +233,17 @@ body { font-family: FZZCHJW; font-weight: normal; color: #ffffff; - background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); + background: linear-gradient( + 0deg, + #03c7ff 24.609375%, + #ffffff 81.0791015625% + ); -webkit-background-clip: text; -webkit-text-fill-color: rgba(#fff, 0.7); &::before { position: absolute; - content: ""; + content: ''; z-index: 100000; display: block; bottom: -10px; @@ -291,7 +295,7 @@ body { &.is-active { &::before { position: absolute; - content: ""; + content: ''; display: block; bottom: -6px; left: 0; @@ -313,7 +317,7 @@ body { &::after { position: absolute; - content: ""; + content: ''; right: 0; top: 0; bottom: 0; @@ -385,8 +389,8 @@ body { } } .navbar__search { - > *[class*="el-icon-"], - > *[class*="icon"] { + > *[class*='el-icon-'], + > *[class*='icon'] { display: inline-block; vertical-align: middle; } @@ -427,7 +431,7 @@ body { ------------------------------ */ .g-cnt { position: relative; - padding: $content--padding; + // padding: $content--padding; min-height: calc(100vh - #{$navbar--height}); background-color: transparent; @@ -442,7 +446,9 @@ body { min-height: calc(#{$content--fill-height} - 2px); } > .aui-card--fill > .el-card__header + .el-card__body { - min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px); + min-height: calc( + #{$content--fill-height} - #{$content--card-header-height} - 2px + ); } &--tabs { padding: $content--tabs-header-height 0 0; @@ -514,7 +520,7 @@ body { position: absolute; bottom: 0; left: 0; - content: ""; + content: ''; width: 100%; height: 2px; background-color: $--color-primary; @@ -547,10 +553,15 @@ body { min-height: calc(#{$content--fill-height-tabs} - 2px); } > .aui-card--fill > .el-card__header + .el-card__body { - min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); + min-height: calc( + #{$content--fill-height-tabs} - #{$content--card-header-height} - + 2px + ); } &.is-iframe { - height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2}); + height: calc( + #{$content--fill-height-tabs} + #{$content--padding * 2} + ); margin: -$content--padding; min-height: auto; > .aui-card--fill { @@ -569,7 +580,10 @@ body { background-color: #fff; } > .aui-card--fill > .el-card__header + .el-card__body { - height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); + height: calc( + #{$content--fill-height-tabs} - #{$content--card-header-height} - + 2px + ); } } } @@ -599,7 +613,7 @@ body { /* Page ------------------------------ */ -*[class*="aui-page__"] { +*[class*='aui-page__'] { padding-top: 0; .aui-content { min-height: auto; @@ -611,7 +625,9 @@ body { min-height: calc(100vh - #{$content--padding * 2} - 2px); } > .aui-card--fill > .el-card__header + .el-card__body { - min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px); + min-height: calc( + 100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px + ); } } } diff --git a/src/assets/scss/modules/visual/basicInfoMain.scss b/src/assets/scss/modules/visual/basicInfoMain.scss index 9858ee38..1826d259 100644 --- a/src/assets/scss/modules/visual/basicInfoMain.scss +++ b/src/assets/scss/modules/visual/basicInfoMain.scss @@ -33,9 +33,15 @@ display: flex; .div_map { + box-sizing: border-box; width: 100%; - height: calc(88vh - 8px); - border-radius: 5px; + // padding: 10px 5px 13px; + // margin-top: 8px; + height: calc(88vh); + color: #fff; + // background: url('../../../img/modules/visual/warning-box.png') no-repeat + // center; + // background-size: 100% 100%; } .div_data { diff --git a/src/views/modules/visual/basicinfo/basicInfoMain.vue b/src/views/modules/visual/basicinfo/basicInfoMain.vue index 19c5ab18..a8361c10 100644 --- a/src/views/modules/visual/basicinfo/basicInfoMain.vue +++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue @@ -29,8 +29,15 @@ @refreshInfoList="refreshInfoList">
+ ref="map"> + +
+ +
@@ -98,8 +105,15 @@ import XYZ from 'ol/source/XYZ.js'; import VectorLayer from 'ol/layer/Vector.js'; import VectorSource from 'ol/source/Vector.js'; import GeoJSON from 'ol/format/GeoJSON.js'; +import Point from "ol/geom/Point.js"; +import Feature from "ol/Feature.js"; +import Overlay from 'ol/Overlay'; import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js'; -import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style.js'; +import { getCenter, boundingExtent } from 'ol/extent.js'; +import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js'; +import { toStringHDMS } from 'ol/coordinate' + +import { fromLonLat, toLonLat } from "ol/proj"; import { mapGetters } from "vuex"; import { Loading } from 'element-ui'; //引入Loading服务 import { requestPost } from "@/js/dai/request"; @@ -117,34 +131,62 @@ let map; let mapView; let gaodeMapLayer;//背景地图图层 let polygonLayer;//变电站标注图层 +let iconLayer; // icon标注图层 +let iconSource; // icon let polygonSource;//变电站标注多边形 let select;//选中标注 + +//url图标 + +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' +]; +let textColorArray = [ + 'rgba(236, 69, 4, 0.66)', + '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)' +]; //变电站标注的文字样式 var createTextStyle = function (feature) { return new Text({ textAlign: undefined, - font: "bold 18px Arial", + font: "18px Arial", //fontFamily: "Courier New, monospace", - fontWeight: "bold", + // fontWeight: "bold", text: feature.values_.name, + backgroundFill: new Fill({ + // color: 'rgba(0, 146, 238, 0.75)' + color: textColorArray[feature.values_.index - 1] + }), + padding: [4, 10, 4, 10], //text: "变电站名称", - fill: new Fill({ color: "#007ab9" }), - stroke: new Stroke({ color: "#ffffff", width: 3 }), - offsetY: 0, + fill: new Fill({ color: "#ffffff" }), + // stroke: new Stroke({ color: "#ffffff", width: 3 }), + offsetY: -30, + offsetX: -50, overflow: true, }); }; + //变电站标注样式 var polygonStyleFunction = (function () { return function (feature) { return new Style({ fill: new Fill({ - color: [255, 255, 255, 0.3] + // color: [255, 255, 255, 0.3] + color: polygonColorArray[feature.values_.index - 1] }), stroke: new Stroke({ - color: [0, 153, 255, 1], + color: polygonColorArray[feature.values_.index - 1], width: 3 }), @@ -166,6 +208,9 @@ const vueGis = { orgLevel: '', subAgencyArray: [],//下拉框数据 + iconCoordinators: [], + currentCoordinate: null, + overlay: null, //右侧搜索 searchName: "", @@ -173,92 +218,6 @@ const vueGis = { //右侧列表 listData: [],//得到的数据 listDatashow: [],//处理成一行两列的数据 - listData1: [ - { - id: "1", - label: "党员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dabing.png') - }, - { - id: "2", - label: "低保人员", - count: 30000, - dataIcon: '' - }, - { - id: "3", - label: "保障房人员", - count: 3, - dataIcon: '' - }, - { - id: "4", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "5", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "6", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "7", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "8", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "9", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "10", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "11", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "12", - label: "失业人员", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "13", - label: "失业人员3", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - { - id: "14", - label: "失业人员2", - count: 300, - dataIcon: require('../../../../assets/img/modules/visual/dibao.png') - }, - ], //下钻层级记录 runNum: 0, @@ -278,6 +237,9 @@ const vueGis = { //添加标注图层 this.addPolygonLayer() + //添加icontuceng + this.addIconLayer() + //加载当前园区的标注 this.loadPolygon(this.subAgencyArray) @@ -484,13 +446,16 @@ const vueGis = { subAgencyArray.forEach(agencyItem => { if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标 + let urlNum = this.getRndBetween(1, 3) + oneData = { type: 'Feature', id: agencyItem.id, properties: { id: agencyItem.id, level: agencyItem.level, - name: agencyItem.name + name: agencyItem.name, + index: urlNum//颜色随机的索引 }, geometry: { type: 'Polygon', @@ -526,12 +491,56 @@ const vueGis = { '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] + this.iconCoordinators.push(oneArray) + + //视频监控样式 + let oneCctv = new Feature({ + geometry: new Point([x, y]), + id: oneIcon.id, + properties: { + type: "icon", + id: oneIcon.id + } + }); + + console.log(oneIcon.values_) + + 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_.index - 1] + }) + }); + + oneCctv.setStyle(iconStyle); + iconFeatures.push(oneCctv); + + }); + console.log(iconFeatures) + + iconSource.clear(); //清空cctyv标注 + iconSource.addFeatures(iconFeatures); } - }, + // this.addGif() + }, //设置地图定位的中心点和缩放级别 setMapLocation () { this.centerPoint = [] @@ -576,19 +585,41 @@ const vueGis = { projection: 'EPSG:4326', zoom: this.zoom, minZoom: this.minZoom - }), - //初始化map和地图底图 - //创建地图容器 - map = new Map({ - layers: [gaodeMapLayer], - //加载瓦片图层数据 - view: mapView, - target: 'map' - //目标加载到map中 - }) + }) + // 弹窗 + this.overlay = new Overlay({ + element: this.$refs.popup, // 弹窗标签，在html里 + autoPan: true, // 如果弹窗在底图边缘时，底图会移动 + autoPanAnimation: { // 底图移动动画 + duration: 250 + } + }) + console.log(this.overlay) + //初始化map和地图底图 + //创建地图容器 + map = new Map({ + layers: [gaodeMapLayer], + //加载瓦片图层数据 + view: mapView, + target: 'map', + overlays: [this.overlay], // 把弹窗加入地图 + //目标加载到map中 + }) + let that = this map.on('singleclick', function (e) { console.log(e.coordinate) + const coordinate = e.coordinate // 获取坐标 + const hdms = toStringHDMS(toLonLat(coordinate)) // 转换坐标格式 + + + setTimeout(() => { + // 设置弹窗位置 + // 这里要设置定时器，不然弹窗首次出现，底图会跑偏 + that.currentCoordinate = hdms // 保存坐标点 + that.overlay.setPosition(coordinate) + + }, 0) // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); }) @@ -657,6 +688,25 @@ const vueGis = { }, + addIconLayer () { + iconSource = new VectorSource({ + //features: (new GeoJSON()).readFeatures(geojsonObject) + }); + + iconLayer = new VectorLayer({ + source: iconSource, + zIndex: 70 + }); + + map.addLayer(iconLayer); + + }, + + //取随机数 + getRndBetween (lowerLimit, upperLimit) { + return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit; + }, + //开启加载动画 startLoading () { loading = Loading.service({ @@ -715,7 +765,12 @@ export default vueGis; scoped > -