高德amap 自定义点聚合

<template>

  <div class="box">

    <div id="container" style="width:100%; height:100%"></div>

  </div>

</template>

<script>

//import AMap from "AMap"; // 引入高德地图

export default {

  props: {

    nowOrgData: {

      type: Object,

      default: []

    }

  },

  data() {

    return {

      map: [],

      infoWindow: [],

      proviceInfo: [],

      orgData: [],

      leafNum: "",

      domain: this.abdpConfig.getAuther().domain,

      //nowOrgData: [],

      icon: ""

    };

  },

  watch: {

    nowOrgData: function(newvalue, oldvalue) {

      // console.log('orgname-old',oldvalue.domainname)

      // console.log('orgname-new',newvalue.domainname)

      this.initMarker(newvalue);

    }

  },

  created() {

    this.org = this.abdpConfig.getOrg();

    this.orgData = this.org[0] == undefined ? this.org : this.org[0];

    this.infoWindow = new AMap.InfoWindow({

      offset: new AMap.Pixel(20, -20),

       isCustom:true

    });

  },

  mounted() {

    this.init();

    this.initMarker(this.nowOrgData);

    this.getCity(this.nowOrgData);

    //  this.renderDistrict(this.nowOrgData);

  },

  methods: {

    init() {

      this.map = new AMap.Map("container", {

        resizeEnable: true,

        zoom: 7,

        center: [108, 34],

        pitch: 0,

        viewMode: "2D",

        mapStyle: "amap://styles/blue",

        plugin: [

          "AMap.Geocoder",

          "AMap.Geolocation",

          "AMap.Autocomplete",

          "AMap.Polygon",

          "AMap.DistrictSearch",

          "AMap.CircleMarker",

          "AMap.Scale",

          "AMap.OverView",

          "AMap.ToolBar",

          "AMap.MapType",

          "AMap.PolyEditor",

          "AMap.CircleEditor"

        ]

      });

    },

    initMarker(nowOrgData) {

      //this.abdpConfig.setNowdomain(nowOrgData.domainname);

      let self = this;

      self.map.clearMap();

      self.map.clearInfoWindow();

      let index = -1;

      if (typeof nowOrgData.gps == "string") {

        self.map.setCenter(nowOrgData.gps.split(","));

        self.map.setZoom(nowOrgData.gps.zoom);

        //  console.log(self.map.getCenter(),self.map.getZoom())

      }

      while (++index < nowOrgData.childrenDomains.length) {

        if (typeof nowOrgData.childrenDomains[index].gps == "string") {

          nowOrgData.childrenDomains[index].gps = nowOrgData.childrenDomains[

            index

          ].gps.split(",");

        }

        this.leafNum = 0;

        let marker = new AMap.Marker({

          extData: nowOrgData.childrenDomains[index],

          zoom: nowOrgData.childrenDomains[index].zoom,

          position: nowOrgData.childrenDomains[index].gps,

          content: self.renderContent(nowOrgData.childrenDomains[index])

        });

        self.map.add(marker);

        marker.on("click", self.markerClick);

        marker.on("mouseover", self.markerMouseover);

        marker.on("mouseout", self.markerMouseout);

      }

      self.map.center = self.map.getCenter();

      self.map.setFitView();

      self.renderDistrict(self.proviceInfo);

    },

    markerClick(e) {

      let self = this;

      if (e.target.B.extData.childrenDomains == undefined) {

        console.log( e.target.B.extData.domainname)

        this.$router.push({

          path: "./systemMap/LeafMap",

          query: {

            domain: e.target.B.extData.domainname

          }

        });

      }else{

        self.initMarker(e.target.getExtData());

        self.go(e.target.getExtData());

      }

    },

    go(domainData) {

      this.$emit("updatdomainname", domainData);

    },

    markerMouseover(e) {

      let org = e.target.getExtData();

      let content =

        '<div class="infowindow" style="padding:5px;background:rgb(150,150,150,0.7); border-radius: 5px;box-shadow: rgba(30, 30, 30, 0.298039) 0px 1px 4px -1px;color:white;width:160px;font-size:12px;list-style:none;"><ul ><li><h4 style="color:orange">' +

        org.domainname +

        "<h4></li>";

      content += "<li>已安装设备:" + org.ispDevice + "</li>";

      content +=

        "<li>正常设备:" +

        org.normalIspDevice +

        '</li><ul><div class="to_bottom" style=" width: 0;height:0;    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;border-top: 10px solid rgb(150,150,150,0.5);border-left: 10px solid transparent;border-right: 10px solid transparent; border-bottom: 10px solid transparent;position:absolute;bottom:-12px;left:80px" ></div></div>';

      this.infoWindow.setContent(content);

      this.infoWindow.open(this.map, e.target.getPosition());

    },

    markerMouseout(e) {

      this.infoWindow.close(this.map, e.target.getPosition());

    },

    renderContent(nowOrgData) {

      let content = "";

      let leafNum = "";

      if (nowOrgData.childrenDomains == undefined) {

        content =

          '<img src="./static/images/mapmarker/map-marker-blue.png" style="z-index: 1;" />';

        return content;

      } else {

        leafNum = this.getLeafNum(nowOrgData);

        return this._renderClusterMarker(leafNum);

      }

    },

 

    getLeafNum: function(org) {

      if (org) {

        if (org.isLeaf) {

          this.leafNum++;

        } else {

          if (org.childrenDomains && org.childrenDomains.length) {

            for (let i = 0; i < org.childrenDomains.length; i++) {

              this.getLeafNum(org.childrenDomains[i]);

            }

          }

        }

      }

      return this.leafNum;

    },

    _renderClusterMarker(leafNum) {

      // let factor = Math.pow(leafNum, 1 / 18);

      // let div = document.createElement("div");

      // let Hue = 30 - factor * 180;

      // let bgColor = "hsla(" + Hue + ",100%,50%,0.7)";

      // let fontColor = "hsla(" + Hue + ",100%,20%,1)";

      // let borderColor = "hsla(" + Hue + ",100%,40%,1)";

      // let shadowColor = "hsla(" + Hue + ",100%,50%,1)";

      // div.style.backgroundColor = bgColor;

      // let size = Math.round(30 + Math.pow(leafNum, 1 / 5) * 10);

      // div.style.width = div.style.height = size + "px";

      // div.style.border = "solid 1px " + borderColor;

      // div.style.borderRadius = size / 2 + "px";

      // div.style.boxShadow = "0 0 1px " + shadowColor;

      // div.innerHTML = leafNum;

      // div.style.lineHeight = size + "px";

      // div.style.color = fontColor;

      // div.style.fontSize = "14px";

      // div.style.color = "white";

      // div.style.textAlign = "center";

      

      var div = '';

      if(leafNum>0 && leafNum < 10)

      {

          div = '<div style="width: 68px;height: 68px;  -moz-background-size: 100% 100%;background-size: 100% 100%; background-image: url(&quot;./static/images/ClusterImg/m1.png&quot;); text-align: center; line-height: 68px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer; color :white;">'+leafNum+'</div>'

      }else if(leafNum>=10&& leafNum < 50){

     div = '<div style="width: 80px; height: 80px;  -moz-background-size: 100% 100%;background-size: 100% 100%; background-image: url(&quot;./static/images/ClusterImg/m2.png&quot;); text-align: center; line-height: 80px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;">'+leafNum+'</div>'

      }else if(leafNum>=50&& leafNum < 100){

           div = '<div style="width: 100px; height: 100px; -moz-background-size: 100% 100%;background-size: 100% 100%; background-image: url(&quot;./static/images/ClusterImg/m3.png&quot;); text-align: center; line-height: 100px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;color :white;">'+leafNum+'</div>'

      }else if(leafNum>=100&& leafNum <500){

          //div.style.background =  'url("./static/images/ClusterImg/m5.png")'

          div = '<div style="width: 120px; height: 120px;  -moz-background-size: 100% 100%;background-size: 100% 100%; background-image: url(&quot;./static/images/ClusterImg/m4.png&quot;); text-align: center; line-height: 120px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;color :white;">'+leafNum+'</div>'

      }else{

           div = '<div style="width: 150px; height: 150px;  -moz-background-size: 100% 100%;background-size: 100% 100%; background-image: url(&quot;./static/images/ClusterImg/m5.png&quot;); text-align: center; line-height: 150px; background-position: 0px 0px; color: rgb(0, 0, 0); font-size: 12px; cursor: pointer;color :white;">'+leafNum+'</div>'

      }

      return div;

    },

    getCity(nowOrgData) {

      if (nowOrgData.domainname == "root") {

        return;

      }

      let self = this;

 

      self.map.getCity(function(info) {

        //     console.log(info)

        self.proviceInfo = info;

        self.renderDistrict(info);

      });

    },

    renderBoundary(Code, dep) {

      //省行政

      // console.log(Code,'code0000')

      let disProvince = new AMap.DistrictLayer.Province({

        adcode: [Code],

        depth: dep,

        styles: {

          fill: "#012f8d",

          "province-stroke": "#2db5ff",

          "city-stroke": "#2db5ff", //地级市边界#130e12

          "county-stroke": "#2db5ff" //区县边界#130e12 rgba(19,14,18,1)

        }

      });

      disProvince.setMap(this.map);

    },

    renderDistrict(info) {

      //省遮罩

 

      let Code = "";

      let dep = "";

      let self = this;

      new AMap.DistrictSearch({

        extensions: "all",

        subdistrict: 0

      }).search(info.province, function(status, result) {

        // 外多边形坐标数组和内多边形坐标数组

        Code = result.districtList[0].adcode;

        self.renderBoundary(Code, 2);

        let outer = [

          new AMap.LngLat(-360, 90, true),

          new AMap.LngLat(-360, -90, true),

          new AMap.LngLat(360, -90, true),

          new AMap.LngLat(360, 90, true)

        ];

        let holes = result.districtList[0].boundaries;

        let pathArray = [outer];

        pathArray.push.apply(pathArray, holes);

        let polygon = new AMap.Polygon({

          pathL: pathArray,

          //线条颜色，使用16进制颜色代码赋值。默认值为#006600

          strokeColor: "#2db5ff",

          strokeWeight: 4,

          //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9

          strokeOpacity: 1,

          //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00

          fillColor: "rgba(0,0,0)",

          //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9

          fillOpacity: 0,

          //轮廓线样式，实线:solid，虚线:dashed

          strokeStyle: "solid"

        });

        polygon.setPath(pathArray);

        self.map.add(polygon);

        // let overlaysList = self.map.getAllOverlays('polygon');//获取多边形图层

        //  self.map.setFitView(polygon);//自适应显示

      });

    }

  }

};

</script>

<style scoped>

   .infowindow{

        padding:5px;

        background:rgb(50,50,50,0.6);

        border-radius: 5px;

        box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;

        color:white;

    }

    .to_bottom {

    width: 0;

    height:0;    

    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;

    border-top: 10px solid rgb(100,100,100,0.8);

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-bottom: 10px solid transparent;

}

</style>