Browse Source

多元主体分析中心点问题

shibei_master
jiangyy 3 years ago
parent
commit
7c551f0b5c
  1. 50
      src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue
  2. 46
      src/views/modules/visual/components/screen-map/index.vue

50
src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue

@ -36,11 +36,11 @@
</div> </div>
<div class="m-pagination"> <div class="m-pagination">
<el-pagination :current-page="demand.pageNo" <el-pagination :current-page="demand.pageNo"
:page-size="demand.pageSize" :page-size="demand.pageSize"
:total="demand.total" :total="demand.total"
background background
layout="prev, pager, next,total" layout="prev, pager, next,total"
@current-change="handlePageNoChange_demand"> @current-change="handlePageNoChange_demand">
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
@ -82,8 +82,8 @@
</div> </div>
</div> </div>
<duoyuan-dialog v-if="showInfoDialog" <duoyuan-dialog v-if="showInfoDialog"
:orgId="orgId" :orgId="orgId"
@close="showInfoDialog = false" /> @close="showInfoDialog = false" />
</cpt-card> </cpt-card>
</template> </template>
@ -103,8 +103,8 @@ import { pieOption } from './pieOption.js'
import nextTick from 'dai-js/tools/nextTick' import nextTick from 'dai-js/tools/nextTick'
const transparent = 'rgba(2, 2, 2, 0)' const transparent = 'rgba(2, 2, 2, 0)'
const polygonColorArray = [ '#f59701', '#0067b6', '#e70014', '#8fc41e', '#00a1be' ] const polygonColorArray = ['#f59701', '#0067b6', '#e70014', '#8fc41e', '#00a1be']
const colorArray = [ '#1B51FF', '#00E5ED', '#7800FF', '#16D783', '#FF7800', '#FFBA00', '#FFD685', '#2A00FF', '#C600FF', '#FF2A00'] const colorArray = ['#1B51FF', '#00E5ED', '#7800FF', '#16D783', '#FF7800', '#FFBA00', '#FFD685', '#2A00FF', '#C600FF', '#FF2A00']
const legendList = [ const legendList = [
{ name: '#e70014', icon: require('../../../../../assets/img/shuju/volunteer4.png') }, { name: '#e70014', icon: require('../../../../../assets/img/shuju/volunteer4.png') },
{ name: '#f59701', icon: require('../../../../../assets/img/shuju/volunteer5.png') }, { name: '#f59701', icon: require('../../../../../assets/img/shuju/volunteer5.png') },
@ -349,7 +349,7 @@ export default {
return item.name == name return item.name == name
}) })
}, },
async loadOrgData (level='', orgId='') { async loadOrgData (level = '', orgId = '') {
const url = "/gov/org/agency/maporg" const url = "/gov/org/agency/maporg"
let params = { let params = {
orgId: orgId, orgId: orgId,
@ -363,7 +363,7 @@ export default {
if (!this.isRepeatItem(item.name)) { if (!this.isRepeatItem(item.name)) {
let colorIndex = index < polygonColorArray.length ? index : 0 let colorIndex = index < polygonColorArray.length ? index : 0
item.fillColor = transparent, item.fillColor = transparent,
item.color = polygonColorArray[colorIndex] item.color = polygonColorArray[colorIndex]
subPolygonList.push(item) subPolygonList.push(item)
} }
} }
@ -375,7 +375,7 @@ export default {
// color: polygonColorArray[1] // color: polygonColorArray[1]
// } // }
// polygonList.push(polygonData) // polygonList.push(polygonData)
this.polygonList = [ ...this.polygonList, ...subPolygonList ] this.polygonList = [...this.polygonList, ...subPolygonList]
} else { } else {
this.$message.error(msg) this.$message.error(msg)
} }
@ -451,7 +451,7 @@ export default {
//mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
this.$refs.map.loadMap(this.agencyInfo, this.polygonList, null, this.distributionsList, this.iconUrlArray, null) this.$refs.map.loadMap(this.agencyInfo, this.polygonList, null, this.distributionsList, this.iconUrlArray, null)
} else { } else {
this.$refs.map.refreshMap(this.agencyInfo, this.polygonList, this.distributionsList) this.$refs.map.refreshMap(this.agencyInfo, this.polygonList, this.distributionsList, false)
} }
}, },
@ -478,7 +478,7 @@ export default {
data.organizationPersonnel.forEach(item => { data.organizationPersonnel.forEach(item => {
organizationPersonnel = `${organizationPersonnel}${item.personName}(${item.personPhone})、` organizationPersonnel = `${organizationPersonnel}${item.personName}(${item.personPhone})、`
}) })
organizationPersonnel = organizationPersonnel.substring(0, organizationPersonnel.length-1) organizationPersonnel = organizationPersonnel.substring(0, organizationPersonnel.length - 1)
} else { } else {
organizationPersonnel = '--' organizationPersonnel = '--'
} }
@ -540,18 +540,18 @@ export default {
// data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '' : '' : '--' // data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '' : '' : '--'
// data.genderShow = data.gender ? data.gender === '0' ? '' : '' : '--' // data.genderShow = data.gender ? data.gender === '0' ? '' : '' : '--'
// let categoriesArray = [] // let categoriesArray = []
// for (let key in data.volunteerCategories) { // for (let key in data.volunteerCategories) {
// categoriesArray.push(data.volunteerCategories[key]) // categoriesArray.push(data.volunteerCategories[key])
// } // }
// if (categoriesArray.length > 0) { // if (categoriesArray.length > 0) {
// data.categories = categoriesArray.join(',') // data.categories = categoriesArray.join(',')
// } else { // } else {
// data.categories = '--' // data.categories = '--'
// } // }
// let showData = ` // let showData = `
// <div style='font-size:16px; color:#FFFFFF;'></div> // <div style='font-size:16px; color:#FFFFFF;'></div>
@ -708,7 +708,7 @@ export default {
color: #fff; color: #fff;
} }
.card-left-title::after { .card-left-title::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 20px; left: 20px;
@ -716,7 +716,7 @@ export default {
height: 12px; height: 12px;
box-sizing: border-box; box-sizing: border-box;
margin-top: -6px; margin-top: -6px;
background: #2865FA; background: #2865fa;
border-radius: 50%; border-radius: 50%;
} }
.card-wr-map { .card-wr-map {

46
src/views/modules/visual/components/screen-map/index.vue

@ -32,7 +32,7 @@
class="ol-popup-closer"></a> class="ol-popup-closer"></a>
<div id="popup-content" <div id="popup-content"
class="popup-content"></div> class="popup-content"></div>
<a href="#" <a href="#"
id="popup-goMore" id="popup-goMore"
class="popup-goMore">更多>>>></a> class="popup-goMore">更多>>>></a>
</div> </div>
@ -107,9 +107,9 @@ let polygonColorArray = [
'rgba(183, 185, 0, 0.16)' 'rgba(183, 185, 0, 0.16)'
]; ];
//icon //icon
let createTextStyle = function (feature) { let createTextStyle = function (feature) {
if (iconTextsStyle) { if (iconTextsStyle) {
let iconTextsStyles = { ...iconTextsStyle } let iconTextsStyles = { ...iconTextsStyle }
iconTextsStyles.text = feature.values_ && feature.values_.name || feature.name iconTextsStyles.text = feature.values_ && feature.values_.name || feature.name
@ -200,7 +200,9 @@ const vueGis = {
distanceMax: null,// distanceMax: null,//
input_lat: null, input_lat: null,
input_lon: null input_lon: null,
isChangeCenter: true,//
} }
}, },
async mounted () { async mounted () {
@ -225,11 +227,11 @@ const vueGis = {
// iconArrays.forEach(item => { // iconArrays.forEach(item => {
// console.log(item.type, item.urlIndex, item.latitude, item.longitude) // console.log(item.type, item.urlIndex, item.latitude, item.longitude)
// }); // });
// //
this.initMap() this.initMap()
if (this.showPolIconLayer) { if (this.showPolIconLayer) {
console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer) console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer)
// //
@ -259,12 +261,13 @@ const vueGis = {
}, },
// //:
async refreshMap (mapInfo, polygonArray, iconArrays) { async refreshMap (mapInfo, polygonArray, iconArrays, isChangeCenter) {
this.mapInfo = mapInfo this.mapInfo = mapInfo
this.polygonArray = [] this.polygonArray = []
this.polygonArray = polygonArray this.polygonArray = polygonArray
this.iconArrays = iconArrays this.iconArrays = iconArrays
this.isChangeCenter = isChangeCenter
if (iconSource) { if (iconSource) {
iconSource.clear() iconSource.clear()
} }
@ -275,7 +278,7 @@ const vueGis = {
polIconSource.clear() polIconSource.clear()
} }
this.initPolIconLayer() this.initPolIconLayer()
if (this.showPolygonLayer) { if (this.showPolygonLayer) {
this.initPolygonLayer() this.initPolygonLayer()
// //
@ -293,7 +296,7 @@ const vueGis = {
} }
this.setMapLocation() this.setMapLocation()
// gaodeMapLayer.getSource().changed() // gaodeMapLayer.getSource().changed()
}, },
// //
@ -511,6 +514,11 @@ const vueGis = {
}, },
// //
setMapLocation () { setMapLocation () {
if (!this.isChangeCenter) {
return false
}
// debugger
if (!this.zoom) { if (!this.zoom) {
this.setZoom(this.mapInfo.agencyLevel) this.setZoom(this.mapInfo.agencyLevel)
} }
@ -557,7 +565,7 @@ const vueGis = {
mapView.setZoom(this.zoom); mapView.setZoom(this.zoom);
}, },
firstCentermap() { firstCentermap () {
if (this.mapInfo.longitude && this.mapInfo.latitude) { if (this.mapInfo.longitude && this.mapInfo.latitude) {
this.centerPoint = [] this.centerPoint = []
this.centerPoint.push(this.mapInfo.longitude) this.centerPoint.push(this.mapInfo.longitude)
@ -749,14 +757,14 @@ const vueGis = {
this.overlay.getElement().parentNode.parentNode.style.display = 'block' this.overlay.getElement().parentNode.parentNode.style.display = 'block'
content.innerHTML = showData; content.innerHTML = showData;
this.overlay.setPosition(coordinate); this.overlay.setPosition(coordinate);
// overlay x,y // overlay x,y
}, },
// //
handleClosePopup() { handleClosePopup () {
this.overlay.setPosition(undefined); this.overlay.setPosition(undefined);
document.getElementById("popup-closer").blur(); document.getElementById("popup-closer").blur();
return false; return false;
}, },
// //
@ -901,7 +909,7 @@ export default vueGis;
.popup-content { .popup-content {
width: 300px; width: 300px;
} }
.popup-goMore{ .popup-goMore {
margin: 20px 0; margin: 20px 0;
} }
.ol-popup-closer:after { .ol-popup-closer:after {

Loading…
Cancel
Save