Sis_Search/src/components/index/map.vue

<template>
  <div class="sjdpMap">
    <!-- <div class="title">
      <div class="font"><font v-for="(item, i) in orgHistory" :key="i">{{item.name}}{{orgHistory.length-1 >i?"/":""}}</font></div>
      <img @click="orgBack" v-if="orgHistory.length > 1" class="ico" src="../../../static/mapBoard/goBack.png" />
    </div> -->
    <div class="date" v-if="dateTag">
      <font>日期范围：</font>
      <div class="input">
        <a-range-picker v-model="date" @change="pushFunc" @calendarChange="initDisabledDate" :placeholder="['起始日期', '截止日期']"
          :disabled-date="disabledDate" />
      </div>
    </div>
    <div id="container" class="map"></div>
    <!-- <div class="mapExample">
      <div class="one" v-if="userinfo.type <= 0">
        <img src="../../../static/mapBoard/mapExample_1.png" />
        <font>总中心</font>
      </div>
      <div class="one" v-if="userinfo.type <= 1">
        <img src="../../../static/mapBoard/mapExample_2.png" />
        <font>分中心</font>
      </div>
      <div class="one" v-if="userinfo.type <= 2">
        <img src="../../../static/mapBoard/mapExample_3.png" />
        <font>隧管站</font>
      </div>
      <div class="one" v-if="userinfo.type <= 3">
        <img src="../../../static/mapBoard/mapExample_4.png" />
        <font>隧道</font>
      </div>
    </div> -->
  </div>
</template>

<script>
import BMPGL_style from '@components/index/map_style'
import BMPGL from '@components/index/mapInit'
export default {
  data () {
    return {
      userinfo: "", // 用户信息 - 从缓存中取
      orgData: [], // 组织机构数据
      orgLevel: 0, // 记录当前组织的等级
      orgHistory: [], // 记录当前层级到顶级的所有组织id
      orgNowChoose: [], // 组织机构 - 当前选择的组织id集合
      sdFId: [], // 选隧道 - 存隧管站ID

      timer: null, // 处理同一个元素上的单击和双击冲突

      date: ["", ""], // 日期
      disabledDate: "", // 日期控件可选的范围控制函数变量
      startDate: "2019-10-10 00:00:00", // 默认项目其实日期

      moveTag: false, // 是否移动

      map: null, // 地图
    }
  },
  props: {
    dateTag: Boolean, // 是否开启日期选择
  },
  created () {
    this.init();
  },
  methods: {

    //初始化
    init () {
      this.initMap();
    },
    // 初始化地图
    initMap () {
      let _this = this;
      // 地图实力存在需要先销毁
      // 销毁地图，当使用 WebGL 渲染地图时，如果确认不再使用该地图实例，则需要调用本方法销毁 WebGL 上下文，
      // 否则频繁创建新地图实例会导致浏览器报：too many WebGL context 的警告
      if (this.map !== null) {
        this.map.destroy();
      }

      BMPGL.init().then(BMapGL => {
        // 创建地图实例
        this.map = new BMapGL.Map('container');
        this.map.centerAndZoom(new BMapGL.Point(106.152924, 37.387416), 8);
        this.map.enableScrollWheelZoom(true);

        // 改变地图风格
        this.map.setMapStyleV2({
          styleJson: BMPGL_style
        });

        // 描边
        // var bd1 = new BMapGL.Boundary();
        // bd1.get('宁夏', function (rs) {
        //   let count = rs.boundaries.length;
        //   for (let i = 0; i < count; i++) {
        //     let path = [];
        //     let str = rs.boundaries[i].replace(' ', '');
        //     let points = str.split(';');
        //     for (let j = 0; j < points.length; j++) {
        //       let lng = points[j].split(',')[0];
        //       let lat = points[j].split(',')[1];
        //       path.push(new BMapGL.Point(lng, lat));
        //     }
        //     let prism = new BMapGL.Prism(path, 5000, {
        //       topFillColor: '#1e6aff',
        //       topFillOpacity: 0.4,
        //       sideFillColor: '#04367b',
        //       sideFillOpacity: 0.4
        //     });
        //     _this.map.addOverlay(prism);
        //   }
        // });

        // 描边
        var bd1 = new BMapGL.Boundary();
        bd1.get('银川', function (rs) {
          let count = rs.boundaries.length;
          for (let i = 0; i < count; i++) {
            let path = [];
            let str = rs.boundaries[i].replace(' ', '');
            let points = str.split(';');
            for (let j = 0; j < points.length; j++) {
              let lng = points[j].split(',')[0];
              let lat = points[j].split(',')[1];
              path.push(new BMapGL.Point(lng, lat));
            }
            let prism = new BMapGL.Prism(path, 5000, {
              topFillColor: '#00E6FF',
              topFillOpacity: 0.4,
              sideFillColor: '#04367b',
              sideFillOpacity: 0.4
            });
            _this.map.addOverlay(prism);
          }
        });

        // 描边
        var bd1 = new BMapGL.Boundary();
        bd1.get('吴忠', function (rs) {
          let count = rs.boundaries.length;
          for (let i = 0; i < count; i++) {
            let path = [];
            let str = rs.boundaries[i].replace(' ', '');
            let points = str.split(';');
            for (let j = 0; j < points.length; j++) {
              let lng = points[j].split(',')[0];
              let lat = points[j].split(',')[1];
              path.push(new BMapGL.Point(lng, lat));
            }
            let prism = new BMapGL.Prism(path, 5000, {
              topFillColor: '#3D8BFF',
              topFillOpacity: 0.4,
              sideFillColor: '#04367b',
              sideFillOpacity: 0.4
            });
            _this.map.addOverlay(prism);
          }
        });

        // 描边
        var bd1 = new BMapGL.Boundary();
        bd1.get('石嘴山', function (rs) {
          let count = rs.boundaries.length;
          for (let i = 0; i < count; i++) {
            let path = [];
            let str = rs.boundaries[i].replace(' ', '');
            let points = str.split(';');
            for (let j = 0; j < points.length; j++) {
              let lng = points[j].split(',')[0];
              let lat = points[j].split(',')[1];
              path.push(new BMapGL.Point(lng, lat));
            }
            let prism = new BMapGL.Prism(path, 5000, {
              topFillColor: '#7AAFFF',
              topFillOpacity: 0.4,
              sideFillColor: '#04367b',
              sideFillOpacity: 0.4
            });
            _this.map.addOverlay(prism);
          }
        });

        // 描边
        var bd1 = new BMapGL.Boundary();
        bd1.get('中卫', function (rs) {
          let count = rs.boundaries.length;
          for (let i = 0; i < count; i++) {
            let path = [];
            let str = rs.boundaries[i].replace(' ', '');
            let points = str.split(';');
            for (let j = 0; j < points.length; j++) {
              let lng = points[j].split(',')[0];
              let lat = points[j].split(',')[1];
              path.push(new BMapGL.Point(lng, lat));
            }
            let prism = new BMapGL.Prism(path, 5000, {
              topFillColor: '#FFB13D',
              topFillOpacity: 0.4,
              sideFillColor: '#04367b',
              sideFillOpacity: 0.4
            });
            _this.map.addOverlay(prism);
          }
        });

        // 描边
        var bd1 = new BMapGL.Boundary();
        bd1.get('固原', function (rs) {
          let count = rs.boundaries.length;
          for (let i = 0; i < count; i++) {
            let path = [];
            let str = rs.boundaries[i].replace(' ', '');
            let points = str.split(';');
            for (let j = 0; j < points.length; j++) {
              let lng = points[j].split(',')[0];
              let lat = points[j].split(',')[1];
              path.push(new BMapGL.Point(lng, lat));
            }
            let prism = new BMapGL.Prism(path, 5000, {
              topFillColor: '#D24EE9',
              topFillOpacity: 0.4,
              sideFillColor: '#04367b',
              sideFillOpacity: 0.4
            });
            _this.map.addOverlay(prism);
          }
        });

        // // 创建点标记
        // let _this = this;
        // this.orgData.forEach((item)=>{

        //   let quanStyle = item.type === undefined?4:item.type;

        //   let sizeDefault = [20, 20];
        //   let size = [54, 54];
        //   let mouseoverColor = ""; // 离开
        //   let mouseoutColor = ""; // 进入
        //   switch(quanStyle) {
        //     case 1:
        //       size = [54, 54];
        //       mouseoverColor = "mapExample_1"; // 离开
        //       mouseoutColor = "mapD_1"; // 进入
        //       break;
        //     case 2:
        //       size = [54, 54];
        //       mouseoverColor = "mapExample_2"; // 离开
        //       mouseoutColor = "mapD_2"; // 进入
        //       break;
        //     case 3:
        //       size = [48, 48];
        //       mouseoverColor = "mapExample_3"; // 离开
        //       mouseoutColor = "mapD_3"; // 进入
        //       break;
        //     case 4:
        //       size = [44, 44];
        //       mouseoverColor = "mapExample_4"; // 离开
        //       mouseoutColor = "mapD_4"; // 进入
        //       break;
        //   }

        //   // 创建图标
        //   var myIcon = new BMapGL.Icon("/static/mapBoard/"+mouseoutColor+".png", new BMapGL.Size(size[0], size[1]));
        //   // 创建Marker标注，使用小车图标
        //   var pt = new BMapGL.Point(item.latitude, item.longitude);
        //   var marker = new BMapGL.Marker(pt, {
        //     icon: myIcon
        //   });
        //   // 将标注添加到地图
        //   this.map.addOverlay(marker);
        //   // 添加鼠标事件
        //   marker.addEventListener('mouseover', function() {
        //     var opts = {
        //       width : 0,     // 信息窗口宽度
        //       height: 0,
        //       offset: new BMapGL.Size(10, -10), // 偏移
        //       title : item.name , // 信息窗口标题
        //     }
        //     var infoWindow = new BMapGL.InfoWindow(item.remark !== undefined?item.remark:item.lineName, opts);  // 创建信息窗口对象
        //     _this.map.openInfoWindow(infoWindow, new BMapGL.Point(item.latitude, item.longitude)); //开启信息窗口
        //   });
        //   marker.addEventListener('mouseout', function(e) {
        //     _this.map.closeInfoWindow();
        //   })
        //   marker.addEventListener('click', function(e) {
        //     _this.changeOrgID(item);
        //     let mouseTag = e.target.getIcon().imageUrl.indexOf("/mapD_") >= 0;
        //     if(mouseTag){
        //       if(_this.orgNowChoose.length > 1){
        //         var myIcon1 = new BMapGL.Icon("/static/mapBoard/"+mouseoverColor+".png", new BMapGL.Size(sizeDefault[0], sizeDefault[1]));
        //         e.target.setIcon(myIcon1);
        //       }
        //     }else{
        //       var myIcon1 = new BMapGL.Icon("/static/mapBoard/"+mouseoutColor+".png", new BMapGL.Size(size[0], size[1]));
        //       e.target.setIcon(myIcon1);
        //     }
        //   })
        //   marker.addEventListener('dblclick', function(e) {
        //     _this.getOrg(item)
        //   })
        //   this.map.addOverlay(marker);
        // });
      })
        .catch(err => {
          console.log(err);
        });


    },

  }
}

</script>

<style lang="scss" scoped>
.sjdpMap {
  width: 100%;
  height: 100%;

  .map {
    width: 100%;
    height: 100%;
    z-index: 1;
    ::v-deep .anchorBL {
      display: none;
    }
  }
  .mapExample {
    position: absolute;
    bottom: 30px;
    right: 60px;
    > .one {
      overflow: hidden;
      margin-top: 10px;
      > img {
        float: left;
      }
      > font {
        line-height: 20px;
        float: left;
        margin-left: 9px;
      }
    }
  }
}
</style>