|
@ -1,15 +1,12 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div style="position: relative"> |
|
|
<div class="div_content_map"> |
|
|
|
|
|
|
|
|
<div class="div_map" |
|
|
<div class="div_map" |
|
|
id="map" |
|
|
id="map" |
|
|
ref="map"> |
|
|
ref="map"> |
|
|
<!-- <div id="map" |
|
|
<!-- <div id="map" |
|
|
class="map"></div> --> |
|
|
class="map"></div> --> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
@ -113,13 +110,7 @@ const vueGis = { |
|
|
minZoom: 1,//最小缩放 |
|
|
minZoom: 1,//最小缩放 |
|
|
|
|
|
|
|
|
mapInfo: { |
|
|
mapInfo: { |
|
|
agencyLevel: "community", |
|
|
|
|
|
coordinates: "120.37342346270151,36.0950221490494,120.39931465567633,36.09693067926868,120.39740612545705,36.09113306860255,120.39762218548188,36.08911650837086,120.39999884575495,36.0859836380109,120.4010071258708,36.080978247435795,120.39258078490263,36.08094223743166,120.38537878407514,36.08303081767163,120.37616022301596,36.082382637597156,120.37342346270151,36.0950221490494", |
|
|
|
|
|
id: "6e511da6816e53af4cda952365a26eb9", |
|
|
|
|
|
latitude: 36.072227, |
|
|
|
|
|
level: "agency", |
|
|
|
|
|
longitude: 120.389455, |
|
|
|
|
|
name: "南宁社区", |
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
polygonArray: [ |
|
|
polygonArray: [ |
|
@ -153,27 +144,7 @@ const vueGis = { |
|
|
], |
|
|
], |
|
|
|
|
|
|
|
|
iconArrays: [ |
|
|
iconArrays: [ |
|
|
{ |
|
|
|
|
|
id: "2a278c0ceb863359d263fda7aabf6752", |
|
|
|
|
|
latitude: 36.072227, |
|
|
|
|
|
longitude: 120.389455, |
|
|
|
|
|
level: "grid", |
|
|
|
|
|
name: "第三网格", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: "2a278c0ceb863359d263fda7aabf6753", |
|
|
|
|
|
latitude: 36.072227, |
|
|
|
|
|
longitude: 120.389455, |
|
|
|
|
|
level: "grid", |
|
|
|
|
|
name: "南宁第二网格", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: "2a278c0ceb863359d263fda7aabf6742", |
|
|
|
|
|
latitude: 36.072227, |
|
|
|
|
|
longitude: 120.389455, |
|
|
|
|
|
level: "grid", |
|
|
|
|
|
name: "南宁第一网格", |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
], |
|
|
|
|
|
|
|
|
//policon图标样式 |
|
|
//policon图标样式 |
|
@ -183,11 +154,7 @@ const vueGis = { |
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png' |
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png' |
|
|
], |
|
|
], |
|
|
//icon图标样式 |
|
|
//icon图标样式 |
|
|
iconUrlArray: [ |
|
|
iconUrlArray: [], |
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png', |
|
|
|
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png', |
|
|
|
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png' |
|
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
@ -197,8 +164,12 @@ const vueGis = { |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
//加载地图 |
|
|
//加载地图 |
|
|
loadMap (mapInfo) { |
|
|
loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray) { |
|
|
this.mapInfo = mapInfo |
|
|
this.mapInfo = mapInfo |
|
|
|
|
|
this.polygonArray = polygonArray |
|
|
|
|
|
this.polIconUrlArray = polIconUrlArray |
|
|
|
|
|
this.iconArrays = iconArrays |
|
|
|
|
|
this.iconUrlArray = iconUrlArray |
|
|
|
|
|
|
|
|
//初始化地图 |
|
|
//初始化地图 |
|
|
this.initMap() |
|
|
this.initMap() |
|
@ -360,7 +331,7 @@ const vueGis = { |
|
|
id: oneIcon.id, |
|
|
id: oneIcon.id, |
|
|
properties: { |
|
|
properties: { |
|
|
type: "icon", |
|
|
type: "icon", |
|
|
id: oneIcon.id |
|
|
info: { ...oneIcon.info } |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
@ -438,16 +409,16 @@ const vueGis = { |
|
|
this.centerPoint.push(this.mapInfo.latitude) |
|
|
this.centerPoint.push(this.mapInfo.latitude) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.setZoom(this.mapInfo.agencyLevel) |
|
|
this.setZoom(this.mapInfo.level) |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
//根据组织层级设置缩放级别 |
|
|
//根据组织层级设置缩放级别 |
|
|
setZoom (agencyLevel) { |
|
|
setZoom (level) { |
|
|
if (agencyLevel === 'district') { |
|
|
if (level === 'district') { |
|
|
this.zoom = 14 |
|
|
this.zoom = 14 |
|
|
} else if (agencyLevel === 'street') { |
|
|
} else if (level === 'street') { |
|
|
this.zoom = 15 |
|
|
this.zoom = 15 |
|
|
} else if (agencyLevel === 'community') { |
|
|
} else if (level === 'community') { |
|
|
this.zoom = 16 |
|
|
this.zoom = 16 |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -597,16 +568,20 @@ export default vueGis; |
|
|
></style> |
|
|
></style> |
|
|
|
|
|
|
|
|
<style lang="scss" > |
|
|
<style lang="scss" > |
|
|
.div_content { |
|
|
.div_content_map { |
|
|
.ol-viewport { |
|
|
.ol-viewport { |
|
|
border-radius: 5px; |
|
|
border-radius: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
.div_map { |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
// padding: 10px 5px 13px; |
|
|
|
|
|
// margin-top: 8px; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
.ol-overlaycontainer-stopevent { |
|
|
.ol-overlaycontainer-stopevent { |
|
|
display: none; |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.el-scrollbar__wrap { |
|
|
|
|
|
overflow-x: hidden !important; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
</style> |