站牌站点地图图表的删减

最新推荐文章于 2024-10-03 17:35:16 发布

huangminmin1001

最新推荐文章于 2024-10-03 17:35:16 发布

阅读量50

点赞数

分类专栏： vue-elment_admin 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/huangmin113659/article/details/91431615

版权

vue-elment_admin 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <div><span class="menus">运维管理 > 线路管理编辑</span><span class="route_name">线路名称: {{ routeParams.routeName }}</span></div>
    <el-form ref="form" :model="form" :inline="true" label-width="80px" size="small" class="editline_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="发车起点:">
            <el-input v-model="form.start"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="票价:">
            <el-input v-model="form.price"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="特殊提示:" class="smallinput" style="display: inline-block;">
            <el-input v-model="form.hint" style="display: inline-block;"/>
            <div style="display: block;width: 30px;height:100%;display: inline-block;margin:0px "/>
            <el-button
              type="primary"
              style="width: 140px;display: inline-block;border:none;border-radius:4px;background:linear-gradient(90deg,rgba(75,95,232,1) 0%,rgba(81,103,255,1) 100%);"
              @click="onSubmit">保存
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center" style="margin-top:10px">
        <el-col :span="6">
          <el-form-item label="发车终点:">
            <el-input v-model="form.end"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="线路状态:">
            <el-input v-model="form.status"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运营时间:">
            <el-time-picker
              v-model="form.date1"
              :picker-options="{
                selectableRange: '00:00:00 - 24:00:00'
              }"
              placeholder="请填写"
              class="smallinput"
              value-format="HH mm ss"
              style="width:140px"/>
            <!--<el-date-picker-->
            <!--v-model="form.date1"-->
            <!--type="date"-->
            <!--placeholder="请填写"-->
            <!--style="display: inline-block;"-->
            <!--class="smallinput"/>-->
            <div style="width: 30px;text-align: center ;display: inline-block">-</div>
            <!--<el-time-picker v-model="form.date2" placeholder="请填写" style="display: inline-block;" class="smallinput"/>-->
            <el-time-picker
              v-model="form.date2"
              :picker-options="{
                selectableRange: '00:00:00 - 24:00:00'
              }"
              placeholder="请填写"
              class="smallinput"
              value-format="HH mm ss"
              style="width:140px"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="18">
      <div class="map_and_sign" style="background-color: pink;">
        <el-col :span="16">
          <div style="padding: 10px;background-color: white; margin-top: 10px;">
            <div id="map_container" style=" width:100%;height: 600px;"/>
          </div>

        </el-col>
        <el-col :span="1"/>
        <el-col :span="8">
          <div class="sign_container">
            <div class="title">
              <div class="wrap_line_txt">
                <div class="line"/>
                <div
                  class="txt">
                  站点列表
                </div>
              </div>
              <el-button
                v-show="show_edit"
                type="primary"
                size="small"
                style="display: inline-block;border:none;border-radius:4px;background:linear-gradient(90deg,rgba(75,95,232,1) 0%,rgba(81,103,255,1) 100%);position:absolute;right:20px"
                @click="show_edit=false">编辑
              </el-button>
              <el-button
                v-show="!show_edit"
                type="primary"
                size="small"
                style="display: inline-block;border:none;border-radius:4px;background:linear-gradient(90deg,rgba(75,95,232,1) 0%,rgba(81,103,255,1) 100%);position:absolute;right:20px"
                @click="show_edit=true">完成
              </el-button>
            </div>

            <div class="sign_list">

              <div v-for="(item, index) in map_data" :key="index">
                <span class="round">
                  {{ index+1 }}
                </span>
                <el-input v-model="item.station" style="width:180px;display: inline-block;margin:5px" size="mini"/>
                <span v-show="!show_edit" class="minus" @click="Delete(index)"><span class="whiteline">-</span></span>
              </div>
              <div class="round">
                <span class="plus" @click="Add">+</span>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import AMap from 'AMap'
// import origin_img from '../../../assets/images/origin.png'

export default {
  name: 'EditlineVue',
  data() {
    return {
      routeParams: {},
      map: null,
      trafficLayer: null,
      marker: null,
      containerOne: null,
      containerTwo: null,
      position: null,
      circle: null, // 上面为地图数据
      arr_marker: [],
      map_data: [{
        P: 30.316008,
        Q: 120.33797500000003,
        lat: 30.316008,
        lng: 120.337975,
        station: '丁桥公交站'
      }, {
        P: 30.320456,
        Q: 120.32605000000001,
        lat: 30.320456,
        lng: 120.32605,
        station: '湖滨公交站'
      }, {
        P: 30.317266,
        Q: 120.29208399999999,
        lat: 30.317266,
        lng: 120.292084,
        station: '西兴公交站'
      },
      {
        P: 30.313082,
        Q: 120.29204600000003,
        lat: 30.313082,
        lng: 120.292046,
        station: '晋江公交站'
      },
      {
        P: 30.311275,
        Q: 120.29155000000003,
        lat: 30.311275,
        lng: 120.29155,
        station: '龙想公交站'
      }, {
        P: 30.223953,
        Q: 120.27271999999999,
        lat: 30.223953,
        lng: 120.27272,
        station: '西湖公交站'
      },
      {
        P: 30.174978,
        Q: 120.21054100000003,
        lat: 30.174978,
        lng: 120.210541,
        station: '大阪公交站'
      }],
      show_edit: true,
      form: {
        start: '',
        end: '',
        price: '',
        hint: '',
        status: '',
        date1: '',
        date2: ''
      }
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        if (val.fullPath === '/editline_detail') {
          this.routeParams = val.params.item
          this.form = {
            start: val.params.item.origin,
            end: val.params.item.terminal,
            price: val.params.item.price,
            date1: val.params.item.firstBus,
            date2: val.params.item.lastBus
          }
          this.updateMap()
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.map && this.map.destroy()
  },
  methods: {
    async updateMap() {
      this.map_data = [{
        P: 30.316008,
        Q: 120.33797500000003,
        lat: 30.316008,
        lng: 120.337975,
        station: '丁桥公交站'
      }, {
        P: 30.320456,
        Q: 120.32605000000001,
        lat: 30.320456,
        lng: 120.32605,
        station: '湖滨公交站'
      }, {
        P: 30.317266,
        Q: 120.29208399999999,
        lat: 30.317266,
        lng: 120.292084,
        station: '西兴公交站'
      },
      {
        P: 30.313082,
        Q: 120.29204600000003,
        lat: 30.313082,
        lng: 120.292046,
        station: '晋江公交站'
      },
      {
        P: 30.311275,
        Q: 120.29155000000003,
        lat: 30.311275,
        lng: 120.29155,
        station: '龙想公交站'
      }, {
        P: 30.223953,
        Q: 120.27271999999999,
        lat: 30.223953,
        lng: 120.27272,
        station: '西湖公交站'
      },
      {
        P: 30.174978,
        Q: 120.21054100000003,
        lat: 30.174978,
        lng: 120.210541,
        station: '大阪公交站'
      }]
      await this.mapDestroy()
      await this.init()
    },
    mapDestroy() {
      this.map && this.map.destroy()
    },
    init() {
      console.log(this.map_data)
      this.map = new AMap.Map('map_container', {
        center: [this.map_data[parseInt(this.map_data.length / 2)].Q, this.map_data[parseInt(this.map_data.length / 2)].P],
        zoom: 13,
        // mapStyle: 'amap://styles/whitesmoke',
        hideMarkers: true
      })

      const drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        ferry: 1, // 为1的时候表示不可以使用轮渡
        autoFitView: true,
        hideMarkers: true
      }

      // 构造路线导航类
      const driving = new AMap.Driving(drivingOption)

      const _this = this
      // 根据起终点经纬度规划驾车导航路线

      for (let i = 0; i < this.map_data.length - 1; i++) {
        // console.log('-------' + i)
        driving.search(new AMap.LngLat(this.map_data[i].Q, this.map_data[i].P), new AMap.LngLat(this.map_data[i + 1].Q, this.map_data[i + 1].P), function(status, result) {
          // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            if (result.routes && result.routes.length) {
              // 绘制第一条路线，也可以按需求绘制其它几条路线
              _this.drawRoute(result.routes[0])
              // console.log('绘制驾车路线完成')
            }
          } else {
            console.log('获取驾车数据失败：' + result)
          }
        })
      }
      this.AddRound()
      // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
      // DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
    },
    drawRoute(route) { // 步骤一：画轨迹
      const path = this.parseRouteToPath(route)
      // console.log(path)
      const routeLine = new AMap.Polyline({
        path: path,
        isOutline: true,
        outlineColor: '#4168F6',
        // borderWeight: 2,
        strokeWeight: 5,
        strokeColor: '#4168F6',
        lineJoin: 'round'
      })

      routeLine.setMap(this.map)
      // 清除单个标记
      // middle2Marker.setMap(null)
      // middle2Marker = null;
      // 清除所有标记
      // this.map.remove([startMarker, endMarker])

      // 调整视野达到最佳显示区域
      // this.map.setFitView([startMarker, endMarker, routeLine])
      // this.map.setFitView([routeLine])
    },
    AddRound() {
      this.arr_marker = []
      for (let j = 0; j < this.map_data.length; j++) {
        // console.log('######' + j)
        const temp_marker = new AMap.Marker({
          position: this.map_data[j],
          content: '' + `<div>
      <div class="round_img">
        <span style="text-align: center;vertical-align: middle">${j + 1}</span>
      </div>
    </div>`,
          map: this.map
        })
        this.arr_marker.push(temp_marker)
      }
    },
    parseRouteToPath(route) { // 中间方法解析称经纬度
      const path = []

      for (var i = 0, l = route.steps.length; i < l; i++) {
        const step = route.steps[i]

        for (var j = 0, n = step.path.length; j < n; j++) {
          path.push(step.path[j])
        }
      }
      return path
    },
    onSubmit() {
      this.$message({
        message: '保存成功',
        type: 'success'
      })
    },
    async Delete(index) {
      if (index > -1) {
        await this.arr_marker[index].setMap(null)
        this.map_data.splice(index, 1)
        this.arr_marker.splice(index, 1)
        await this.map.remove(this.arr_marker)
        await this.AddRound()
      }
    },
    Add() {
      this.show_edit = false
      this.map_data.push({
        P: 39.865582,
        Q: 116.37983700000001,
        lat: 39.865582,
        lng: 116.379837,
        station: ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .menus{
   color:#8C8C8C;
    font-weight:500;
    font-size: 15px;
    font-family:SourceHanSansCN-Medium;
    position:absolute;
    top: 19px;
    left:6%;
    display: inline-block;
    background-color: #f2f4f6;
    /*background-color: purple;*/

  }
  /deep/ .round_img {
    width: 30px;
    height: 38px;
    line-height: 30px;
    text-align: center;
    background: url('../../../assets/images/origin.png') center/cover;
  }
  .route_name {
    text-align: center;
    top: 20px;
    left: 46%;
    position: absolute;
    font-size: 15px;
    font-family: SourceHanSansCN-Medium;
    font-weight: 500;
    color: rgba(38, 138, 250, 1);
  }

  .editline_container {
    margin-top: 10px;
    padding: 20px;
    background-color: white;
    width: 98%;
    margin: 0 auto;
    border-radius: 4px;

    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 140px;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      min-width: 140px;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
    .smallinput {
      .el-input {
        width: 140px;
      }
      /deep/ .el-input__inner {
        width: 140px;
      }

      /deep/ .el-time-panel__content {
        width: 140px;
      }
      /deep/ .el-time-panel__footer {
        width: 140px;
      }
    }
    /*/deep/ .el-input__inner {*/
    /*width: 180px;*/
    /*}*/
    /*/deep/ .el-form-item{*/
    /*height:32px;*/
    /*}*/
    /*/deep/ .el-form-item {*/
    /*margin-bottom: 15px;*/
    /*}*/
    /deep/ .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
      width: 140px;
    }
    /deep/ .el-time-panel.el-popper {
      width: 140px;
    }

  }

  .map_and_sign {
    width: 98%;
    margin: 0 auto;
    height: 100%;
    positin: relative;
    /*overflow: hidden;*/
  }

  #map_container {
    border-radius: 4px;
    width: 100%;
    height: 600px;

    .custom-content-marker {
      position: relative;
      width: 25px;
      height: 34px;
    }

    .custom-content-marker img {
      /*width: 100%;*/
      /*height: 100%;*/
      width: 25px;
      height: 34px;
    }

    .custom-content-marker .number {
      position: absolute;
      top: 5px;
      left: 8px;
    }

    .custom-content-marker .number:hover {
      background: #666;
    }
  }

  .sign_container {
    width: 100%;
    height: 620px;
    background: white;
    border-radius: 4px;
    margin-top: 10px;
    padding: 20px;
    .title {
      position: relative;
      .wrap_line_txt {
        display: inline-flex;
        width: 100px;
        margin-left: 20px;
        vertical-align: middle;
        .line {
          width: 2px;
          height: 16px;
          background: #338afa;
          line-height: 20px;
        }
        .txt {
          margin-left: 15px;
          font-size: 16px;
          color: #707070;
        }
      }
    }

    .sign_list {
      margin-left: 20px;
      margin-top: 20px;
    }
    .minus {
      display: inline-block;
      background-color: #338afa;
      height: 12px;
      width: 12px;
      line-height: 12px;
      text-align: center;
      font-size: 18px;
      /*vertical-align: center;*/
      border-radius: 10px;
      color: white;
      position: relative;
      .whiteline {
        display: inline-block;
        position: absolute;
        margin-top: -2px;
        margin-left: -3px;
        text-align: center;
      }
    }
    .round {
      color: white;
      display: inline-block;
      background-color: #338afa;
      height: 18px;
      width: 18px;
      text-align: center;
      font-size: 8px;
      vertical-align: center;
      line-height: 18px;
      border-radius: 10px;
      margin: 1px
    }

  }
</style>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Driving"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<!--增加地图-->
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />