smart-bus-portal/src/views/bus/routeInfo-getpoint.vue

<template>
  <el-dialog
      :visible.sync="innerVisible"
      title="地图选点"
      :modal-append-to-body="true"
      :append-to-body="true"
      style="text-align: left"
      width="905px"
      top="5vh"
      :close-on-click-modal="false"
    >
      <el-amap
        ref="stationMap"
        vid="stationMap"
        :amap-manager="amapManager"
        :center="pointPosition"
        :zoom="zoom"
        :events="events"
        class="amap-demo"
        :plugin="plugins"
        style="width: 100%; height: 500px"
      >
        <!--站点及入口-->
        <el-amap-marker
          :zIndex="1"
          v-for="point in points"
          :key="point.id"
          :position="point.position"
          :title="point.title"
          :icon="point.icon"
          :events="markerEvents"
          :extData="point"
        ></el-amap-marker>
      </el-amap>
      <span slot="footer" class="dialog-footer">
        <div style="position: absolute; left: 20px; bottom: 20px">
          <el-select size="mini" v-model="selectedValue" @change="pointChange">
              <el-option
                v-for="point in points"
                :key="point.id"
                :label="point.title"
                :value="point.id">
            </el-option>
          </el-select>
          <el-input
            placeholder="当前经纬度"
            v-model="selectedPoint.location"
            style="width: 320px"
            size="mini"
          >
            <template slot="prepend">经纬度</template>
            <el-button slot="append" icon="el-icon-search" @click="handleRegeo" size="mini">定位</el-button>
          </el-input>
          <el-switch
            size="mini"
            v-model="ranging"
            @change="rangingChange"
            active-text="开启测距"
            inactive-text="关闭测距">
          </el-switch>
        </div>
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="handleSelectPoint()">确 定</el-button>
      </span>
    </el-dialog>
</template>
<script>
import Constant from "@/constant";
import routeInfoApi from "@/api/bus/routeInfo";
import SelectTree from "@/components/SelectTree";
import companyInfoApi from "@/api/bus/companyInfo";
import dataDictionaryApi from "@/api/sys/dataDictionary";
import regionInfoApi from "@/api/base/regionInfo";

import greenIcon from "@/assets/icons/green.svg";
import redIcon from "@/assets/icons/red.svg";
import stationIcon from "@/assets/icons/station.svg";

import AMap from "vue-amap";
let amapManager = new AMap.AMapManager();


export default {
    props: ["visible"],
    computed: {
        innerVisible: {
            get: function() {
                return this.visible
            },
            set: function(val) {
                this.$emit('update:visible', val)
            }
        }
    },
    data() {
        return {
            points: [],
            selectedValue: "",
            selectedPoint: {},
            station: {},
            plugins: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType","AMap.RangingTool"],
            pointPosition: [112.240222, 30.337053],
            amapManager,
            zoom: 12,
            mapRuler: {},
            ranging: false,
            events: {
                init: (map)=>{
                const ruler = new window.AMap.RangingTool(map);
                this.mapRuler = ruler
                },
                click: (e) => {
                    console.log(e);

                    if(!this.ranging){
                        var pt = e.lnglat; //点击选择新地址为中心点
                        console.log(pt);

                        this.pointPosition = [pt.lng, pt.lat];

                        if(this.selectedPoint!=null){
                            this.selectedPoint.position = [pt.lng,pt.lat];
                            this.selectedPoint.location = pt.lng + "," + pt.lat;
                        }
                    }
                }
            },
            markerEvents: {
                click: (e) => {
                    var point = e.target.w.extData;
                    this.selectedValue = point.id;

                    this.pointChange(this.selectedValue);
                }
            }
        }
    },
    methods: {
        cancel() {
            this.$emit("update:visible", false);
        },
        rangingChange(value) {
            if(value){
                this.mapRuler.turnOn();
            }
            else{
                this.mapRuler.turnOff();
            }
        },
        showPoint(row) {
            this.station = row;

            this.points = [];

            if (row.location != null && row.location.length > 0) {
                var arr = row.location.split(",");
                this.pointPosition = arr;

                this.points.push({
                    id: row.id,
                    type: "station",
                    title: row.name,
                    position: arr,
                    icon: stationIcon,
                    location: row.location
                });
            }
            else{
                this.points.push({
                    id: row.id,
                    type: "station",
                    title: row.name,
                    position: this.pointPosition,
                    icon: stationIcon,
                    location: this.pointPosition[0] + "," + this.pointPosition[1]
                });
            }

            this.selectedValue = row.id;
            this.selectedPoint = this.points[0];

            if(row.stationSubInfoList!=null){
                row.stationSubInfoList.forEach(subItem=>{
                    var frontToEnd = subItem.direction=="1";

                    this.points.push({
                        id: subItem.id,
                        type: "sub",
                        title: row.name + "入口" + (frontToEnd ? "(起)" : "(终)"),
                        position: [subItem.longitude,subItem.latitude],
                        icon: frontToEnd ? greenIcon : redIcon,
                        location: subItem.longitude + ',' + subItem.latitude
                    });
                });
            }
        },
        handleRegeo() {
            var row = this.selectedPoint;

            if (row.location != null && row.location.length > 0) {
                var arr = row.location.split(",");
                row.position = arr;
                
                this.pointPosition = arr;
            }
        },
        handleSelectPoint() {
            //返回修改的站点及经纬度
            this.$emit("yes", this.points);
            this.$emit("update:visible", false);
        },
        pointChange(val) {
            console.log(val);

            for(var i=0;i<this.points.length;i++){
                if(this.points[i].id == val){
                    this.selectedPoint = this.points[i];
                    break;
                }
            }
        }
    }
}
</script>
<style>

</style>