|
|
|
@ -107,7 +107,7 @@ let polygonColorArray = [ |
|
|
|
'rgba(183, 185, 0, 0.16)' |
|
|
|
]; |
|
|
|
|
|
|
|
//icon文字样式 |
|
|
|
//icon文字样式 |
|
|
|
let createTextStyle = function (feature) { |
|
|
|
|
|
|
|
if (iconTextsStyle) { |
|
|
|
@ -200,7 +200,9 @@ const vueGis = { |
|
|
|
distanceMax: null,//显示的坐标距离中心点的范围 |
|
|
|
|
|
|
|
input_lat: null, |
|
|
|
input_lon: null |
|
|
|
input_lon: null, |
|
|
|
|
|
|
|
isChangeCenter: true,//是否根据多边形改变数组 |
|
|
|
} |
|
|
|
}, |
|
|
|
async mounted () { |
|
|
|
@ -228,7 +230,6 @@ const vueGis = { |
|
|
|
|
|
|
|
//初始化地图 |
|
|
|
this.initMap() |
|
|
|
|
|
|
|
if (this.showPolIconLayer) { |
|
|
|
console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer) |
|
|
|
//初始化多边形标注图层 |
|
|
|
@ -259,15 +260,22 @@ const vueGis = { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//刷新地图 |
|
|
|
async refreshMap (mapInfo, polygonArray, iconArrays) { |
|
|
|
//刷新地图:地图信息，多边形数组，标注数组，是否根据多边形改变中心点 |
|
|
|
async refreshMap (mapInfo, polygonArray, iconArrays, isChangeCenter) { |
|
|
|
this.mapInfo = mapInfo |
|
|
|
this.polygonArray = [] |
|
|
|
this.polygonArray = polygonArray |
|
|
|
this.iconArrays = iconArrays |
|
|
|
this.isChangeCenter = isChangeCenter |
|
|
|
if (iconSource) { |
|
|
|
iconSource.clear() |
|
|
|
} |
|
|
|
if (polygonSource) { |
|
|
|
polygonSource.clear() |
|
|
|
} |
|
|
|
if (polIconSource) { |
|
|
|
polIconSource.clear() |
|
|
|
} |
|
|
|
this.initPolIconLayer() |
|
|
|
|
|
|
|
if (this.showPolygonLayer) { |
|
|
|
@ -287,7 +295,6 @@ const vueGis = { |
|
|
|
} |
|
|
|
this.setMapLocation() |
|
|
|
// gaodeMapLayer.getSource().changed() |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
//加载区域多边形 |
|
|
|
@ -545,13 +552,59 @@ const vueGis = { |
|
|
|
|
|
|
|
} else { |
|
|
|
mapView.setCenter(this.centerPoint); |
|
|
|
} |
|
|
|
|
|
|
|
if (!this.isChangeCenter) { |
|
|
|
return false |
|
|
|
} |
|
|
|
mapView.setZoom(this.zoom); |
|
|
|
// debugger |
|
|
|
if (!this.zoom) { |
|
|
|
this.setZoom(this.mapInfo.agencyLevel) |
|
|
|
} |
|
|
|
this.centerPoint = [] |
|
|
|
|
|
|
|
//如果存在中心点（返回时赋值） |
|
|
|
if (this.center && this.center.length > 0) { |
|
|
|
this.centerPoint = this.center |
|
|
|
this.centerFlag = 'point' |
|
|
|
this.center = [] |
|
|
|
|
|
|
|
} else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织 |
|
|
|
this.centerFlag = 'flag_polygon' |
|
|
|
this.centerPoint.push(this.mapInfo.longitude) |
|
|
|
this.centerPoint.push(this.mapInfo.latitude) |
|
|
|
|
|
|
|
} else if (this.mapInfo.longitude && this.mapInfo.latitude) { |
|
|
|
this.centerPoint.push(this.mapInfo.longitude) |
|
|
|
this.centerPoint.push(this.mapInfo.latitude) |
|
|
|
this.centerFlag = 'point' |
|
|
|
|
|
|
|
} else { |
|
|
|
this.centerPoint = centerPointGlobal |
|
|
|
this.centerFlag = 'point' |
|
|
|
} |
|
|
|
|
|
|
|
// debugger |
|
|
|
if (this.centerFlag === 'flag_parent') { |
|
|
|
let parentFeatures = parentLayer.getSource().getFeatures()[0] |
|
|
|
let polygon = parentFeatures.getGeometry(); |
|
|
|
map.getView().fit(polygon, map.getSize()); |
|
|
|
this.zoom = map.getView().getZoom() - 1 |
|
|
|
|
|
|
|
} else if (this.centerFlag === 'flag_polygon') { |
|
|
|
let polygonFeatures = polygonLayer.getSource().getFeatures()[0] |
|
|
|
let polygon = polygonFeatures.getGeometry(); |
|
|
|
map.getView().fit(polygon, map.getSize()); |
|
|
|
this.zoom = map.getView().getZoom() - 1 |
|
|
|
|
|
|
|
} else { |
|
|
|
mapView.setCenter(this.centerPoint); |
|
|
|
|
|
|
|
} |
|
|
|
mapView.setZoom(this.zoom); |
|
|
|
|
|
|
|
}, |
|
|
|
firstCentermap() { |
|
|
|
firstCentermap () { |
|
|
|
if (this.mapInfo.longitude && this.mapInfo.latitude) { |
|
|
|
this.centerPoint = [] |
|
|
|
this.centerPoint.push(this.mapInfo.longitude) |
|
|
|
@ -608,7 +661,7 @@ const vueGis = { |
|
|
|
}) |
|
|
|
}), |
|
|
|
new Style({ |
|
|
|
// text: createTextStyle(feature) // 报错 暂时注掉 zty 2022.05.19 |
|
|
|
// text: createTextStyle(feature) // 报错 暂时注掉 zhaotongyao 2022.05.19 |
|
|
|
}) |
|
|
|
]; |
|
|
|
styles['MultiPolygon'] = styles['Polygon']; |
|
|
|
@ -616,13 +669,13 @@ const vueGis = { |
|
|
|
}; |
|
|
|
})(); |
|
|
|
|
|
|
|
select = new Select({ |
|
|
|
style: overlayStyle |
|
|
|
}); |
|
|
|
|
|
|
|
// select = new Select({ |
|
|
|
// style: overlayStyle |
|
|
|
// }); |
|
|
|
// 有BUG 加入多边形选中样式时，如果同时存在icon层和多边形层，点击icon会使icon消失 ---zhaotongyao 2022.06.01 |
|
|
|
|
|
|
|
map.addLayer(polygonLayer) |
|
|
|
map.addInteraction(select); |
|
|
|
// map.addInteraction(select); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
@ -747,7 +800,7 @@ const vueGis = { |
|
|
|
|
|
|
|
}, |
|
|
|
// 关闭弹窗 |
|
|
|
handleClosePopup() { |
|
|
|
handleClosePopup () { |
|
|
|
this.overlay.setPosition(undefined); |
|
|
|
document.getElementById("popup-closer").blur(); |
|
|
|
return false; |
|
|
|
@ -895,7 +948,7 @@ export default vueGis; |
|
|
|
.popup-content { |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|
.popup-goMore{ |
|
|
|
.popup-goMore { |
|
|
|
margin: 20px 0; |
|
|
|
} |
|
|
|
.ol-popup-closer:after { |
|
|
|
|
jiangyy
3 years ago