|
|
|
@ -83,6 +83,8 @@ let projection = new Projection({ |
|
|
|
let map; |
|
|
|
let mapView; |
|
|
|
let gaodeMapLayer;//背景地图图层 |
|
|
|
let parentLayer;//上级组织图层 |
|
|
|
let parentSource;//上级组织多边形 |
|
|
|
let polygonLayer;//变电站标注图层 |
|
|
|
let polygonSource;//变电站标注多边形 |
|
|
|
|
|
|
|
@ -106,7 +108,22 @@ var createTextStyle = function (feature) { |
|
|
|
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) { |
|
|
|
@ -153,6 +170,7 @@ const vueGis = { |
|
|
|
runAgency: [], |
|
|
|
center: [], |
|
|
|
zoom: null, |
|
|
|
parentPolygon: [], |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
@ -164,6 +182,10 @@ const vueGis = { |
|
|
|
//初始化地图 |
|
|
|
this.initMap() |
|
|
|
|
|
|
|
//上级组织多边形图层 |
|
|
|
this.addParentLayer() |
|
|
|
this.loadParentPolygon() |
|
|
|
|
|
|
|
//添加标注图层 |
|
|
|
this.addPolygonLayer() |
|
|
|
|
|
|
|
@ -199,16 +221,16 @@ const vueGis = { |
|
|
|
async refreshMap (isRefreshView) { |
|
|
|
//加载组织数据 |
|
|
|
await this.loadOrgData() |
|
|
|
|
|
|
|
this.loadParentPolygon() |
|
|
|
//加载当前园区的标注 |
|
|
|
this.loadPolygon(this.subAgencyArray) |
|
|
|
|
|
|
|
//重置地图中心点 |
|
|
|
if (isRefreshView) { |
|
|
|
this.setMapLocation() |
|
|
|
mapView.setCenter(this.centerPoint); |
|
|
|
mapView.setZoom(this.zoom); |
|
|
|
} |
|
|
|
// if (isRefreshView) { |
|
|
|
// this.setMapLocation() |
|
|
|
// mapView.setCenter(this.centerPoint); |
|
|
|
// mapView.setZoom(this.zoom); |
|
|
|
// } |
|
|
|
}, |
|
|
|
|
|
|
|
//返回上一级组织 |
|
|
|
@ -250,6 +272,8 @@ const vueGis = { |
|
|
|
this.subAgencyArray.push(data) |
|
|
|
// this.selAgencyId = data.id |
|
|
|
} else { |
|
|
|
this.parentPolygon = [] |
|
|
|
this.parentPolygon.push(data) |
|
|
|
|
|
|
|
if (data.children && data.children.length > 0) { |
|
|
|
this.subAgencyArray = data.children |
|
|
|
@ -266,6 +290,62 @@ const vueGis = { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//加载父级组织多边形 |
|
|
|
loadParentPolygon () { |
|
|
|
parentSource.clear()//清空变电站标注 |
|
|
|
|
|
|
|
let featureData = []//标注数据 |
|
|
|
if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注 |
|
|
|
let oneData = {} |
|
|
|
|
|
|
|
this.parentPolygon.forEach(agencyItem => { |
|
|
|
|
|
|
|
if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标 |
|
|
|
oneData = { |
|
|
|
type: 'Feature', |
|
|
|
id: agencyItem.id, |
|
|
|
properties: { |
|
|
|
id: agencyItem.id, |
|
|
|
level: agencyItem.level, |
|
|
|
name: agencyItem.name |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: 'Polygon', |
|
|
|
coordinates: [], |
|
|
|
}, |
|
|
|
} |
|
|
|
let coorArray = agencyItem.coordinates.split(',')//坐标数组 |
|
|
|
|
|
|
|
let itemArray = []//单个点位的[lon,lat]，数组 |
|
|
|
let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组 |
|
|
|
|
|
|
|
coorArray.forEach((item, index) => { |
|
|
|
itemArray.push(item) |
|
|
|
if (index % 2 == 0) {//偶 |
|
|
|
|
|
|
|
} else {//奇 |
|
|
|
polygonArray.push(itemArray) |
|
|
|
itemArray = [] |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
oneData.geometry.coordinates.push(polygonArray) |
|
|
|
featureData.push(oneData) |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if (featureData && featureData.length > 0) { |
|
|
|
var geojsonObject = { |
|
|
|
'type': 'FeatureCollection', |
|
|
|
'features': featureData |
|
|
|
}; |
|
|
|
let feature = (new GeoJSON()).readFeatures(geojsonObject) |
|
|
|
parentSource.addFeatures(feature) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
//加载当前园区的标注 |
|
|
|
loadPolygon (subAgencyArray) { |
|
|
|
polygonSource.clear()//清空变电站标注 |
|
|
|
@ -348,6 +428,7 @@ const vueGis = { |
|
|
|
} |
|
|
|
|
|
|
|
if (this.method != 'mAddPolygon' && this.level != 'neighborHood') { |
|
|
|
|
|
|
|
this.selAgencyId = '' |
|
|
|
//下钻到下一级 |
|
|
|
this.subAgencyArray.forEach(item => { |
|
|
|
@ -366,6 +447,7 @@ const vueGis = { |
|
|
|
console.log('center', map.getView().getCenter()) |
|
|
|
console.log('zoom', map.getView().getZoom()) |
|
|
|
|
|
|
|
|
|
|
|
this.runAgency.push(this.selPolygon) |
|
|
|
this.selAgencyIndex = 0 |
|
|
|
this.refreshMap(true) |
|
|
|
@ -373,7 +455,6 @@ const vueGis = { |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//高亮某个标注 |
|
|
|
highlightPolygon () { |
|
|
|
|
|
|
|
@ -467,6 +548,23 @@ const vueGis = { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//添加变电站标注图层 |
|
|
|
addParentLayer () { |
|
|
|
parentSource = new VectorSource({ |
|
|
|
//features: (new GeoJSON()).readFeatures(geojsonObject) |
|
|
|
}); |
|
|
|
|
|
|
|
parentLayer = new VectorLayer({ |
|
|
|
source: parentSource, |
|
|
|
style: parentStyleFunction, |
|
|
|
zIndex: 50 |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
map.addLayer(parentLayer) |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
//添加变电站标注图层 |
|
|
|
addPolygonLayer () { |
|
|
|
polygonSource = new VectorSource({ |
|
|
|
|
jiangyy
4 years ago