diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss index 07c430f5..098753e0 100644 --- a/src/assets/scss/modules/visual/processAnalyze.scss +++ b/src/assets/scss/modules/visual/processAnalyze.scss @@ -122,6 +122,7 @@ } .echart-line { margin-top: 10px; + height: 100%; } } .g-count { @@ -244,7 +245,7 @@ text-align: center; position: relative; width: 500px; - // height: 100%; + height: 100%; box-sizing: border-box; } diff --git a/src/views/modules/visual/communityGovern/cpt/project-info.vue b/src/views/modules/visual/communityGovern/cpt/project-info.vue index 30e768c6..c1ae0326 100644 --- a/src/views/modules/visual/communityGovern/cpt/project-info.vue +++ b/src/views/modules/visual/communityGovern/cpt/project-info.vue @@ -581,7 +581,7 @@ export default { const { data, code, msg } = await requestPost(url, { categoryCodeList: this.categoryCodes, userId: this.userId, - + projectId: this.projectIdCopy }); if (code === 0) { diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue index c20b4ece..f640be1b 100644 --- a/src/views/modules/visual/communityGovern/processAnalyze.vue +++ b/src/views/modules/visual/communityGovern/processAnalyze.vue @@ -249,6 +249,8 @@ export default { await this.getLineChart() await this.loadProjectlist() + this.assignData() + }, assignData () { @@ -485,6 +487,7 @@ export default { }, assignLineChart () { + this.lineOption = lineOption() this.$refs.lineChart.setOption(this.lineOption, true) this.$refs.lineChart.setOption({ diff --git a/src/views/modules/visual/components/screen-echarts-frame/index.vue b/src/views/modules/visual/components/screen-echarts-frame/index.vue index e34d34df..66736e48 100644 --- a/src/views/modules/visual/components/screen-echarts-frame/index.vue +++ b/src/views/modules/visual/components/screen-echarts-frame/index.vue @@ -1,10 +1,9 @@ diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue index 3e593ed5..eba9be98 100644 --- a/src/views/modules/visual/components/screen-map/index.vue +++ b/src/views/modules/visual/components/screen-map/index.vue @@ -3,8 +3,15 @@
- +
+ @@ -28,6 +35,7 @@ import { getDistance } from 'ol/sphere'; import { mapGetters } from "vuex"; import { Loading } from 'element-ui'; //引入Loading服务 + import { requestPost } from "@/js/dai/request"; @@ -81,7 +89,8 @@ const vueGis = { centerPoint: [],//中心点位置 zoom: 14,//缩放范围:区14 minZoom: 1,//最小缩放 - + overlay: null, + showPopup: false, mapInfo: { }, @@ -172,6 +181,13 @@ const vueGis = { this.loadIcon() } + if (this.isAddOpenlay) { + //初始化icon图层 + this.addOverlay() + } + + + this.addMapClick() }, @@ -365,8 +381,6 @@ const vueGis = { return (distance < max || distance === max) - - // debugger // return // var wgs84Sphere = new ol.Sphere(6378137); @@ -405,21 +419,8 @@ const vueGis = { //目标加载到map中 }) - let that = this - map.on('singleclick', function (e) { - const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) { - return feature; - }); - if (feature) { - console.log(feature) - that.$emit('clickFeature', feature) - - } - - }) - //去除双击放大效果 const dblClickInteraction = map .getInteractions() @@ -454,7 +455,6 @@ const vueGis = { }, - //初始化多边形标注图层 initPolygonLayer () { polygonSource = new VectorSource({ @@ -542,6 +542,83 @@ const vueGis = { // }); }, + //添加覆盖层 + addOverlay () { + // 使用变量存储弹窗所需的 DOM 对象 + var container = document.getElementById("popup"); + var closer = document.getElementById("popup-closer"); + var content = document.getElementById("popup-content"); + + // 创建一个弹窗 Overlay 对象 + this.overlay = new Overlay({ + element: container, //绑定 Overlay 对象和 DOM 对象的 + autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果 + autoPanAnimation: { + duration: 250 //自动平移效果的动画时间 9毫秒 + }, + zIndex: 100 + }); + // 将弹窗添加到 map 地图中 + map.addOverlay(this.overlay); + let _that = this; + + /** + * 为弹窗添加一个响应关闭的函数 + */ + closer.onclick = function () { + _that.overlay.setPosition(undefined); + closer.blur(); + return false; + }; + }, + + //注册地图点击事件 + addMapClick () { + let _that = this + + + map.on("click", function (evt) { + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); + if (feature) { + console.log(feature) + if (_that.clickType === 'back') { + + _that.$emit('clickFeature', feature) + + + } else if (_that.clickType === 'popup') { + _that.$emit('clickFeature', feature) + // _that.overlay.getElement().parentNode.style.display = 'block' + // _that.overlay.getElement().parentNode.parentNode.style.display = 'block' + + // content.innerHTML = ` + //

你点击了这里:

+ //

经纬度:

+ //

坐标:

X:   Y: `; + // _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标 + + + } else { + console.log('此处没有标注') + } + + } + + }); + }, + + handleShowPopup (showData, coordinate) { + console.log(this.overlay.getElement()) + this.overlay.getElement().style.display = 'block' + this.overlay.getElement().parentNode.style.display = 'block' + this.overlay.getElement().parentNode.parentNode.style.display = 'block' + var content = document.getElementById("popup-content"); + + content.innerHTML = showData; + this.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标 + }, //取随机数 getRndBetween (lowerLimit, upperLimit) { @@ -582,6 +659,17 @@ const vueGis = { showIconLayer: { type: Boolean, default: false + }, + //是否添加弹出框图层 + isAddOpenlay: { + type: Boolean, + default: false + }, + + //点击地图事件类型,back:返回,popup:弹出层 + clickType: { + type: String, + default: 'back' } }, @@ -623,4 +711,51 @@ export default vueGis; .ol-overlaycontainer-stopevent { display: none; } +.ol-popup { + position: absolute; + background-color: #1257c9; + -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); + filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); + padding: 15px; + border-radius: 10px; + border: 1px solid #1257c9; + bottom: 12px; + left: -50px; + text-align: left; +} +.ol-popup:after, +.ol-popup:before { + top: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.ol-popup:after { + border-top-color: 1257c9; + border-width: 10px; + left: 48px; + margin-left: -10px; +} +.ol-popup:before { + border-top-color: #1257c9; + border-width: 11px; + left: 48px; + margin-left: -11px; +} +.ol-popup-closer { + text-decoration: none; + position: absolute; + top: 2px; + right: 8px; +} +.popup-content { + width: 300px; +} +.ol-popup-closer:after { + content: "✖"; + color: rgba(1, 17, 104, 1); +} \ No newline at end of file diff --git a/src/views/modules/visual/cpts/analyse.vue b/src/views/modules/visual/cpts/analyse.vue index 43777c25..6292ddc5 100644 --- a/src/views/modules/visual/cpts/analyse.vue +++ b/src/views/modules/visual/cpts/analyse.vue @@ -297,6 +297,7 @@ export default {