jintan-canlian-web/src/views/record/map.vue

<template>
  <div style="position: relative;" v-loading='fullscreenLoading'>
    <div class='opensearch' @click='openSearch = true' v-if="!openSearch">
      查询
    </div>
    <div class='mapsearch' v-else>
      <span class="closeSearch" @click='openSearch = false'>
        <i class="el-icon-arrow-right"></i>
      </span>
      <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;margin-bottom:10px">
        <Input v-model="select.name" style="width: 65px;margin-right: 10px;" placeholder="姓名" />
        <el-select class='street' v-model="select.street" placeholder="街道" clearable>
          <el-option v-for="item in streetList" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
        <el-select class='street' v-model="select.disabilitytype" placeholder="残疾类别" clearable>
          <el-option v-for="item in typeList" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
        <el-select class='street' v-model="select.disabilitylevel" placeholder="残疾等级" clearable>
          <el-option v-for="item in levelList" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
        <Button type="primary" @click="getindex">查询</Button>
      </div>
      <div>
        <Table :width="482" :max-height='280' @on-row-click='movetoperson' :height='280' highlight-row
          ref="currentRowTable" :columns="columns" :data="mapList" />
        <Page :current="select.page" :total="select.total" size="small" show-total show-elevator
          style="padding-top: 14px;display: flex;justify-content: center;" @on-change="pageChange" />
      </div>
    </div>
    <div class="map" id="map" :style="{'height':mapHeight+'px'}"></div>
    <div ref='infoWindow' id="infoWindow">
      <i @click='closeWin' class="el-icon-close"></i>
      <div v-for="item in openData">
        <p>姓名：<span>{{item.name}}</span></p>
        <p>现居住地：<span>{{item.reside}}</span></p>
        <p class="showInfo" @click="showInfo(item.id)">人员视图</p>
      </div>
    </div>
  </div>

</template>
<script>
  import {
    getparameter
  } from "@/api/system/dictionary";
  import {
    index,
    save
  } from "@/api/system/baseForm.js"
  import {
    Message
  } from 'element-ui'

  export default {
    data() {
      return {
        zoom: 11,
        center: [119.597897, 31.723247],
        mapHeight: 0,
        map: null,
        makerList: [],
        infoWindow: null,
        openData: [],
        // markerList: [],
        ispage:false,
        mapList: [],
        fullscreenLoading: false,
        streetList: [],
        typeList:[],
        levelList:[],
        openSearch: false,
        select: {
          page_size: 50,
          page: 1,
          street: '',
          disabilitylevel:'',
          disabilitytype:'',
          name: '',
          table_name: 'records',
          show_relation: ['admin', 'department'],
          total: 0
        },
        columns: [{
          title: '姓名',
          key: 'name',
          render:(h,params)=>{
            return h('i',{
              attrs:{
                class:'el-icon-position'
              }
            },params.row.name)
          }
        }, {
          title: '所属街道',
          key: 'jiedao',
        }, {
          title: '残疾类别',
          key: 'disabilitytype',
        }, {
          title: '残疾等级',
          key: 'disabilitylevel',
        }]
      }
    },
    mounted() {
      // typeList:[],
      // levelList:[],
      this.initHeight()
      this.getLabel()
      this.$nextTick(function() {
        this.mapInit()
      })
      if (this.$route.query?.street) {
        this.select.street = this.$route.query.street
        this.openSearch = true
        this.getindex()
      }else{
        this.getindex()
      }

    },
    methods: {
      // openFullScreen() {
      //   this.fullscreenLoading = true;
      //   setTimeout(() => {
      //     this.fullscreenLoading = false;
      //   }, 2000);
      // },
      async getLabel() {
        let numbers = {
          number:['streetList','disabilitylevelList','disabilitytypeList']
        }
        const res = await getparameter(numbers);
        for(var k of res){

          this.streetList = k.number=='streetList'?k.detail:this.streetList
          this.typeList = k.number=='disabilitytypeList'?k.detail:this.typeList
          this.levelList = k.number=='disabilitylevelList'?k.detail:this.levelList
        }
      },
      async initHeight() {
        let winHeight = document.body.clientHeight
        this.mapHeight = winHeight - 50 - 20
      },
      // 初始化地图，并加载行政区域
      async mapInit() {
        this.map = new AMap.Map("map", {
          center: this.center,
          mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
          zoom: this.zoom
        });
        // 行政区域加载
        let that = this
        let adcode = ['320413'];
        this.areaBG(this.map, adcode);
        this.infoWindow = new AMap.InfoWindow({
          isCustom: true,
          autoMove: true,
          avoid: [20, 20, 20, 20],
          content: this.$refs.infoWindow,
          closeWhenClickMap: true,
          offset: new AMap.Pixel(-10, -10)
        })
      },
      // 加载金坛区
      areaBG(map, adcode) {
        AMap.service('AMap.DistrictSearch', function() {
          let opts = {
            subdistrict: 1, // 返回下一级行政区
            extensions: 'all', // 返回行政区边界坐标组等具体信息
            level: 'city', // 查询行政级别为市
            // adcode:'320413'
          };
          // 实例化DistrictSearch
          let district = new AMap.DistrictSearch(opts);
          district.setLevel('district');
          // 行政区查询
          district.search(`${adcode}`, function(status, result) {
            // 获取边界信息
            let bounds = result.districtList[0].boundaries;
            let polygons = [];
            if (bounds) {
              for (let i = 0, l = bounds.length; i < l; i++) {
                // 生成行政区划polygon
                let polygon = new AMap.Polygon({
                  map: map,
                  strokeWeight: 1,
                  path: bounds[i],
                  fillOpacity: 0.2,
                  fillColor: 'rgba(71,228,194,1)',
                  strokeColor: '#147d38'
                });
                polygons.push(polygon);
              }
            }
          });
        });
      },
      // 增加点位
      setMapMarker() {
        var that = this
        // console.log("123",m.longitude, m.latitude)
        // console.log('456',gcj02towgs84(m.longitude, m.latitude))
        that.map.remove(that.makerList)
        that.makerList = []
        // this.map.clearMap();
        let list = this.mapList.map((m) => {
          return {
            id: m.id, //数据id
            name: m.name, //数据名称
            reside: m.reside,
            // lnglat: [m.lon, m.lat],//经纬度数据
            lnglat: [m.longitude, m.latitude], //这里我是转化一下，数据返回的是84坐标系需要转成高德坐标系否则会有偏差
            style: 0, //渲染的样式下标，关联第一步创建的样式对象数组的数据
          };
        });
        // this.$nextTick(() => {
        //   var mass = new AMap.MassMarks(list, {
        //     opacity: 0.8,
        //     zIndex: 111,
        //     cursor: 'pointer',
        //     style: {
        //       url: 'https://webapi.amap.com/images/mass/mass1.png',
        //       anchor: new AMap.Pixel(6, 6),
        //       size: new AMap.Size(11, 11),
        //       zIndex: 999,
        //     }
        //   });
        //   // var marker = new AMap.Marker({
        //   //   content: ' ',
        //   //   map: this.map,
        //   // });

        //   mass.on('mouseover', function(e) {
        //     console.log("e", e)
        //     that.openData = []
        //     // marker.setPosition(e.data.lnglat);
        //     // marker.setLabel({
        //     //   content: e.data.name
        //     // })
        //     that.openData.push(e.data)
        //     that.infoWindow.open(that.map, e.data.lnglat)
        //   });
        //   // marker.on('click', (e) => {
        //   //     this.openData = []
        //   //     if (e.target.w.extData === item.id) {
        //   //       this.openData.push(item)
        //   //     }
        //   //     this.infoWindow.open(this.map, e.target.getPosition())
        //   //   }),
        //   mass.setMap(this.map);
        // })

        this.mapList.forEach((item, index) => {
          // 遍历生成多个标记点
          if (!item.longitude || !item.latitude) {

            return
          }
          let marker = new AMap.Text({
            map: this.map,
            text: item.name,
            zIndex: 9999999,
            offset: new AMap.Pixel(-13, -30),
            position: [item.longitude, item.latitude],
            clickable: true,
            extData: item.id,
            style: {
              'border': '1px solid red',
              'padding': '0px 5px'
            }
          })
          marker.on('click', (e) => {
              this.openData = []
              if (e.target.w.extData === item.id) {
                this.openData.push(item)
              }
              this.infoWindow.open(this.map, e.target.getPosition())
            }),
            this.makerList.push(marker)
        });
        this.map.add(this.makerList)
      },
      closeWin() {
        this.infoWindow.close()
      },
      showInfo(id) {
        this.$router.push({
          path: "/record/personinfo",
          query: {
            id: id
          }
        })
      },
      pageChange(e) {
        this.select.page = e
        this.ispage = true
        this.getindex()
      },
      movetoperson(row, index) {
        this.openData = []
        this.openData.push(row)
        if(row.longitude && row.latitude){
          this.map.panTo([row.longitude, row.latitude])
          this.infoWindow.open(this.map, [row.longitude, row.latitude])
        }else{
           this.map.panTo(this.center)
           this.infoWindow.open(this.map, this.center)
        }

      },
      async getindex() {
        if(!this.ispage){
          this.select.page = 1
        }
        this.fullscreenLoading = true;
        this.mapList = []
        // this.map.remove(this.marker)
        let res = await index({
          page_size: this.select.page_size,
          page: this.select.page,
          table_name: this.select.table_name,
          show_relation: this.select.show_relation,
          filter: [{
            "key": "name",
            "op": "like",
            "value": this.select.name
          }, {
            "key": "jiedao",
            "op": "eq",
            "value": this.select.street
          },{
            "key": "disabilitytype",
            "op": "eq",
            "value": this.select.disabilitytype
          },{
            "key": "disabilitylevel",
            "op": "eq",
            "value": this.select.disabilitylevel
          }],
        })
        this.select.total = res.total
        this.ispage = false
        if(res.data.length<1){

          Message({
            type: 'warning',
            message: '暂无数据'
          })
          this.fullscreenLoading = false;
          return
        }
        let _data = []
        let _nolng = [] //只有地址没有经纬度
        for (var k of res.data) {
          if (k.longitude && k.latitude) {
            _data.push(k)
          } else {
            if (k.reside == null || k.reside == '') {
              // return
            } else {
              _nolng.push(k)
            }
          }
        }
        // return
        this.mapList = _data
        var geocoder = null
        let that = this
        if(_nolng.length>0){
          AMap.plugin("AMap.Geocoder", function() {
            geocoder = new AMap.Geocoder({
              city: '常州' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            })
            _nolng.map((k, index) => {
              geocoder.getLocation(k.reside, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  // result中对应详细地理坐标信息
                  k.longitude = result.geocodes[0].location.lng
                  k.latitude = result.geocodes[0].location.lat
                  // save({
                  //   table_name: that.select.table_name,
                  //   ...k
                  // })
                }
                if (index == _nolng.length - 1) {
                  that.mapList.push(..._nolng)
                  that.setMapMarker()
                  that.fullscreenLoading = false;
                }
              })

            })
            // for (let k of _nolng) {

            // }
          })
        }else{
          that.setMapMarker()
          that.fullscreenLoading = false;
        }

        // setTimeout(function() {
        //   that.mapList.push(..._nolng)
        //   that.setMapMarker()
        //   that.fullscreenLoading = false;
        // }, 5000);



      },



    }

  }
</script>
<style scoped>
  #infoWindow {
    position: relative;
  }

  #infoWindow>div {
    background: #fff;
    border: 1px solid red;
    padding: 10px;
    width: 180px;
  }

  /deep/ #infoWindow .el-icon-close {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
  }

  .showInfo {
    text-align: center;
    cursor: pointer;
    color: #147d38;
  }

  .opensearch {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    color: #fff;
    width: 50px;
    height: 50px;
    background: #147d38;
    border-radius: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    font-weight: bold;
  }

  .mapsearch {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    background: #fff;
    padding: 10px;
  }
  .closeSearch{
    position: absolute;
    top: 40%;
    left: -20px;
    /* border: 1px solid red; */
    width: 40px;
    height: 40px;
    border-radius: 40px 0 0 40px;
    text-align: center;
    line-height: 40px;
    font-size: 22px;
    background: #fff;
    z-index: 99;
    cursor: pointer;
  }
  .street {
    margin-right: 10px;
    width:105px
  }

  /deep/ .street .el-input__inner {
    height: 32px;
  }

  /deep/ .street .el-select__caret {
    line-height: 32px;
  }
</style>