|
@@ -168,16 +168,16 @@ export default {
|
|
|
toolTipHtml:'',
|
|
|
crumbsHtml: [],
|
|
|
zoneNames: {
|
|
|
- 东北: 'dongbei',
|
|
|
- 西北: 'xibei',
|
|
|
- 华北: 'huabei',
|
|
|
- 华中: 'huazhong',
|
|
|
- 华东: 'huadong',
|
|
|
- 中南: 'zhongnan',
|
|
|
- 西南: 'xinan',
|
|
|
- 华南: 'huanan',
|
|
|
- 东南: 'dongnan',
|
|
|
- 其他: 'Other'
|
|
|
+ "东北": 'dongbei',
|
|
|
+ "西北": 'xibei',
|
|
|
+ "华北": 'huabei',
|
|
|
+ "华中": 'huazhong',
|
|
|
+ "华东": 'huadong',
|
|
|
+ "中南": 'zhongnan',
|
|
|
+ "西南": 'xinan',
|
|
|
+ "华南": 'huanan',
|
|
|
+ "东南": 'dongnan',
|
|
|
+ "其他": 'Other'
|
|
|
},
|
|
|
provinceCities: {
|
|
|
"青岛区域": { province: 'shandong', center: [36.06667, 120.33333], zoom: 8 },
|
|
@@ -338,6 +338,9 @@ export default {
|
|
|
} else {
|
|
|
this.queryPlazaInfoCount(data.ccode, data.level)
|
|
|
}
|
|
|
+ if (data.level !== 0) {
|
|
|
+ this.getSystemList(data.ccode, data.level)
|
|
|
+ }
|
|
|
this.getEventStatusData(this.currentLevel, data.ccode)
|
|
|
this.createNavpathByData(data)
|
|
|
this.currentZoneData = data
|
|
@@ -673,7 +676,9 @@ export default {
|
|
|
attributionControl: false,
|
|
|
contextmenu: true,
|
|
|
contextmenuWidth: 140,
|
|
|
- dragging: false
|
|
|
+ dragging: false,
|
|
|
+ closePopupOnClick:true,
|
|
|
+ doubleClickZoom:false
|
|
|
})
|
|
|
let JsonData = require('../../assets/geoData/china.json')
|
|
|
let layer = L.geoJSON(JsonData.features, {
|
|
@@ -727,6 +732,7 @@ export default {
|
|
|
this.currentSelectedSys = system
|
|
|
this.currentSysId = system.smsxt
|
|
|
//1集团 2中心 3区域 0广场
|
|
|
+ this.clearAllLayers()
|
|
|
if (this.currentLevel === 1) {
|
|
|
this.pantGroupMap(this.currentZoneData, system.smsxt)
|
|
|
} else if (this.currentLevel === 2) {
|
|
@@ -785,13 +791,12 @@ export default {
|
|
|
let center = this.zoneCenter[zone]
|
|
|
let contentHtml = that.createPopupHtmlContent(item.list.assetTypeList, item.fullName)
|
|
|
if (contentHtml) {
|
|
|
- this.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.name , 'group')
|
|
|
+ this.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.name , 'group', 4)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
groupLayer.addTo(myMaps)
|
|
|
},
|
|
|
-
|
|
|
/**
|
|
|
* 用于绘制中心下的地图
|
|
|
*/
|
|
@@ -803,14 +808,8 @@ export default {
|
|
|
let zoom, inner, outer, offset
|
|
|
if (['xibei'].includes(zone)) {
|
|
|
zoom = 5
|
|
|
- inner = 20000
|
|
|
- outer = 40000
|
|
|
- offset = 1
|
|
|
} else {
|
|
|
zoom = 6
|
|
|
- inner = 10000
|
|
|
- outer = 20000
|
|
|
- offset = 0.5
|
|
|
}
|
|
|
this.panTo(this.zoneCenter[zone], zoom)
|
|
|
let groupLayer = new L.layerGroup()
|
|
@@ -837,29 +836,29 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'zone')
|
|
|
+ that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'zone', 6)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
groupLayer.addTo(myMaps)
|
|
|
-
|
|
|
},
|
|
|
|
|
|
/***
|
|
|
* 用于绘制项目的点
|
|
|
*/
|
|
|
pantProjectsMap(data) {
|
|
|
+ this.clearAllLayers()
|
|
|
let geo = this.provinceCities[data.cname]
|
|
|
this.panTo(geo.center, geo.zoom)
|
|
|
data.children.forEach(item => {
|
|
|
- this.pantPlazaMap(item)
|
|
|
+ this.pantPlazaMap(item, geo.zoom)
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
* 用于绘制广场的点
|
|
|
*/
|
|
|
- pantPlazaMap(item) {
|
|
|
+ pantPlazaMap(item, zoom) {
|
|
|
let that = this
|
|
|
let groupLayer = new L.layerGroup()
|
|
|
let params = {
|
|
@@ -885,7 +884,7 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'project')
|
|
|
+ that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'project', zoom)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -895,7 +894,7 @@ export default {
|
|
|
/**
|
|
|
*
|
|
|
*/
|
|
|
- createPointOnMap (num, groupLayer, contentHtml, center, data, name, type) {
|
|
|
+ createPointOnMap (num, groupLayer, contentHtml, center, data, name, type , zoom) {
|
|
|
let popup = null
|
|
|
let marker = null
|
|
|
let outCircle = null
|
|
@@ -905,47 +904,46 @@ export default {
|
|
|
html: name,
|
|
|
className: 'my-leaflet-div-icon',
|
|
|
iconSize: 30
|
|
|
- })
|
|
|
-
|
|
|
- let zoom = myMaps.getZoom()
|
|
|
- let sizes = this.circleSize[zoom]
|
|
|
- if (color && center) {
|
|
|
- popup = L.popup({closeOnClick:true}).setLatLng(center).setContent(contentHtml)
|
|
|
- marker = L.marker([center[0] - sizes.offset, center[1]], { icon: myIcon }).addTo(groupLayer)
|
|
|
- outCircle = L.circle(center, sizes.outer, { color: 'transparent', fillColor: color.border, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
|
|
|
- innerCircle =L.circle(center, sizes.inner, { color: 'transparent', fillColor: color.area, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
|
|
|
- let feaureGroup = L.featureGroup([marker, outCircle, innerCircle])
|
|
|
- feaureGroup.on('mouseover', ev => {
|
|
|
- popup.openOn(myMaps)
|
|
|
- })
|
|
|
- feaureGroup.on('click', ev => {
|
|
|
- this.currentZoneData = data
|
|
|
- this.currentLevel = data.level
|
|
|
- this.getEventStatusData(data.level, data.ccode)
|
|
|
- this.queryPlazaInfoCount(data.ccode, data.level)
|
|
|
- groupLayer.clearLayers()
|
|
|
- this.createNavpathByData(data)
|
|
|
- if (type === 'group') {
|
|
|
- this.pantZonesMap(data, this.currentSysId)
|
|
|
- }
|
|
|
- if (type === 'zone') {
|
|
|
- this.pantProjectsMap(data, this.currentSysId)
|
|
|
- }
|
|
|
- if (type === 'project') {
|
|
|
- let routeData = this.$router.resolve({
|
|
|
- name:'/home/homePage',
|
|
|
- })
|
|
|
- window.open(routeData.href, '_blank');
|
|
|
- window.__fromGroupPage = {
|
|
|
- level: 0,
|
|
|
- plazaName: data.cname,
|
|
|
- plazaId: data.ccode
|
|
|
- }
|
|
|
- this.$store.commit('SETPLAZENAME', data.cname)
|
|
|
- localStorage.setItem('PLAZAID', data.ccode)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ })
|
|
|
+ let sizes = this.circleSize[zoom]
|
|
|
+ if (color && center) {
|
|
|
+ popup = L.popup({closeOnClick:true}).setLatLng(center).setContent(contentHtml)
|
|
|
+
|
|
|
+ marker = L.marker([center[0] - sizes.offset, center[1]], { icon: myIcon }).addTo(groupLayer)
|
|
|
+ outCircle = L.circle(center, sizes.outer, { color: 'transparent', fillColor: color.border, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
|
|
|
+ innerCircle =L.circle(center, sizes.inner, { color: 'transparent', fillColor: color.area, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
|
|
|
+ let feaureGroup = L.featureGroup([marker, outCircle, innerCircle, popup])
|
|
|
+ feaureGroup.on('mouseover', ev => {
|
|
|
+ popup.openOn(myMaps)
|
|
|
+ })
|
|
|
+ feaureGroup.on('click', ev => {
|
|
|
+ this.currentZoneData = data
|
|
|
+ this.currentLevel = data.level
|
|
|
+ this.getEventStatusData(data.level, data.ccode)
|
|
|
+ this.queryPlazaInfoCount(data.ccode, data.level)
|
|
|
+ groupLayer.clearLayers()
|
|
|
+ this.createNavpathByData(data)
|
|
|
+ if (type === 'group') {
|
|
|
+ this.pantZonesMap(data, this.currentSysId)
|
|
|
+ }
|
|
|
+ if (type === 'zone') {
|
|
|
+ this.pantProjectsMap(data, this.currentSysId)
|
|
|
+ }
|
|
|
+ if (type === 'project') {
|
|
|
+ let routeData = this.$router.resolve({
|
|
|
+ name:'/home/homePage',
|
|
|
+ })
|
|
|
+ window.open(routeData.href, '_blank');
|
|
|
+ window.__fromGroupPage = {
|
|
|
+ level: 0,
|
|
|
+ plazaName: data.cname,
|
|
|
+ plazaId: data.ccode
|
|
|
+ }
|
|
|
+ this.$store.commit('SETPLAZENAME', data.cname)
|
|
|
+ localStorage.setItem('PLAZAID', data.ccode)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
/**
|
|
@@ -1360,9 +1358,6 @@ export default {
|
|
|
width: 20px;
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
- em{
|
|
|
-
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -1390,7 +1385,7 @@ export default {
|
|
|
padding: 0.8rem 1.6rem 1.6rem;
|
|
|
font-size: 1.4rem;
|
|
|
line-height: 2.2rem;
|
|
|
- background: rgba(247, 249, 250, 1);
|
|
|
+ background: white;
|
|
|
border:1px solid rgba(151,151,151, 0.2);
|
|
|
filter: drop-shadow(0 2px 4px rgba(31, 35, 41, .1)) ;
|
|
|
.tip-triangle{
|