nezha-nezha-fronted/nezha-fronted/src/components/common/latlngPicker.vue

<template>
  <div class="latlng">
    <div class="input-box">
      <div class="input-box-item">
        <el-input  v-model="lnglat" @change="setLatlng" @focus="oldlnglat = lnglat" @blur="changeLnglat">
          <template slot="prepend" v-if="showZoom">{{$t('config.system.basic.lnglat')}}</template>
        </el-input>
      </div>
      <div class="input-box-item" v-if="showZoom">
        <el-input controls-position="right" :min="this.mapParam.minZoom" :max="this.mapParam.maxZoom" :step="1"  v-model="mapParam.zoom">
          <template slot="prepend">{{$t('config.system.basic.zoom')}}</template>
        </el-input>
      </div>
      <div class="input-box-item" style="margin-right: unset !important;width: 30px !important;flex:unset;" @click="mapConfigVisible = true"><i class="nz-icon nz-icon-weizhi" style="color:rgb(238, 157, 63)"></i></div>
    </div>
    <el-dialog :visible.sync="mapConfigVisible" :title="$t('config.system.basic.mapTitle')" width="calc(50% - 10px)"  @close="mapClose" @opened="initMap" class=" nz-dialog map-config-dialog" :modal-append-to-body="appendToBody">
      <div id="map" style="height: 100%; width: 100%"></div>
    </el-dialog>
  </div>
</template>

<script>
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'
export default {
  name: 'latlngPicker',
  props: {
    initData: { },
    appendToBody: { type: Boolean, default: true },
    showZoom: { type: Boolean, default: true }
  },
  data () {
    return {
      lnglat: '',
      oldlnglat: '',
      mapParam: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 },
      map: null,
      marker: null,
      mapConfigVisible: false
    }
  },
  watch: {
    initData: {
      immediate: true,
      handler () {
        if (this.initData) {
          this.mapParam = JSON.parse(JSON.stringify(this.initData))
          this.lnglat = this.mapParam.longitude + ',' + this.mapParam.latitude
        } else {
          this.queryDefaultMapConfig().then(() => {
            this.lnglat = this.mapParam.longitude + ',' + this.mapParam.latitude
          })
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    initMap: function () {
      if (this.map) {
        this.map.remove()
        this.map = null
      }
      this.setLatlng()
      const DefaultIcon = L.icon({
        iconUrl: icon,
        iconSize: [26, 40],
        iconAnchor: [13, 40],
        shadowUrl: iconShadow
      })
      L.Marker.prototype.options.icon = DefaultIcon
      const map = L.map('map', {
        minZoom: this.mapParam.minZoom,
        maxZoom: this.mapParam.maxZoom,
        attributionControl: false,
        zoomControl: false,
        maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
      }).setView([this.mapParam.latitude, this.mapParam.longitude], this.mapParam.zoom)

      L.tileLayer(
        '/static/Tiles/{z}/{x}/{y}.png',
        { noWrap: true }
      ).addTo(map)

      const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
      attribution.addAttribution(' © OpenStreetMap contributors')
      attribution.addTo(map)

      L.control.zoom({
        position: 'bottomright',
        zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
        zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
        zoomInTitle: '',
        zoomOutTitle: ''
      }).addTo(map)

      const marker = L.marker([this.mapParam.latitude, this.mapParam.longitude]).addTo(map)
      map.on('click', function (e) {
        const latitude = e.latlng.lat
        const longitude = e.latlng.lng
        marker.setLatLng([latitude, longitude])
      })
      this.map = map
      this.marker = marker
    },
    mapClose: function () {
      this.mapConfigVisible = false
      const latlng = this.marker.getLatLng()
      this.mapParam.longitude = latlng.lng.toFixed(3)
      this.mapParam.latitude = latlng.lat.toFixed(3)
      this.lnglat = this.mapParam.longitude + ',' + this.mapParam.latitude

      this.mapParam.zoom = this.map.getZoom()
    },
    setLatlng: function () {
      const lnglat = this.lnglat.split(',')
      this.mapParam.longitude = lnglat[0]
      this.mapParam.latitude = lnglat[1]
    },
    getAttribute: function () {
      return JSON.parse(JSON.stringify(this.mapParam))
    },
    setLnglat: function (lat, lng) {
      if (lat && lng) {
        this.mapParam.latitude = lat
        this.mapParam.longitude = lng
        this.lnglat = this.mapParam.longitude + ',' + this.mapParam.latitude
      }
    },
    changeLnglat () {
      const lnglat = this.lnglat.split(',')
      if (lnglat.length !== 2) {
        this.lnglat = this.oldlnglat
        this.$message.error(this.$t('tip.lnglatError'))
        return false
      }
      const lngReg = /^[\-\+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/
      const latReg = /^[\-\+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/
      if (!lngReg.test(lnglat[0]) || !latReg.test(lnglat[1])) {
        this.lnglat = this.oldlnglat
        this.$message.error(this.$t('tip.lnglatError'))
        return false
      }
    },
    queryDefaultMapConfig: function () {
      return new Promise(resolve => {
        this.$get('/sysConfig?paramKey=map_center_config').then(response => {
          if (response.code == 200) {
            this.mapParam = JSON.parse(response.data.paramKey.map_center_config)
            resolve()
          }
        })
      })
    }
  }
}
</script>

<style scoped>
  .latlng .input-box{
    width: 100%;
    display: flex;
  }
  .latlng .input-box .input-box-item{
    margin-right: 20px;
    flex: 1;
  }
  .latlng .input-box .el-input,.latlng .input-box .el-input-number{
    width: 100%;
  }
</style>

<style>
  .latlng .map-config-dialog .el-dialog{
    height: 45%;
  }
  .latlng .map-config-dialog .el-dialog__body{
    height: calc(100% - 48px) !important;

  }
  .latlng .input-box .el-input .el-input-group__prepend{
    padding:0px 5px!important;
  }
</style>