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

<template>
    <div>
        <div id="mapValue" :style="`height:${height || 300}px`"></div>
        <!--控制条-->
        <div class="map-control" v-if="isStart && !!point.length">
            <div class="clickIco">
                <i class="zoniot_font zoniot-icon-kaishi" v-if="palyStayus == 0" @click="navgControl('start')"></i>
                <i class="zoniot_font zoniot-icon-tingzhi" v-else-if="palyStayus == 2" @click="navgControl('pause')"></i>
                <i class="zoniot_font zoniot-icon-kaishi" v-else-if="palyStayus == 1" @click="navgControl('resume')"></i>
            </div>
            <el-slider
                class="slider"
                v-model="sliderVal"
                :show-tooltip="false"
                :format-tooltip="hideFormat"
                :step="0.0001"
                :disabled="beforeInit"
                @change="carReLocate"
            ></el-slider>
            <el-select v-model="times">
                <el-option :value="1" label="1倍速"></el-option>
                <el-option :value="2" label="2倍速"></el-option>
                <el-option :value="3" label="3倍速"></el-option>
                <el-option :value="4" label="4倍速"></el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
import functionJs from './pathSimplifierIns';
export default {
    props: ['point', 'isStart', 'height'],
    mixins: [functionJs],
    data() {
        return {
            marker: '',
            markerArr: [],
            polyline: null
        };
    },
    watch: {
        point: {
            handler() {
                if (!!this.map) {
                    this.lineArr = [];
                    // 判断当前是否有绘制点位清除
                    if (this.markerArr.length > 0) {
                        this.map.remove(this.markerArr);
                        this.markerArr = [];
                    }
                    // 判断当前是否有巡航路线清除
                    if (!!this.pathSimplifierIns) {
                        this.pathSimplifierIns.setData([]);
                        this.pathSimplifierIns = null;
                    }
                    // 判断当前是否有轨迹清除
                    if (!!this.polyline) {
                        this.map.remove(this.polyline);
                        this.polyline = null;
                    }
                    // 先初始化点位信息
                    this.point.map((item, index) => {
                        this.addIcon(item, index);
                    });
                    this.setMap();
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        init() {
            this.map = new AMap.Map('mapValue', {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 11 //初始化地图层级
            });
        },
        //绘制点位信息
        addIcon(e, index) {
            let lineArr = [e.longitude, e.latitude];
            this.marker = new AMap.Marker({
                icon: this.icon,
                position: lineArr
            });
            this.marker.setLabel({
                offset: new AMap.Pixel(-22, 40),
                content: `巡更点：${index + 1}`
            });
            this.markerArr.push(this.marker);
            this.lineArr.push(lineArr);
        },
        // 添加点位 添加路线到地图
        setMap() {
            this.map.add(this.markerArr);
            this.map.setFitView();
            // 大于一个点创建 巡航路线
            if (this.point.length > 1) {
                // 是否巡航开启
                if (this.isStart) {
                    this.$nextTick(() => {
                        this.initPlayBox();
                        this.beforeInit = true;
                        this.initLineArr(true);
                    });
                } else {
                    this.addPolyline();
                }
            }
        },
        //轨迹路线
        addPolyline() {
            this.polyline = new AMap.Polyline({
                map: this.map,
                path: this.lineArr,
                showDir: true,
                strokeColor: '#28F', //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6 //线宽
                // strokeStyle: "solid"  //线样式
            });
        }
    },
    created() {
        this.$nextTick(() => {
            this.init();
        });
    }
};
</script>
<style scoped  lang="scss">
#mapValue {
    width: 100%;
    /deep/ .amap-marker-label {
        border: 0 none;
        background-color: #fff;
        white-space: nowrap;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        border-radius: 5px;
    }

    /deep/ .amap-marker-label:before {
        position: absolute;
        border: 5px solid transparent;
        border-bottom-color: #fff;
        top: -10px;
        left: 43%;
        content: '';
        width: 0;
        height: 0;
    }
}
.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>