|  | @ -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>    |