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

同步screen-map

shibei_master
ZhaoTongYao 3 years ago
parent
347620b57f
commit
43aeea6deb
2 changed files with 174 additions and 61 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. 7
      src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue
  2. 228
      src/views/modules/visual/components/screen-map/index.vue

7
src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue
View File

@ -447,11 +447,11 @@ export default {
//加载地图数据
loadMap () {
if (this.isfirstInit) {
this.agencyInfo.level = 'agency'
// this.agencyInfo.level = 'agency'
//mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
this.$refs.map.loadMap(this.agencyInfo, this.polygonList, null, this.distributionsList, this.iconUrlArray, null)
} else {
this.$refs.map.refreshMap(this.polygonList, this.distributionsList)
this.$refs.map.refreshMap(this.agencyInfo, this.polygonList, this.distributionsList)
}
},
@ -613,6 +613,9 @@ export default {
if (!this.agencyInfo.level) {
this.agencyInfo.level = 'street'
}
if (!this.agencyInfo.agencyLevel) {
this.agencyInfo.agencyLevel = 'street'
}
} else {
this.$message.error(msg);
}

228
src/views/modules/visual/components/screen-map/index.vue
View File

@ -21,8 +21,8 @@
</div>-->
<div class="div_map"
id="map"
ref="map">
:id="mapId"
:ref="mapId">
</div>
<div id="popup"
style="display: none;"
@ -32,6 +32,9 @@
class="ol-popup-closer"></a>
<div id="popup-content"
class="popup-content"></div>
<a href="#"
id="popup-goMore"
class="popup-goMore">更多>>>></a>
</div>
</div>
</template>
@ -79,6 +82,24 @@ let iconSource; // icon
let select;//选中标注
let iconTextsStyle = {
textAlign: undefined,
font: "18px Arial",
//fontFamily: "Courier New, monospace",
// fontWeight: "bold",
text: '',
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,
}
let polygonColorArray = [
'rgba(210, 2, 2, 0.24)',
@ -86,7 +107,19 @@ let polygonColorArray = [
'rgba(183, 185, 0, 0.16)'
];
//icon文字样式
let createTextStyle = function (feature) {
if (iconTextsStyle) {
let iconTextsStyles = { ...iconTextsStyle }
iconTextsStyles.text = feature.values_ && feature.values_.name || feature.name
return new Text({ ...iconTextsStyles })
} else {
return null
}
}
//多边形标注样式
var polygonStyleFunction = (function () {
return function (feature) {
@ -105,6 +138,8 @@ var polygonStyleFunction = (function () {
};
})()
const vueGis = {
name: 'HomeMap',
data () {
@ -151,7 +186,7 @@ const vueGis = {
iconArrays: [
],
iconTextStyle: {},
// iconTextStyle: {},
//policon图标样式
polIconUrlArray: [
@ -181,32 +216,32 @@ const vueGis = {
loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle, distanceMax) {
this.mapInfo = mapInfo
this.polygonArray = polygonArray
this.polIconUrlArray = polIconUrlArray
this.polIconUrlArray = polIconUrlArray || []
this.iconArrays = iconArrays
this.iconUrlArray = iconUrlArray
this.iconTextStyle = iconTextStyle
iconTextsStyle = iconTextStyle || iconTextsStyle
this.distanceMax = distanceMax
// iconArrays.forEach(item => {
// console.log(item.type, item.urlIndex, item.latitude, item.longitude)
// });
//初始化地图
this.initMap()
if (this.showPolygonLayer) {
if (this.showPolIconLayer) {
console.log('showPolIconLayer++++++++++++++++++++++', this.showPolIconLayer)
//初始化多边形标注图层
this.initPolygonLayer()
this.initPolIconLayer()
//加载当前园区的标注
this.loadPolygon()
// this.loadPolIcon()
}
if (this.showPolIconLayer) {
if (this.showPolygonLayer) {
//初始化多边形标注图层
this.initPolygonLayer()
//加载当前园区的标注
this.loadPolIcon()
this.loadPolygon()
}
if (this.showIconLayer) {
@ -220,41 +255,51 @@ const vueGis = {
this.addOverlay()
}
this.addMapClick()
},
//刷新地图
async refreshMap (polygonArray, iconArrays) {
async refreshMap (mapInfo, polygonArray, iconArrays) {
this.mapInfo = mapInfo
this.polygonArray = []
this.polygonArray = polygonArray
this.iconArrays = iconArrays
if (iconSource) {
iconSource.clear()
}
if (polygonSource) {
polygonSource.clear()
}
if (polIconSource) {
polIconSource.clear()
}
this.initPolIconLayer()
if (this.showPolygonLayer) {
this.initPolygonLayer()
//加载当前园区的标注
this.loadPolygon()
}
if (this.showPolIconLayer) {
this.initIconLayer()
//加载当前园区的标注
this.loadPolIcon()
// this.loadPolIcon()
}
if (this.showIconLayer) {
this.loadIcon()
}
this.setMapLocation()
// gaodeMapLayer.getSource().changed()
},
//加载多边形
//加载区域多边形
loadPolygon () {
polygonSource.clear()//清空多边形标注
// iconSource.clear()
let featureData = []//多边形数据数据
if (this.polygonArray && this.polygonArray.length > 0) {//判断是否存在下级标注
@ -311,9 +356,11 @@ const vueGis = {
},
//加载多边形的icon
//加载区域多边形的icon
loadPolIcon (feature) {
polIconSource.clear()
let polyIconFeatures = [];
console.log('feature-----', feature)
feature.forEach(oneIcon => {
var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
@ -330,28 +377,27 @@ const vueGis = {
id: oneIcon.id_
}
});
// console.log('oneIcon----', oneIcon)
let polyIconStyle = new Style({
image: new Icon({
// anchor: [0.5, 0.5],
// imgSize: [32, 32],
scale: 0.5,
src: polIconUrlArray[oneIcon.values_.index - 1]
})
scale: this.areaScale,
src: this.polIconUrlArray[0]
}),
text: createTextStyle(oneIcon)
});
polyIcon.setStyle(polyIconStyle);
polyIconFeatures.push(polyIcon);
});
polIconSource.addFeatures(polyIconFeatures);
},
//加载icon图标
loadIcon () {
iconSource.clear()//清空多边形标注
if (this.iconArrays && this.iconArrays.length > 0) {
let iconFeatures = [];
@ -367,15 +413,14 @@ const vueGis = {
info: { ...oneIcon }
}
});
let iconStyle = new Style({
image: new Icon({
// anchor: [0.5, 0.5],
// imgSize: [32, 32],
// scale: 0.5,
src: this.iconUrlArray[oneIcon.urlIndex]
src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0]
}),
text: this.createTextStyle(oneIcon)
// text: createTextStyle(oneIcon)
});
iconItem.setStyle(iconStyle);
@ -397,18 +442,6 @@ const vueGis = {
}
},
//icon文字样式
createTextStyle (feature) {
if (this.iconTextStyle) {
let iconTextStyle = { ...this.iconTextStyle }
iconTextStyle.text = feature.values_.name
return new Text({ ...iconTextStyle })
} else {
return null
}
},
//计算和中心点距离
computedDistance (lon, lat, max) {
@ -425,7 +458,7 @@ const vueGis = {
//初始化地图
initMap () {
this.setMapLocation()
this.firstCentermap()
gaodeMapLayer = new TileLayer({
title: "地图",
source: new XYZ({
@ -452,7 +485,7 @@ const vueGis = {
layers: [gaodeMapLayer],
//加载瓦片图层数据
view: mapView,
target: 'map'
target: this.mapId
//目标加载到map中
})
@ -478,8 +511,53 @@ const vueGis = {
},
//设置地图定位的中心点和缩放级别
setMapLocation () {
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() {
if (this.mapInfo.longitude && this.mapInfo.latitude) {
this.centerPoint = []
this.centerPoint.push(this.mapInfo.longitude)
@ -489,7 +567,7 @@ const vueGis = {
this.centerPoint = centerPointGlobal
}
this.setZoom(this.mapInfo.level)
this.setZoom(this.mapInfo.agencyLevel)
},
//根据组织层级设置缩放级别
@ -507,7 +585,8 @@ const vueGis = {
//初始化多边形标注图层
initPolygonLayer () {
polygonSource = new VectorSource({
//features: (new GeoJSON()).readFeatures(geojsonObject)
// features: (new GeoJSON()).readFeatures(geojsonObject)
wrapX: false
});
polygonLayer = new VectorLayer({
@ -515,7 +594,7 @@ const vueGis = {
style: polygonStyleFunction,
zIndex: 50
});
let that = this
//选中多边形后的样式
var overlayStyle = (function () {
@ -535,7 +614,7 @@ const vueGis = {
})
}),
new Style({
// text: createTextStyle(feature) // 报错 暂时注掉 zty 2022.05.19
// text: createTextStyle(feature) // 报错 暂时注掉 zhaotongyao 2022.05.19
})
];
styles['MultiPolygon'] = styles['Polygon'];
@ -558,6 +637,7 @@ const vueGis = {
initPolIconLayer () {
polIconSource = new VectorSource({
//features: (new GeoJSON()).readFeatures(geojsonObject)
wrapX: false
});
polIconLayer = new VectorLayer({
@ -571,9 +651,9 @@ const vueGis = {
//初始化icon图层
initIconLayer () {
iconSource = new VectorSource({
//features: (new GeoJSON()).readFeatures(geojsonObject)
wrapX: false
});
iconLayer = new VectorLayer({
@ -597,6 +677,7 @@ const vueGis = {
var container = document.getElementById("popup");
var closer = document.getElementById("popup-closer");
var content = document.getElementById("popup-content");
var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null
// 创建一个弹窗 Overlay 对象
this.overlay = new Overlay({
@ -619,6 +700,11 @@ const vueGis = {
closer.blur();
return false;
};
if (goMore) {
goMore.onclick = function () {
_that.$emit('lookMore')
};
}
},
//注册地图点击事件
@ -650,15 +736,27 @@ const vueGis = {
});
},
handleShowPopup (showData, coordinate) {
handleShowPopup (showData, coordinate, isShowMore) {
if (isShowMore) {
document.getElementById("popup-goMore").style.display = 'block'
} else {
document.getElementById("popup-goMore").style.display = 'none'
}
console.log(this.overlay.getElement())
let content = document.getElementById("popup-content");
this.overlay.getElement().style.display = 'block'
this.overlay.getElement().parentNode.style.display = 'block'
this.overlay.getElement().parentNode.parentNode.style.display = 'block'
var content = document.getElementById("popup-content");
content.innerHTML = showData;
this.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标
this.overlay.setPosition(coordinate);
//把 overlay 显示到指定的 x,y坐标
},
// 关闭弹窗
handleClosePopup() {
this.overlay.setPosition(undefined);
document.getElementById("popup-closer").blur();
return false;
},
//取随机数
@ -685,6 +783,10 @@ const vueGis = {
},
},
props: {
mapId: {
type: String,
default: 'map'
},
//是否显示多边形图层
showPolygonLayer: {
type: Boolean,
@ -711,6 +813,10 @@ const vueGis = {
clickType: {
type: String,
default: 'back'
},
areaScale: {
type: Number,
default: 0.5
}
},
@ -795,8 +901,12 @@ export default vueGis;
.popup-content {
width: 300px;
}
.popup-goMore{
margin: 20px 0;
}
.ol-popup-closer:after {
content: "✖";
color: rgba(1, 17, 104, 1);
// color: rgba(1, 17, 104, 1);
color: #fff;
}
</style>
Write Preview
Loading…
Cancel
Save