smart-bus-portal/src/views/bus/shiftInfo-map.vue

<template>
    <div>
      <el-amap
        ref="shiftMap"
        vid="shiftMap"
        :plugin="plugin"
        :center="centerPoint"
        :zoom="15"
        style="width: 100%; height: 550px"
      >
        <!--车辆当前位置-->
        <el-amap-marker
          :zIndex="2"
          :position="vehiclePos"
          :title="vehicle.licensePlateNumber"
          :icon="busIcon"
        ></el-amap-marker>

        <!--站点-->
        <el-amap-marker
          :zIndex="1"
          v-for="station in stationList"
          :key="station.id"
          :position="station.position"
          :title="station.title"
          :icon="station.icon"
        ></el-amap-marker>

        <!--路线-->
        <el-amap-polyline
          :path="mapPath"
          :zIndex="2"
          :isOutline="true"
          :outlineColor="'#ffeeff'"
          :borderWeight="3"
          :strokeColor="'#3366FF'"
          :strokeOpacity="1"
          :strokeWeight="6"
          :strokeStyle="'solid'"
          :strokeDasharray="[10, 5]"
          :lineJoin="'round'"
          :lineCap="'round'"
          :editable="false"
        ></el-amap-polyline>
      </el-amap>
    </div>
</template>
<script>
import routeInfoApi from "@/api/bus/routeInfo";
import vehicleInfoApi from "@/api/bus/vehicleInfo";
import busIcon from "@/assets/icons/bus.svg";
import stationIcon from "@/assets/icons/station.svg";
import greenIcon from "@/assets/icons/green.svg";
import redIcon from "@/assets/icons/red.svg";


export default {
    props :{
        shift : {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            busIcon: busIcon,
            stationIcon: stationIcon,
            showMapDialog: true,
            loading: false,
            centerPoint: [112.276585, 30.306401],
            stationList: [],
            mapPath: [],
            vehicle: {},
            vehiclePos: [112.276585, 30.306401],
            plugin: [
                {
                    pName: "ToolBar",
                    events: {
                        init(instance) {
                            console.log(instance);
                        }
                    }
                }
            ]
        }
    },
    methods: {
        loadVehicle(vehicleId) {
            vehicleInfoApi.edit(vehicleId).then(response=>{
                var jsonData = response.data;
                this.vehicle = jsonData.data;
                this.vehiclePos = [this.vehicle.longitude,this.vehicle.latitude];
                this.centerPoint = this.vehiclePos;

                console.log(this.centerPoint);

                // setTimeout(()=>{
                //     this.loadVehicle(vehicleId);
                // },60000);
            });
        },
        loadRouteMap(routeId) {
            //读取当前路线的站点
            this.loading = true;

            routeInfoApi.edit(routeId).then((response) => {
                this.loading = false;

                var jsonData = response.data;
                var model = jsonData.data;

                var _stationList = model.stationList;

                if (model.pathList != null) {
                    this.mapPath = model.pathList.map((item) => {
                        return item.split(",");
                    });

                    //this.centerPoint = this.mapPath[0];
                } else {
                    this.mapPath = [];
                }

                if (_stationList.length <= 1) {
                    this.$message.warning("请先至少设置2个站点!");
                } else {
                    this.stationList = [];

                    var initMapPath = this.mapPath.length == 0;

                    _stationList.forEach((item) => {
                        if (item.location != null && item.location.length > 0) {
                            var station = {
                                id: item.id,
                                title: item.name,
                                position: item.location.split(","),
                                icon: stationIcon
                            };

                            this.stationList.push(station);

                            if(item.stationSubInfoList!=null){
                                item.stationSubInfoList.forEach(subItem=>{
                                    var startToEnd = subItem.startStationId == this.stationList[0].id;

                                    this.stationList.push({
                                        id: subItem.id,
                                        title: item.name + "入口" + (startToEnd ? "(起)" : "(终)"),
                                        position: [subItem.longitude,subItem.latitude],
                                        icon: startToEnd ? greenIcon : redIcon
                                    });
                                });
                            }

                            if (initMapPath) {
                                this.mapPath.push(station.position);
                            }
                        }
                    });

                    // if (this.mapPath.length > 0) {
                    //     this.centerPoint = this.mapPath[0];
                    // }
                }
            });
        }
    },
    mounted: function () {
        console.log("mounted");
        console.log(this.shift);

        if(this.shift!=null) {
            this.loadVehicle(this.shift.vehicleId);
            this.loadRouteMap(this.shift.routeId);
        }
    }
}
</script>
<style>

</style>