SmartCommunity/operationSupport/src/views/patrolManagement/popups/mapValue.vue

<template>
    <div>
        <div id="mapValue" ></div>
        <!--控制条-->
        <div class="map-control" v-if="isStart">
            <div class="clickIco" @click="startAnimation()">
                <i class="zoniot_font" :class="isSta?'zoniot-icon-kaishi':'zoniot-icon-tingzhi'"></i>
            </div>
            <el-slider
                class="slider"
                v-model="sliderVal"
                :format-tooltip="hideFormat"
                :step="0.0001"
            ></el-slider>
            <el-select v-model="speed">
                <el-option :value="1000" label="1倍速"></el-option>
                <el-option :value="1500" label="1.5倍速"></el-option>
                <el-option :value="2000" label="2倍速"></el-option>
                <el-option :value="3000" label="3倍速"></el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
export default {
    props: ['point','isStart'],
    data() {
        return {
            map: '',
            marker: '',
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
            markerArr: [],
            lineArr: [],
            marker2: '',
            speed: 1000,
            sliderVal: 0,
            isSta: true
        };
    },
    watch: {
        point(e) {
            this.point.map((item, index) => {
                let tag = false;
                if (index == this.point.length - 1) {
                    tag = true;
                }
                if (!!this.map) {
                    this.addIcon(item, tag);
                }
            });
        },
        speed(e) {
            this.startAnimation(e);
        }
    },
    methods: {
        init() {
            this.map = new AMap.Map('mapValue', {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 11 //初始化地图层级
            });
        },
        addIcon(e, is) {
            let _this = this;
            let lineArr = [e.longitude, e.latitude];
            this.marker = new AMap.Marker({
                icon: this.icon,
                position: lineArr
            });
            this.map.add(this.marker);
            this.markerArr.push(this.marker);
            this.lineArr.push(lineArr);
            this.map.setFitView();
            if (is) {
                this.initLineArr();
            }
        },
        initLineArr() {
            let _this = this;
            this.marker2 = new AMap.Marker({
                map: _this.map,
                position: _this.lineArr[0],
                icon: 'https://webapi.amap.com/images/car.png',
                offset: new AMap.Pixel(-26, -13),
                autoRotation: true,
                angle: -90
            });
            // 绘制轨迹
            let polyline = new AMap.Polyline({
                map: this.map,
                path: _this.lineArr,
                showDir: true,
                strokeColor: '#28F', //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6 //线宽
                // strokeStyle: "solid"  //线样式
            });
            let passedPolyline = new AMap.Polyline({
                map: _this.map,
                // path: lineArr,
                strokeColor: '#AF5', //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6 //线宽
                // strokeStyle: "solid"  //线样式
            });
            this.marker2.on('moving', e => {
                passedPolyline.setPath(e.passedPath);
            });
            this.marker2.on('moveend', e => {
                this.isSta = true;
            });
        },
        startAnimation(time) {
            let _this = this;
            this.isSta = false;
            this.marker2.moveAlong(
                this.lineArr,
                time | 1000,
                e => {
                    this.sliderVal = e * 100;
                    return e;
                },

                false
            );
        }
    },
    created() {
        this.$nextTick(() => {
            this.init();
        });
    }
};
</script>
<style scoped  lang="scss">
/* --------------------------------高德地图样式----------------------------- */
#mapValue {
    // margin-top: 20px;
    width: 100%;
    height: 300px;
}
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
            span {
                font-size: 12px;
                color: #b4b4b4;
            }
        }
    }
}
.map-control {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .clickIco i {
        font-size: 30px;
        line-height: 31px;
    }
    .slider {
        width: calc(100% - 270px);
    }
}
</style>