提交5

lishifeng

2020-09-15 ce10677f47a14879424e7f562f78442cc03cfda1

 src/pages/index.vue

@@ -58,7 +58,7 @@

<script>
import Vue from "vue";
import BMapGL from "BMapGL";
import BMapGL from "BMap";
import ContentBox from "../components/ContentBox";
/* import MyElTree from "../components/MyElTree"; */
import PieChart from "../components/chart/PieChart";
@@ -172,169 +172,12 @@
      done();
    },
    initMap() {
      const that = this;
      // 按住鼠标右键，修改倾斜角和角度
      this.map = new BMapGL.Map("allmap"); // 创建Map实例
      this.point = new BMapGL.Point(this.lng, this.lat); // 创建点坐标this.lng, this.lat 113.971,30.605
      this.map.centerAndZoom(this.point, 15); // 初始化地图,设置中心点坐标和地图级别

      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      this.map.setHeading(64.5);
      this.map.setTilt(73);
      this.marker = new BMapGL.Marker(this.point); // 创建点
      this.map.addOverlay(this.marker); // 将标注添加到地图中

      //添加地图机房
      this.addseRoomlist.forEach(item => {
        this.marker = new BMapGL.Marker(
          new BMapGL.Point(item.data.longitude, item.data.latitude)
        );
         /* console.log('item.data.longitude, item.data.latitude',item.data.longitude, item.data.latitude); */

        this.map.addOverlay(this.marker);
        this.marker.addEventListener("click", e => {
          /*    console.log("this.point", this.point); */

          that.map.openInfoWindow(
            this.infoWindow,
            new BMapGL.Point(item.data.longitude, item.data.latitude)
          ); //开启信息窗口
        });
      });
      this.opts = {
        width: 350, // 信息窗口宽度
        height: 150, // 信息窗口高度
        title: `<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 20px;">湖北省-武汉市-测试机房1</p>`, // 信息窗口标题* ${this.medatas.info.label}
        message: "地址信息"
      };

      this.infoWindow = new BMapGL.InfoWindow( // 创建信息窗口对象
        `<div style="color: black;padding:8px" ><div >蓄电池组告警数目：50 <a href>详情>></a></div><div style="margin-top:5px"> 蓄电池组落后数目：0 &nbsp <a href>详情>><a></div> <div style="margin-top:5px">蓄电池组延时数目：0&nbsp <a href>详情>><a></div>
          <div style="margin-top:5px"><a href="syncPage()">实时数据</a> 历史数据</div> <div style="margin-top:5px">地址： ${
            this.medatas.address
          }</div></div>` /*  */,
        this.opts
      );

      /* that.map.openInfoWindow(this.infoWindow, this.point); */

      this.onCLickMap(); //点击事件获取坐标

      /* map地图右键菜单 */
      var menu = new BMapGL.ContextMenu();
      var txtMenuItem = [
        {
          text: "搜索地址",
          callback() {}
        },
        {
          text: "放大",
          callback: function() {
            that.map.zoomIn();
          }
        },
        {
          text: "缩小",
          callback: function() {
            that.map.zoomOut();
          }
        },
        {
          text: "设置中心点",
          async callback() {
            /*  that.map.zoomCentral(); */
            /*获取地图的中心坐标并将地图移动该坐标 */
            const centerMove = await searchCoordinateMove();
            const newcenterMove = JSON.parse(centerMove.data.result).data;
            console.log("newcenterMove", newcenterMove);

            /* 设置地图默认中心坐标接口 */
            const center = await searchCoordinate({
              map_longitude: newcenterMove[0].map_longitude,
              map_latitude: newcenterMove[0].map_latitude,
              map_level: newcenterMove[0].map_level
            });
            /*      console.log("center", center); */
          }
        },
        {
          text: "查看全国",
          callback: function() {
            that.map.setZoom(5);
          }
        },
        {
          text: "设置机房",
          async callback() {
            //获取站点名
            const addSetdian = await addMapSetdian();
            const addSetmap = JSON.parse(addSetdian.data.result).data.map(
              item => {
                item.label =
                  item.StationName1 +
                  "-" +
                  item.StationName2 +
                  "-" +
                  item.StationName5 +
                  "-" +
                  item.StationName3;
                return item;
              }
            );
            // console.log("addSetdian", addSetdian);
            // console.log("addSetmap", addSetmap);
            const point = new BMapGL.Point(that.lng, that.lat);
            const marke = new BMapGL.Marker(point);
            that.map.addOverlay(marke);

            /* 可托拽的标注 */
            /*    that.marker.enableDragging();
             that.marker.addEventListener("dragend", function(e) {
              console.log("当前位置：" + e.point.lng + ", " + e.point.lat);
            }); */

            /* 设置站点窗口 */
            var opts = {
              width: "auto", // 信息窗口宽度
              height: "auto", // 信息窗口高度
              title:
                '<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 10px;">设置站点位置  </p>', // 信息窗口标题
              message: "地址信息"
            };
            var geoc = new BMapGL.Geocoder(); //坐标与路名的转换

            showInfoWindowTest.homeList = addSetmap;

            // 逆地址解析，通过经纬度获取地址信息
            geoc.getLocation(marke.getPosition(), function(rs) {
              /*   console.log("rs", rs); */

              showInfoWindowTest.address = rs.address;
              showInfoWindowTest.point = marke.getPosition();
            });
            // 设置面板
            this.infoWindow = new BMapGL.InfoWindow(
              showInfoWindowTest.$el,
              opts
            );

            that.map.openInfoWindow(this.infoWindow, point);
            marke.addEventListener("click", e => {
              //左击标注
              that.map.openInfoWindow(this.infoWindow, point);
            });
          }
        }
      ];
      for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(
          new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, {
            width: 100, // 指定菜单项的宽度
            id: "menu" + i // 指定菜单项dom的id
          })
        );
      }
      this.map.addContextMenu(menu);
      this.map.centerAndZoom(this.point, 1); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom();
         this.map.disableDoubleClickZoom();
    },

    /* loadNode 加载子树数据的方法*/
@@ -419,6 +262,7 @@
          StationName2: node.parent.parent.data.label,
          StationName5: node.parent.data.label
        }),
 
        /*  查询电池组信息 */
        searchBattInfo({
          StationName1: node.parent.parent.parent.data.label,
@@ -843,5 +687,3 @@
  background-color: #fff;
}
</style>