tongshanglei %!s(int64=2) %!d(string=hai) anos
pai
achega
3183d4fbab
Modificáronse 1 ficheiros con 67 adicións e 32 borrados
  1. 67 32
      src/views/wind/wind/index.vue

+ 67 - 32
src/views/wind/wind/index.vue

@@ -148,7 +148,7 @@ export default {
             map: null,
             center: '',
             isSetCenter:false,
-            zoom: 13,
+            zoom: 6,
             currentCityId: null, // 当前城市id
             keyword: '', // 搜索关键字
             windWord:'',
@@ -211,7 +211,8 @@ export default {
             this.map = map;
 
             let that = this
-            this.center=new this.BMap.Point(116.403694, 39.913828)
+            
+            this.center=new this.BMap.Point(107.191822,34.200007)
             this.distanceTool = new BMapLib.DistanceTool(map);
             // 浏览器定位
             // let geo = new this.BMap.Geolocation
@@ -299,7 +300,8 @@ export default {
                              this.windData.forEach(wind => {
                                  this.addShapeWind(wind)
                              })
-                             
+                             var overlayObjText =   'windCenterGroup';
+                             this.addWindMarkerPoint(overlayObjText)
                             //  this.SetMapCenter('windGroup')
                          }
             }).catch(() => {})
@@ -361,7 +363,7 @@ export default {
                 content+='</div>'
                 
             return content
-            },
+        },
         SetMapCenter(windGroup){
             if(this.isSetCenter || !this[windGroup][0]){
                 return
@@ -632,16 +634,25 @@ export default {
             }
             windObj.setFillColor(inside_color);
             windObj._infoData = info;
-
+            windObj.addEventListener("click", function(){     
+                               var pt = new BMap.Point(info.center_lng, info.center_lat);
+                                let content=that.createWindMarkerContent(info);
+                                var opts = {
+                                    width : 320,     // 信息窗口宽度
+                                    enableAutoPan:false
+                                }
+                                var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象      
+                                this.map.openInfoWindow(infoWindow, pt); //开启信息窗口
+            });
             this.map.addOverlay(windObj)
-            if(!this.isSetCenter){
-                if (info.wind_shape == 'circle') {
-                    this.map.setViewport(windObj.getBounds(), {zoomFactor: -1});
-                } else if (info.wind_shape == 'polygon') {
-                    this.map.setViewport(windObj._infoData.wind_info, {zoomFactor: -1})
-                }
-                this.isSetCenter=true
-            }
+            // if(!this.isSetCenter){
+            //     if (info.wind_shape == 'circle') {
+            //         this.map.setViewport(windObj.getBounds(), {zoomFactor: -1});
+            //     } else if (info.wind_shape == 'polygon') {
+            //         this.map.setViewport(windObj._infoData.wind_info, {zoomFactor: -1})
+            //     }
+            //     this.isSetCenter=true
+            // }
             // 加入群组
             this.windGroup.push(windObj);
             
@@ -948,6 +959,17 @@ export default {
             let zoom = e.target.getZoom()
             var overlayObjText =   'windCenterGroup'; // 拼接覆盖物对象文本名称
             if(zoom<10){
+                this.addWindMarkerPoint(overlayObjText)
+            }else{
+                if (this[overlayObjText] && this[overlayObjText].length) {
+                    this[overlayObjText].forEach(marker => {
+                        marker.hide();
+                    })
+                }
+            }
+             
+        },
+        addWindMarkerPoint(overlayObjText){
                 if (this.windCenterGroup && this.windCenterGroup.length) {
                     // 移除覆盖物
                     this.windCenterGroup.forEach(center => {
@@ -963,16 +985,17 @@ export default {
                             icon: myIcon
                         }); // 创建标注
                         
-                            // let that=this
-                            // marker.addEventListener("click", function(){     
-                            //     let content=that.createMarkerContent(item);
-                            //     var opts = {
-                            //         width : 320,     // 信息窗口宽度
-                            //         enableAutoPan:false
-                            //     }
-                            //     var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象      
-                            //     this.map.openInfoWindow(infoWindow, pt); //开启信息窗口
-                            // });
+                            let that=this
+                            marker.addEventListener("click", function(){     
+                               
+                                let content=that.createWindMarkerContent(wind);
+                                var opts = {
+                                    width : 320,     // 信息窗口宽度
+                                    enableAutoPan:false
+                                }
+                                var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象      
+                                this.map.openInfoWindow(infoWindow, pt); //开启信息窗口
+                            });
                         this.map.addOverlay(marker);
                         this.windCenterGroup.push(marker);
                 })
@@ -981,15 +1004,27 @@ export default {
                         marker.show();
                     })
                 }
-            }else{
-                if (this[overlayObjText] && this[overlayObjText].length) {
-                    this[overlayObjText].forEach(marker => {
-                        marker.hide();
-                    })
-                }
-            }
-             
-        }
+        },
+        createWindMarkerContent(data){
+            let address
+            // var myGeo = new BMap.Geocoder();      
+            //  // 根据坐标得到地址描述    
+            //  myGeo.getLocation(new BMap.Point(data.longitude,data.latitude), function(result){          
+            //         address=result.address
+            //         $('#marker_address').text(address);
+            // });
+            var content ='<div class="info_label">风场编号:' + (data.name) + '</div>'
+            content +='<div class="info_label">风场名称:' + (data.number) + '</div>'
+            content +='<div class="info_label"> 所属部门:  江苏大区 </div>'
+            content +='<div class="info_label"> 所属区域:  浙江省杭州市滨江区 </div>'
+            content +='<div class="info_label"> 详细地址:  江苏省盐城市滨海县滨海港镇三洪村八组13号中信小学对面上海电气项目部 </div>'
+            content +='<div class="info_label"> 风场类型:  海上 </div>'
+            content +='<div class="info_label"> 环境类型:  潮间带 </div>'
+            content +='<div class="info_label"> 海拔高度:  100米 </div>'
+            content +='<div class="info_label"> 主机制造商:  上海电气 </div>'
+                
+            return content
+        },
 
     }
 }