高德地图画线

<template>
  <!-- <el-card> -->
  <div class="card">
    <div class="query-from">
      <el-form :model="dataForm">
        <el-form-item label="车辆VIN:">
          <el-input v-model="dataForm.vin" style="width: 220px" placeholder="单行输入" />
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button type="primary" @click="getqueryTrack()">查询</el-button>
    </div>
  </div>
  <!-- </el-card> -->
  <div class="map-content">
    <div id="container"></div>
  </div>
</template>
<script>
import { defineComponent, onBeforeMount, reactive, toRefs } from "vue";
import { shallowRef } from "@vue/reactivity";
import AMapLoader from "@amap/amap-jsapi-loader";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
export default defineComponent({
  setup() {
    const map = shallowRef(null);
    const state = reactive({
      dataForm: {
        vin: "" //车辆vin
      },
      // 组件加载后隐藏
      showInfoWindow: false,
      infoWindow: {},
      trackInfoList: [], //过滤后deviceInfo === 0 的值
      filtrackInfoList: [], //过滤后经纬度的值
      dataList: []
    });
    //#region
    // onBeforeMount(() => {
    //   initMap();
    // });
    // // 初始化地图
    // const initMap = () => {
    //   AMapLoader.load({
    //     key: "725997161d56e28f560d01da79a013a1", // 申请好的Web端开发者Key，首次调用 load 时必填
    //     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //     plugins: [""] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    //   })
    //     .then((AMap) => {
    //       this.map = new AMap.Map("container", {
    //         //设置地图容器id
    //         viewMode: "2D", //是否为3D地图模式
    //         zoom: 5, //初始化地图级别
    //         center: [105.602725, 37.076636] //初始化地图中心点位置
    //       });
    //       initLine();
    //       console.log(12312312);
    //     })
    //     .catch((e) => {
    //       console.log(e);
    //     });
    // };

    // // 地图轨迹点
    // const initLine = () => {
    //   var path = [
    //     [116.362209, 39.887487],
    //     [116.422897, 39.878002],
    //     [116.372105, 39.90651],
    //     [116.428945, 39.89663]
    //   ];
    //   var polyline = new AMap.Polyline({
    //     path: path,
    //     isOutline: true,
    //     outlineColor: "#ffeeff",
    //     borderWeight: 3,
    //     strokeColor: "#3366FF",
    //     strokeOpacity: 1,
    //     strokeWeight: 6,
    //     // 折线样式还支持 'dashed'
    //     strokeStyle: "solid",
    //     // strokeStyle是dashed时有效
    //     strokeDasharray: [10, 5],
    //     lineJoin: "round",
    //     lineCap: "round",
    //     zIndex: 50
    //   });

    //   map.add([polyline]);
    //   map.setFitView();
    // }
    //initMap,initLine
    //#endregion
    return { ...toRefs(state), map };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "725997161d56e28f560d01da79a013a1", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "2D", //是否为2D地图模式
            zoom: 5, //初始化地图级别 地图初始放大级别 0 - 22
            center: [105.602725, 37.076636] //初始化地图中心点位置
          });
          // this.getqueryTrack()
          this.initLine();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 地图轨迹点
    initLine(res) {
      console.log("path", res);
      // var path = res;
      var path = [
        [116.362209, 39.887487],
        [116.422897, 39.878002],
        [116.372105, 39.90651],
        [116.428945, 39.89663]
      ];
      let path5 = [
        { lng: 116.362209, lat: 39.887487 },
        { lng: 116.422897, lat: 39.878002 },
        { lng: 116.372105, lat: 39.90651 },
        { lng: 116.428945, lat: 39.89663 }
      ];
      var polyline = new AMap.Polyline({
        path: path,
        isOutline: true,
        outlineColor: "#ffeeff",
        borderWeight: 3,
        strokeColor: "#4B679E",
        strokeOpacity: 1,
        strokeWeight: 6,
        lineJoin: "round", //折线拐点
        lineCap: "square", //折线两端绘制样式
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        //轮廓线宽度
        // strokeWeight: "2",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        zIndex: 50
      });

      this.map.add([polyline]);
      this.map.setFitView();
      this.initMaker(path);
    },

    // LVYPDBZD1LP166524

    //查询物流轨迹信息
    getqueryTrack() {
      baseService.get("/sys/gpstaskinfo/vin/" + this.dataForm.vin).then((res) => {
        console.log("path1", res);
        this.dataList = res.data.gpsPositioningInfoDTOList;
        if (res.code !== 0) {
          return ElMessage.error(res.msg);
        }

        //#region
        // for(let item = 0; item <= res.data.gpsPositioningInfoDTOList.length; item++){
        //   if(item.deviceInfo === 0){
        //     this.trackInfoList.push(item)
        //   }
        // }
        //#endregion

        // 过滤deviceInfo是否等于0
        let trackInfoList = [];
        res.data.gpsPositioningInfoDTOList.forEach((item, i) => {
          if (item.deviceInfo === 0) {
            trackInfoList.push(item);
          }
        });

        //提取坐标点
        let filtrackInfoList = [];
        trackInfoList.forEach((item1, i) => {
          filtrackInfoList.push(item1.lng, item1.lat);
        });

        this.initLine(this.arrToTwoDim(filtrackInfoList));

        // this.initMaker(trackInfoList);
      });
    },

    //一维数组处理成二维数组
    arrToTwoDim(arr, n = 2) {
      var arr2 = [];
      for (var i = 0, j = 0; i < arr.length; i += n) {
        // 初始化数组单个元素为数组
        arr2[j] = [];
        for (var k = 0; k < n; k++) {
          if (i + k < arr.length) arr2[j].push(arr[i + k]);
        }
        j++;
      }
      return (this.filtrackInfoList = arr2);
    },

    // 地图标点
    initMaker(e) {
      if (e) {
        var pos_icon = [];
        var pos_marker = [];
        for (let i in e) {
          pos_icon[i] = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(12, 12),
            // 图标的取图地址
            image: "https://shanci.oss-cn-hangzhou.aliyuncs.com/fuhong/20220920/672170add10a4bddaa92c98a70b65e7c.png",
            // 图标所用图片大小
            imageSize: new AMap.Size(12, 12)
          });
          // console.log("ssss", icons);
          pos_marker[i] = new AMap.Marker({
            position: e[i],
            icon: pos_icon[i],
            anchor: "center", //设置锚点
            offset: new AMap.Pixel(0, 0) //设置偏移量
          });

          this.map.add(pos_marker[i]);
        }
        // for (let j in e.splice(-1)) {
        //   var marker = new AMap.Marker({
        //     position: new AMap.LngLat(e[j].lng, e[j].lat),
        //     offset: new AMap.Pixel(-10, -10),
        //     icon: "//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", // 添加 Icon 图标 URL
        //     title: "北京"
        //   });
        //   console.log(11111);
        //   //添加marker标记
        //   var marker = new AMap.Marker({
        //     map: this.map,
        //     position: [e[j].lng, e[j].lat]
        //   });
        //   console.log(22222);
        //   //鼠标点击marker弹出自定义的信息窗体
        //   // marker.on("click", function () {
        //   //   infoWindow.open(map, marker.getPosition());
        //   // });
        //   marker.on("click", this.markerClick);
        //   this.map.add(marker);
        //   console.log(33333);
        // }
      }
    },
    //添加marker标记
    // addMarker() {
    //   map.clearMap();
    //   var marker = new AMap.Marker({
    //     map: map,
    //     position: [116.481181, 39.989792]
    //   });
    //   //鼠标点击marker弹出自定义的信息窗体
    //   marker.on("click", function () {
    //     infoWindow.open(map, marker.getPosition());
    //   });
    // }

    //#region
    // addMarker() {
    //   console.log("123123123123123123123123123123");
    //   // 创建标记点Marker
    //   let labelMarker = new AMap.LabelMarker({
    //     icon: "icon路径",
    //     position: "position定位点"
    //   });
    //   // labelMarker都绑定上点击事件
    //   labelMarker.on("click", (e) => {
    //     // 点击后创建自定义信息窗口
    //     this.setInfoWindows(title, content, e);
    //     // 把地图中心点设置为当前点击的标记点
    //     this.map.setZoomAndCenter(this.zoom, item.position);
    //   });
    // },
    // setInfoWindows(title, content, e) {
    //   console.log(e);
    //   // 此时需要把组件的样式设置为可见
    //   this.showInfoWindow = true;
    //   // 设置marker头部的标题信息窗口
    //   const infoWindow = new this.AMap.InfoWindow({
    //     // 使用自定义窗体
    //     isCustom: true,
    //     // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
    //     content: this.$refs["infoWindow"].$el,
    //     // 设置定位偏移量
    //     offset: new this.AMap.Pixel(-9, -60)
    //   });
    //   this.infoWindow = infoWindow;
    //   // 信息窗口打开
    //   infoWindow.open(this.map, e.target.getPosition());
    // }
    //#endregion

    // 点标记点击事件
    markerClick(e) {
      console.log(e);
      this.infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -35),
        content: this.content(e.target.getExtData()) // 覆盖物自定义extData
      });
      this.infoWindow.open(this.map, e.target.getPosition()); // 在地图的指定位置打开信息窗体

      // 在信息弹窗内添加交互事件
      // 因为添加到infowindow中的button绑定的是window的全局方法，所以这里需要将组件的局部方法赋值给全局方法。
      if (!window.updateUser) {
        window.updateUser = this.updateUser;
      }
    },

    // 信息弹窗 content，用的是拼接字符串的方法
    content(val) {
      var tips = val.tips;
      var v = this.dataList;
      var content = `
      <div>
	      <div class="wuliu">物流信息</div>
        <div class="map_tips_user">
        	<div class="user_list_one">
        		<span>车辆vin：</span>
        		<span class="user_list_text">${v[0].carId}</span>
        	</div>
        	<div class="user_list_one">
        		<span>更新时间：</span>
        		<span class="user_list_text" >${v[0].createDate}</span>
        	</div>
        	<div class="user_list_one">
        		<span>位置：</span>
        		<span class="user_list_text">--</span>
        	</div>
        	<div class="user_list_one">
        		<span>车辆状态：</span>
        		<span class="user_list_text">待运输整备</span>
        	</div>
       	</div>
      </div>`;
      return content;
    }
  }
});
</script>

<style lang="less" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
.card {
  display: flex;
  .query-from {
    padding-right: 15px;
  }
}
.map-content {
  width: 94.5vw;
  height: 100vh;
  margin-bottom: 0px;
}
.wuliu {
  background-color: antiquewhite;
  height: 30px;
  line-height: 30px;
}
</style>