diff --git a/public/img/largeScreen/icon_camra.png b/public/img/largeScreen/icon_camra.png
new file mode 100644
index 00000000..a9440c64
Binary files /dev/null and b/public/img/largeScreen/icon_camra.png differ
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
>
-