elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

回滚原五大图层

master
jianjun 3 years ago
parent
fa17756647
commit
b3ed253077
1 changed files with 458 additions and 347 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 195
      src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue

195
src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save