db_mcyc/xzl-ui/src/views/monitor/map/warn.vue

<template>
  <div>
    <div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.9+'px;'">
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      address: "",
      queryParams: {
        address: {},
        distance: "50"
      },
      placeInfo: [
        {value: "", label: ""}
      ],
      distanceOptions: [
        {value: "50", label: "50米"},
        {value: "100", label: "100米"},
        {value: "200", label: "200米"}
      ],
      map: null,
      pageHeight: document.documentElement.clientHeight
    }
  },
  created() {
    setTimeout(() => {
      this.initMap()
    }, 100)
  },
  methods: {
    initMap() {
      this.map = new BMap.Map("container", {enableMapClick: false});        // 创建Map实例 命名空间为BMAP
      this.map.centerAndZoom(new BMap.Point(113.465771, 30.368834), 13);  // 初始化地图,设置中心点坐标和地图级别
      this.map.setCurrentCity("仙桃");
      this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      this.map.disableDoubleClickZoom();    //禁用双击放大
      this.init();
    },
    init() {
      const t = this;
      request({
        url: '/monitorArea/infoList',
        method: "get"
      }).then(function (rs) {
        const areaInfo = rs.areaInfo;
        const noWarnClientInfo = rs.noWarnClientInfo;
        const WarnClientInfo = rs.WarnClientInfo;
        console.log(areaInfo, noWarnClientInfo, WarnClientInfo);

        areaInfo.forEach(data => {
          if (data.areaType == 3) {
            let listData = JSON.parse(data.areaData);
            let list = [];
            listData.forEach(areaData => {
              let pt = new BMap.Point(areaData.longitude, areaData.latitude);
              list.push(pt);
            });
            let polygon = new BMap.Polygon(list, {fillColor: data.areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
            t.map.addOverlay(polygon);
            var x = 0,
              y = 0;
            var path = polygon.getPath();//返回多边型的点数组；ply是多边形覆盖物
            for (var k = 0; k < path.length; k++) {
              x = x + parseFloat(path[k].lng);
              y = y + parseFloat(path[k].lat);
            }
            x = x / path.length;
            y = y / path.length;
            let points = [];
            let pt = new BMap.Point(x, y);
            points.push(pt);
            let icon = new BMap.Icon(require("@/assets/images/area_icon16x16.png"), new BMap.Size(16, 16));
            let options = {
              icon: icon
            }
            let marker = new BMap.Marker(pt, options);
            t.map.addOverlay(marker);
            marker.addEventListener('click', function (e) {
              var content =
                '<ul class="map-customer-info">'
                + '<li ><span>社区名称：</span>' + 'xxx社区' + '</li>'
                + '<li ><span>人口：</span>' + 'xxxxxx' + '</li>'
                + '<li ><span>零售户数量：</span>' + 'xxx' + '</li>'
                + '<li ><span>可办证数量：</span>' + 'xx' + '</li>'
                + '</ul>';
              t.$alert(content, '社区信息', {
                dangerouslyUseHTMLString: true
              });
            });
          }
        });

        let points = [];
        noWarnClientInfo.forEach(data => {
          let pt = new BMap.Point(data.longitude, data.latitude);
          pt.shortName = data.shortName;
          pt.clientCode = data.clientCode;
          pt.telephone = data.telephone;
          pt.cnname = data.cnname;
          points.push(pt);
        });
        let options = {
          size: BMAP_POINT_SIZE_NORMAL,
          shape: BMAP_POINT_SHAPE_STAR,
          color: '#848080'
        }
        let pointCollection = new BMap.PointCollection(points, options);

        pointCollection.addEventListener('click', function (e) {
          var content =
            '<ul class="map-customer-info">'
            + '<li ><span>许可证号：</span>' + e.point.clientCode + '</li>'
            + '<li ><span>名称：</span>' + e.point.shortName + '</li>'
            + '<li ><span>电话：</span>' + e.point.telephone + '</li>'
            + '<li ><span>客户经理：</span>' + e.point.cnname + '</li>'
            + '<li ><span>库存：</span>' + 666 + '</li>'
            + '</ul>';
          t.$alert(content, '零售户信息', {
            dangerouslyUseHTMLString: true
          });
        });
        t.map.addOverlay(pointCollection);


      });
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}
</style>