地图点聚合和自定义弹窗窗体和绘制折线图轨迹

参考链接:https://blog.csdn.net/weixin_43180359/article/details/114636382
0.初始化地图
介绍下zooms的意思

zooms 表示地图显示的缩放级别范围。在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19] 。当 expandZoomRange 为 true 时， zooms的最大级别在PC上可以扩大到20级。（移动端还是高清19/非高清20 ）

代码如下：

var map = new AMap.Map('container', {
   resizeEnable: true,
   expandZoomRange:true,
   zoom:20,
   zooms:[3,20],
   center: [116.397428, 39.90923]
});
alert(map.getZoom());

// 初始化地图
    initMap() {
      this.$nextTick(() => {
        lazyAMapApiLoaderInstance.load().then(() => {
          this.map = new AMap.Map("mapScreen", {
            center: [106.25936, 29.29014],
            zoom: 12,
            zooms: [3,20],
            expandZoomRange:true,
            mapStyle: "amap://styles/darkblue",
          });
          // 创建 AMap.Icon 实例：未选中的地图标记
          this.commonMarker = new AMap.Icon({
            size: new AMap.Size(55, 55), // 图标尺寸
            image: require("./img/mapnochecked.png"), // Icon的图像
            imageSize: new AMap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
          });
          // 选中的地图标记
          this.clickMarker = new AMap.Icon({
            size: new AMap.Size(55, 55), // 图标尺寸
            image: require("./img/mapChecked.png"), // Icon的图像
            imageSize: new AMap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
          });
          // 第一次调出队伍建设
          this.handleteamBuild();
        });
      });
    },

1.接口组装返回的数据

image.png

2.点击监管对象触发方法

  //监管对象
    handleRegularObject() {
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      this.regulatoryArray = [];
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      //海量点标记，点聚合开始
      getObjectListApi({
        orgId: "",
        tradeCategory: "",
      }).then((res) => {
        loading.close();
        // 第一个then开始
        console.time();
        this.regulatoryArray = res.data.map((item) => {
          return {
            list: item,
            points: [item.longitude, item.latitude],
          };
        });
        console.timeEnd();
        console.time();
        this.regulatoryArray.map((item) => {
          let myIcon = new AMap.Icon({
            size: new AMap.Size(84, 84),
            image: require("@/views/bigScreen/img/mapnochecked.png"),
          });
          // 取位置
          let marker = new AMap.Marker({
            position: item.points, //位置
            icon: myIcon,
            offset: new AMap.Pixel(-20, -40),
            zIndex: 111,
          });
          this.markers.push(marker);
          marker.on("click", (e) => {
            this.markerClick2(e, item.list);
          });
        });
        console.timeEnd();
        let sts = [
          {
            url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
            size: new AMap.Size(38, 38),
            offset: new AMap.Pixel(-16, -16),
            textColor: "#fff",
          },
        ];
        this.map.plugin(["AMap.MarkerClusterer"], () => {
          this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
            styles: sts,
            gridSize: 80, //聚合计算时网格的像素大小
            minClusterSize: 20, //聚合的最小数量
            maxZoom: 18,
          });
        });
        // 第1个then结束
      });
      // .then((res) => {
      //   getObjectListApi({
      //     orgId: "5ce48f30940d430ea9d55a3f7ba4c829",
      //     tradeCategory: "",
      //   }).then((res) => {
      //     this.markers = [];
      //     // 第2个then开始
      //     this.cluster.setMap(null);
      //     let tempp2 = [];
      //     tempp2 = res.data.map((item) => {
      //       return {
      //         list: item,
      //         points: [item.longitude, item.latitude],
      //       };
      //     });
      //     this.regulatoryArray = this.regulatoryArray.concat(tempp2);
      //     console.log(this.regulatoryArray);
      //     this.regulatoryArray.map((item) => {
      //       let myIcon = new AMap.Icon({
      //         size: new AMap.Size(84, 84),
      //         image: require("@/views/bigScreen/img/mapnochecked.png"),
      //       });
      //       // 取位置
      //       let marker = new AMap.Marker({
      //         position: item.points, //位置
      //         icon: myIcon,
      //         offset: new AMap.Pixel(-20, -40),
      //         zIndex: 111,
      //       });

      //       this.markers.push(marker);
      //       marker.on("click", (e) => {
      //         this.markerClick2(e, item.list);
      //       });
      //     });
      //     let sts = [
      //       {
      //         url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
      //         size: new AMap.Size(38, 38),
      //         offset: new AMap.Pixel(-16, -16),
      //         textColor: "#fff",
      //       },
      //     ];
      //     this.map.plugin(["AMap.MarkerClusterer"], () => {
      //       this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
      //         styles: sts,
      //         gridSize: 80, //聚合计算时网格的像素大小
      //         minClusterSize: 20, //聚合的最小数量
      //         maxZoom: 18,
      //       });
      //     });
      //     // 第二个then结束
      //   });
      // });

      //海量点标记，点聚合结束
    },

3.vue自定义窗体
这个是信息窗体组件

 <information2 v-show="showInfoWindow" ref="infoWindow" :reguObjectItem="reguObjectItem" :reguObjectList="reguObjectList" :info-window="infoWindow"></information2>

    // 监管对象-点击marker点改变图标，并且调用自定义窗体
    markerClick2(e, item) {
      console.log(item);
      // 调用监管对象-表格数据start
      if (this.status == "2") {
        getRoundsLogByObjectApi({ objectId: item.objectId }).then((res) => {
          if (res && res.data) {
            this.reguObjectList = res.data;
          }
        });
        findByIdApi2({ objectId: item.objectId }).then((res) => {
          console.log(res.data);
          if (res && res.data) {
            this.reguObjectItem = res.data;
          }
        });
      }
      // 调用监管对象-表格数据end
      this.map.setZoomAndCenter(10, e.target.getPosition());
      for (let i = 0; i < this.markers.length; i++) {
        this.markers[i].setIcon(this.commonMarker);
      }
      e.target.setIcon(this.clickMarker); //修改选中的标记图
      this.setInfoWindows(e); //用vue组件的形式设置信息窗体
    },
    //用vue组件的形式设置信息窗体
    setInfoWindows(e) {
      this.showInfoWindow = true; //显示信息体窗口组件
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.$refs["infoWindow"].$el,
        offset: new AMap.Pixel(60, 235),
      });
      this.infoWindow.open(this.map, e.target.getPosition());
    },

绘制折线图轨迹

   // 绘制轨迹
    drawTrail(){
      let temptrack =[[120.930868,36.500691],[120.951639,36.499449],[120.953699,36.474745]];
          this.polyline = new AMap.Polyline({
              map: this.map,
              path: temptrack,
              showDir: true, //是否显示箭头false/true
              strokeColor: "#28F", //线颜色
              strokeWeight: 8, //线宽
              // strokeStyle: "solid", //线样式,实线"solid"/虚线"dashed"
            });
            this.map.add(this.polyline);//将折线图添加到地图
    },

清楚折线图

    // 关闭移动轨迹图
    closeDrawtrail(){
       this.polyline && this.map.remove(this.polyline);//清除折线图
    },