|
|
|
@ -2,7 +2,7 @@ |
|
|
|
<div style="position: relative"> |
|
|
|
|
|
|
|
<!-- 组织路由 --> |
|
|
|
<div v-if="pageType===''"> |
|
|
|
|
|
|
|
<div class="div_top"> |
|
|
|
<div class="router_line"></div> |
|
|
|
<div class="div_router"> |
|
|
|
@ -20,6 +20,11 @@ |
|
|
|
<div v-show="!showPeopleInfo" |
|
|
|
class="div_content"> |
|
|
|
|
|
|
|
<div class="div_map" |
|
|
|
id="map" |
|
|
|
ref="map"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="div_data"> |
|
|
|
<div class="div_tips"> |
|
|
|
<cpt-card> |
|
|
|
@ -84,8 +89,7 @@ |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="m-pagination"> |
|
|
|
<el-pagination hide-on-single-page |
|
|
|
:current-page="demand.pageNo" |
|
|
|
<el-pagination hide-on-single-page :current-page="demand.pageNo" |
|
|
|
:page-size="demand.pageSize" |
|
|
|
:total="demand.total" |
|
|
|
background |
|
|
|
@ -356,26 +360,9 @@ |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<people v-if="showPeopleInfo" |
|
|
|
:uid="selUserId" |
|
|
|
ref="ref_people"></people> |
|
|
|
|
|
|
|
<!-- <event-info v-if="pageType==='dispose'" |
|
|
|
ref="eleEditForm" |
|
|
|
@handleClose="handleClose" /> --> |
|
|
|
|
|
|
|
<!-- <service-info v-if="pageType==='dispose'" |
|
|
|
ref="eleEditForm" |
|
|
|
@handleClose="handleClose" /> --> |
|
|
|
<!-- <fuwu-info v-if="pageType==='dispose'" |
|
|
|
ref="eleEditForm" |
|
|
|
@handleClose="handleClose" /> --> |
|
|
|
<qsydw v-if="pageType==='dispose'" |
|
|
|
ref="eleEditForm" |
|
|
|
@handleClose="handleClose" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
@ -407,24 +394,130 @@ import cptTb from "@/views/modules/visual/cpts/tb"; |
|
|
|
import cptCard from "@/views/modules/visual/cpts/card"; |
|
|
|
import ScreenLoading from "@/views/modules/visual/cpts/loading"; |
|
|
|
import People from "../../basicinfo/people"; |
|
|
|
import eventInfo from "./eventInfo"; |
|
|
|
import serviceInfo from "./serviceInfo"; |
|
|
|
import fuwuInfo from "./fuwuInfo"; |
|
|
|
import qsydw from "./qsydw"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var centerPointGlobal = [120.664619, 36.504963] |
|
|
|
|
|
|
|
let loading;//加载动画 |
|
|
|
|
|
|
|
let map; |
|
|
|
let mapView; |
|
|
|
let gaodeMapLayer;//背景地图图层 |
|
|
|
let parentLayer;//上级组织图层 |
|
|
|
let parentSource;//上级组织多边形 |
|
|
|
let polygonLayer;//标注图层 |
|
|
|
let iconLayer; // icon标注图层 |
|
|
|
let iconSource; // icon |
|
|
|
let polygonSource;//标注多边形 |
|
|
|
let select;//选中标注 |
|
|
|
|
|
|
|
let xoffset = 0 |
|
|
|
let yoffset = 0 |
|
|
|
|
|
|
|
|
|
|
|
//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: "18px Arial", |
|
|
|
//fontFamily: "Courier New, monospace", |
|
|
|
// fontWeight: "bold", |
|
|
|
text: feature.values_.name, |
|
|
|
backgroundFill: new Fill({ |
|
|
|
// 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) |
|
|
|
});; |
|
|
|
}; |
|
|
|
})() |
|
|
|
|
|
|
|
//定义颜色转换方法 |
|
|
|
let reverseFunc = function (pixelsTemp) { |
|
|
|
//蓝色 |
|
|
|
for (var i = 0; i < pixelsTemp.length; i += 4) { |
|
|
|
var r = pixelsTemp[i]; |
|
|
|
var g = pixelsTemp[i + 1]; |
|
|
|
var b = pixelsTemp[i + 2]; |
|
|
|
//运用图像学公式，设置灰度值 |
|
|
|
var grey = r * 0.3 + g * 0.59 + b * 0.11; |
|
|
|
//将rgb的值替换为灰度值 |
|
|
|
pixelsTemp[i] = grey; |
|
|
|
pixelsTemp[i + 1] = grey; |
|
|
|
pixelsTemp[i + 2] = grey; |
|
|
|
|
|
|
|
//基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整 |
|
|
|
pixelsTemp[i] = 55 - pixelsTemp[i]; |
|
|
|
pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1]; |
|
|
|
pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2]; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const vueGis = { |
|
|
|
name: 'HomeMap', |
|
|
|
data () { |
|
|
|
return { |
|
|
|
centerPoint: [],//中心点位置 |
|
|
|
zoom: 14,//缩放范围：区14 |
|
|
|
minZoom: 1,//最小缩放 |
|
|
|
|
|
|
|
orgData: {},//当前组织对象 |
|
|
|
orgId: '', |
|
|
|
@ -582,16 +675,41 @@ const vueGis = { |
|
|
|
selPlaceType: '', |
|
|
|
selInfo: {}, |
|
|
|
selUserId: '', |
|
|
|
showPeopleInfo: false, |
|
|
|
|
|
|
|
pageType: '', |
|
|
|
eventId: '1542065054671142914', |
|
|
|
eventDetailData: {}, |
|
|
|
showPeopleInfo: false |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
async mounted () { |
|
|
|
|
|
|
|
//加载组织数据 |
|
|
|
await this.loadOrgData() |
|
|
|
|
|
|
|
//初始化地图 |
|
|
|
this.initMap() |
|
|
|
|
|
|
|
await nextTick(300) |
|
|
|
this.addParentLayer() |
|
|
|
this.loadParentPolygon() |
|
|
|
//添加标注图层 |
|
|
|
this.addPolygonLayer() |
|
|
|
|
|
|
|
//添加icontuceng |
|
|
|
this.addIconLayer() |
|
|
|
|
|
|
|
//加载当前园区的标注 |
|
|
|
this.loadPolygon(this.subAgencyArray) |
|
|
|
|
|
|
|
|
|
|
|
this.setMapLocation() |
|
|
|
await this.loadCategoryList() |
|
|
|
this.getTable(); |
|
|
|
await this.getMapTable(); |
|
|
|
|
|
|
|
|
|
|
|
//初始化icon图层 |
|
|
|
this.addOverlay() |
|
|
|
|
|
|
|
this.addMapClick() |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -1036,18 +1154,11 @@ const vueGis = { |
|
|
|
this.getTable(); |
|
|
|
this.getMapTable(); |
|
|
|
}, |
|
|
|
// handleSearch () { |
|
|
|
// this.demand.pageNo = 1 |
|
|
|
// this.getTable(); |
|
|
|
// this.getMapTable(); |
|
|
|
// }, |
|
|
|
handleSearch () { |
|
|
|
this.pageType = "dispose"; |
|
|
|
}, |
|
|
|
handleClose () { |
|
|
|
this.pageType = ""; |
|
|
|
this.demand.pageNo = 1 |
|
|
|
this.getTable(); |
|
|
|
this.getMapTable(); |
|
|
|
}, |
|
|
|
|
|
|
|
// |
|
|
|
handleClickRow (index) { |
|
|
|
let selData = this.tableList[index] |
|
|
|
@ -1727,7 +1838,7 @@ const vueGis = { |
|
|
|
...mapGetters(["clientHeight"]) |
|
|
|
|
|
|
|
}, |
|
|
|
components: { cptTb, cptCard, ScreenLoading, People, eventInfo, serviceInfo, fuwuInfo, qsydw }, |
|
|
|
components: { cptTb, cptCard, ScreenLoading, People }, |
|
|
|
} |
|
|
|
export default vueGis; |
|
|
|
</script> |
|
|
|
|
jiangyy
3 years ago
