mapTalks相关

之前写maptalks都是直接复制粘贴就完了，但是现在独立开发一个大屏之后好好的用了一下maptalks，有一些东西记一下免得忘记。

1.关于创建point

关于创建point就暂时记录这些，可以根据自己的需求进行更改，这部分代码也是在之前cv过来之后进行了更改

markerPoint(pointList, type) {
      //如果有点图层，则清除之
      if (this.map.getLayer("point")) {
        this.map.getLayer("point").remove();
      }
      if (this.map.getLayer("cluster")) {
        this.map.getLayer("cluster").remove();
      }
      let item = []
      item.push(pointList)
      pointList = item
      let layer = new maptalks.VectorLayer("point").addTo(this.map); //创建点图层
      let markers = []; //标注集合
      //循环获取测试数据经纬度和名称，添加到标注属性
      for (let i = 0; i < pointList.length; i++) {
        let marker = new maptalks.Marker(
          [pointList[i].sites.lng, pointList[i].sites.lat],
          {
            symbol: {
              markerFile: this.loadImg(pointList[i].type),
              markerWidth: 49,
              markerHeight: 60,
              markerDx: 0,
              markerDy: 0,
              markerOpacity: 1,
            },
            cursor: "pointer", //小手
          }
        ).on("mouseenter", (e) => {
          //鼠标移入事件
          this.addMouseHover(e, pointList[i].name);
        })
          .on("mouseout", (e) => {
            //鼠标移出事件
            this.addMouseOut(e);
          }).on("mousedown", () => {
            //鼠标点击事件
            this.addMarkerClick(pointList[i], type);
          });
        marker.$obj = pointList[i];
        markers.push(marker);
      }
      this.pointList1 = markers;
      layer.addGeometry(markers);
      //这个地方是添加放大图层之后显示名称的div框
      this.addLabelLayer();
    },

2.关于轨迹路线创建

addtrajectory() {
      if (this.map.getLayer("trajectoryLine")) {
        this.map.getLayer("trajectoryLine").remove();
      }
      let trajectoryLayer = new maptalks.VectorLayer("trajectoryLine")
        .setZIndex(99)
        .addTo(this.map);
      let line = [];
       //这个select就是你查询数据的方法，
      select().then(res => {
        let data = res
        let arr = [[],[]]
        //这里的arr是你经过处理之后获得的数据，一定要是二维数组，数组里面是经纬度数据
        let trajectoryData = arr;
        // 创建轨迹线要素
        line.push(new maptalks.LineString(trajectoryData, {
          symbol: {
            lineWidth: 2,
            lineColor: '#f13a79'
          }
        }));
        trajectoryLayer.addGeometry(line);
      })
    },

3.对于点击point之后直接地图放大到以内个点为中心

this.map.animateTo(
          {
            center: ["经度","纬度"],
            zoom: 17.4,//选你要的层级
          },
          {
            duration: 1000,
          }
        );

暂时关于maptalks的小记就这些