fpsys/src/views/map/dtl.vue

<template>
  <div class="app-container">
    <div :class="isDbShow ? 'scoped-deal-box' : 'scoped-deal-box t2'">
      <div class="sdb-info">
        <div class="p1">当前缩放级别:{{mapDiyObj.zoom}}<span class="more" @click="setShowChange">{{isMapSetShow ? '收起设置' : '展开设置'}}></span></div>
        <div class="p2" v-show="isMapSetShow">
          <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="80px">
            <div slot="footer">
              <el-button class="xl-form-btn bgc2" @click="setHandle">设置</el-button>
              <div class="scoped-select-center" @click="setCenterHandle">中心坐标<div class="s">{{centerStr}}</div></div>
            </div>
          </base-form>
        </div>
      </div>
      <div class="sdb-add">
        <div class="b t2" @click="openMte('polygonAdd')">添加多边形</div>
        <div class="b t2" @click="openMte('textAdd')">添加文字</div>
      </div>
      <div class="sdb-add">
        <div class="b t3" @click="saveHandle()">保 存</div>
      </div>
      <div class="sdb-list" v-if="polygons.length > 0">
        <div class="label t2">多边形列表</div>
        <div class="ul">
          <div class="op" v-for="(polygon, index) in polygons" :key="index">
            <p class="p1" @click="openMte('polygonAdd', {obj: polygon, index})">{{polygon.text}}</p>
            <p class="more">
              <span v-if="polygon.editable" class="d d2" @click="textAdd(polygon)">标点</span>
              <span v-if="polygon.editable" class="d d1" @click="mapIsEdit(index, 'polygons')">编辑</span>
              <span v-else class="d d3" @click="mapIsEdit(index, 'polygons')">只读</span>
              <span class="d d4" @click="mapDel(index, 'polygons')">删除</span>
            </p>
          </div>
        </div>
      </div>
      <div class="sdb-list" v-if="markerData.length > 0">
        <div class="label t2">文字列表(选中:{{curMarkersIndex + 1}})</div>
        <div class="ul">
          <div class="op" v-for="(t, index) in markerData" :key="index">
            <p class="p1" @click="openMte('textAdd', {obj: t, index})">({{curMarkersIndex + 1}}){{t.content}}</p>
            <p class="more">
              <span v-if="t.draggable" class="d d1" @click="mapIsEdit(index, 'markerData')">编辑</span>
              <span v-else class="d d3" @click="mapIsEdit(index, 'markerData')">只读</span>
              <span class="d d4" @click="mapDel(index, 'markerData')">删除</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-amap
      class="amap-box"
      :vid="'amap-vue'"
      :amap-manager="amapManager"
      :zoom="mapDiyObj.zoom"
      :zooms="mapDiyObj.zooms"
      :mapStyle="mapDiyObj.mapStyle"
      :center="mapDiyObj.center"
      :events="events"
      :plugin="plugin"
    >
      <template v-if="mapDiyObj.zoom > 3">
        <el-amap-marker v-for="(marker, index) in markerData" :key="1000 + index"
          :position="marker.position"
          :draggable="marker.draggable"
          :animation="marker.animation"
          :offset="marker.offset"
          :events="markersEvents">
          <div class="scoped-marker-text" :style="`color: ${marker.color}`">{{marker.content}}</div>
        </el-amap-marker>
      </template>
      <el-amap-polygon
        v-for="(polygon, index) in polygons"
        :key="index"
        :path="polygon.path"
        :editable="polygon.editable"
        :fillColor="polygon.fillColor"
        :fillOpacity="polygon.fillOpacity"
        :strokeColor="polygon.strokeColor"
        :strokeWeight="polygon.strokeWeight"
        :strokeOpacity="polygon.strokeOpacity">
      </el-amap-polygon>
    </el-amap>
    <MapTextEdit
      :isShow="isMteShow"
      :mteStr="mteStr"
      :curObj="mteObj"
      @close="closeMte"/>
  </div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager()
import MapTextEdit from './components/popup/MapTextEdit'
import { arrToObj } from '@/utils'
export default {
  name: 'map',
  components: {
    MapTextEdit
  },
  mixins,
  data() {
    const that = this
    return {
      isDbShow: true,
      isMapSetShow: false,
      formData: [],
      isMteShow: false,
      mapDiyObj: {
        center: [115.852386, 28.684076],
        zoom: 17,
        zooms: [15, 19],
      },
      amapManager,
      polygons: [
        // {
        //   path: [[115.823481,28.702359],[115.861933,28.672241],[115.812838,28.629609],[115.793784,28.657179]],
        //   strokeWeight: 2,
        //   fillColor: '#f00',
        //   strokeStyle: 'solid',
        // },
        // {
        //   path: [[115.859015,28.654919],[115.93386,28.630212],[115.841849,28.606101]],
        //   editable: true,
        //   strokeWeight: 1,
        //   fillColor: '#ffffff',
        //   strokeStyle: 'dashed',
        // },
      ],
      markerData: [],
      events: {
        init(map) {
          // map.setFeatures(['road', 'point', 'bg', 'building']); // 多个种类要素显示
          // map.setFeatures(['road']); // 多个种类要素显示
          // map.setMapStyle('amap://styles/647a4a7f773b3c7143b46e7c3e499f1f');
          AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
            //图层切换控件
            var layerControl = new BasicControl.LayerSwitcher({
              baseLayers: [
                {
                  id: 'basic',//图层id，需唯一
                  enable: true, //是否启用
                  name: '基础地图',//显示名称，html
                  layer: new AMap.TileLayer()
                },
                {
                  id: 'Satellite',//图层id，需唯一
                  enable: false, //是否启用
                  name: '卫星图',//显示名称，html
                  layer: new AMap.TileLayer.Satellite()
                },
              ],
              overlayLayers:[
              ],
              position: {
                bottom:'50px',
                right:'30px',
              },
            });
            map.addControl(layerControl);
          })
        },
        zoomchange (e) {
          const curMap = amapManager.getMap()
          that.mapDiyObj.zoom = curMap.getZoom() || 17
        },
        // click(e) {
        //   const { lng, lat } = e.lnglat
        //   console.log(lng, lat)
        // },
      },
      markersEvents: {
        dragend(e) {
          const { lng, lat } = e.lnglat
          let markerData = JSON.parse(JSON.stringify(that.markerData))
          markerData[that.curMarkersIndex].position = [lng, lat]
          that.markerData = [...markerData]
        },
      },
      curMarkersIndex: 0,
      plugin: [{
        pName: 'MouseTool',
      }],
      mteStr: 'polygonAdd',
      mteObj: {},
    }
  },
  computed: {
    centerStr () {
      const center = this.mapDiyObj.center
      if (center && center.length > 0) {
        return `${center[0]}, ${center[1]}`
      } else {
        return '待选取'
      }
    }
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    setShowChange () {
      this.isMapSetShow = !this.isMapSetShow
    },
    getDef () {
      let params = {}
      params = { ...this.mapDiyObj }
      params.zoom1 = params.zooms[0]
      params.zoom2 = params.zooms[1]
      this.formData = [
        { label: '地图标题', key: 'title', rules: 1},
        { label: '主题样式', key: 'mapStyle', type: 'select', rules: 1, 
          options: [
            {key: '默认样式', val: 'normal'},
            {key: '深色样式', val: 'dark'},
            {key: '浅色样式', val: 'light'},
            {key: '清新风格osm', val: 'fresh'},
          ]
        },
        { label: '显示内容', key: 'features', type: 'select', multiple: true, rules: 1, 
          options: [
            {key: '区域面', val: 'bg'},
            {key: '兴趣点', val: 'point'},
            {key: '道路和标注', val: 'road'},
            {key: '建筑物', val: 'building'},
          ]
        },
        { label: '默认级别', key: 'zoom', rules: 1},
        { label: '最小3+', key: 'zoom1', rules: 1},
        { label: '最大19-', key: 'zoom2', rules: 1},
      ]
      this.setDefaultValue(params)
      this.setCurFeatures(params.features)
    },
    setCurFeatures (data) {
      window.setTimeout(() => {
        const curMap = this.amapManager.getMap()
        curMap.setFeatures(data)
      }, 500)
    },
    getData () {
      const query = this.$route.query
      this.$api.other.admmapcoordindetail({
        uuid: query.id
      }).then(res => {
        if (res.data) {
          const data = JSON.parse(res.data)
          this.polygons = [...data.polygons]
          this.markerData = [...data.markerData]
          this.mapDiyObj = {
            ...data.mapDiyObj,
            title: res.title,
          }
        } else {
          this.mapDiyObj = {
            mapStyle: 'light',
            zoom: 17,
            zooms: [15, 19],
            center: [115.852386, 28.684076],
            title: res.title,
            features: ['road', 'bg', 'building']
          }
        }
        this.getDef()
      })
    },
    setHandle () {
      this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
        if (valid) {
          const oldform = this.$refs.ruleForm.baseForm
          let newForm = { ...oldform }
          let mapDiyObj = { ...this.mapDiyObj }
          mapDiyObj.zoom = Number(newForm.zoom)
          mapDiyObj.zooms = [Number(newForm.zoom1), Number(newForm.zoom2)]
          mapDiyObj.title = newForm.title
          mapDiyObj.mapStyle = newForm.mapStyle
          mapDiyObj.features = newForm.features
          this.mapDiyObj = {...mapDiyObj}
          this.setCurFeatures(newForm.features)
          this.isMapSetShow = false
        }
      })
    },
    setCenterHandle () {
      const that = this
      const curMap = this.amapManager.getMap()
      let mouseTool = new AMap.MouseTool(curMap)
      mouseTool.marker({
        content: ' ',
      })
      that.isDbShow = false
      that.$msgs('请在地图上选择中心点')
      AMap.event.addListener(mouseTool,'draw',function(e){
        let cPath = e.obj.getPosition()
        let mapDiyObj = {...that.mapDiyObj}
        mapDiyObj.center = [cPath.lng, cPath.lat]
        that.mapDiyObj = {...mapDiyObj}
        that.$msg('中心坐标选取成功~如需重新选中心点，请再次点击中心坐标位置')
        that.isDbShow = true
        window.setTimeout(() => {
          mouseTool.close(true)
        }, 100)
      })
    },
    saveHandle () {
      this.$msg(`您确定要保存该数据（覆盖原来数据）吗？`, 'confirm', () => {
        let polygons = JSON.parse(JSON.stringify(this.polygons))
        polygons.map(one=> {
          let tPath = []
          one.editable = false
          one.path.forEach(sub => {
            tPath.push([sub.lng, sub.lat])
          })
          one.path = tPath
        })
        let markerData = JSON.parse(JSON.stringify(this.markerData))
        markerData.map(one => {
          one.draggable = false
        })
        const data = {
          polygons,
          markerData,
          mapDiyObj: this.mapDiyObj,
        }
        const query = this.$route.query
        this.$api.other.admmapcoordinedit({
          uuid: query.id,
          title: this.mapDiyObj.title,
          data: JSON.stringify(data)
        }).then(res => {
          this.getData()
        })
      })
    },
    polygonAdd (obj) {
      const that = this
      const curMap = this.amapManager.getMap()
      let mouseTool = new AMap.MouseTool(curMap)
      mouseTool.polygon({
        fillColor:'#00b0ff',
        strokeColor:'#80d8ff',
        editable: true,
        strokeStyle: 'dashed',
      })
      AMap.event.addListener(mouseTool,'draw',function(e) {
        let cPath = [...e.obj.getPath()]
        let tempPath = []
        cPath.forEach(item => {
          tempPath.push([item.lng, item.lat])
        })
        let polygons = [...that.polygons]
        polygons.push({
          path: tempPath,
          editable: true,
          fillColor: obj.fillColor || '#DC3021', // 填充色
          fillOpacity: obj.fillOpacity || 0.3, // 填充透明度
          strokeColor: obj.strokeColor || '#DC3021', // 轮廓颜色
          strokeWeight: 2, // 轮廓宽度
          strokeOpacity: 0.9, // 轮廓透明度
          text: obj.text,
        })
        that.polygons = [...polygons]
        mouseTool.close(true)
        that.isDbShow = true
        console.log(that.isDbShow)
      })
    },
    mapIsEdit (index, str) {
      this.curMarkersIndex = index
      let tempData = [...this[str]]
      if (str === 'polygons') {
        if (tempData[index].editable) {
          tempData[index].editable = false
          tempData[index].strokeStyle = 'solid'
        } else {
          tempData[index].editable = true
          tempData[index].strokeStyle = 'dashed'
        }
      } else {
        tempData[index].draggable = !tempData[index].draggable
        // tempData[index].animation = tempData[index].draggable ? 'AMAP_ANIMATION_BOUNCE' : 'AMAP_ANIMATION_DROP'
      }
      this[str] = [...tempData]
      this.$storage(`map_${str}`, JSON.stringify(tempData))
    },
    mapDel (index, str) {
      this.$msg(`您确定要删除该数据吗？`, 'confirm', () => {
        let tempData = [...this[str]]
        tempData.splice(index, 1)
        this[str] = [...tempData]
        this.$storage(`map_${str}`, JSON.stringify(tempData))
      })
    },
    openMte (str, obj) {
      this.mteStr = str
      this.isMteShow = true
      if (obj) {
        this.mteObj = {...obj}
      }
    },
    closeMte (obj, bcStr) {
      this.isMteShow = false
      if (obj) {
        if (bcStr && bcStr === 'edit') {
          const index = this.mteObj.index || 0
          console.log(this.mteObj)
          const str = this.mteStr === 'textAdd' ? 'markerData' : 'polygons'
          let tempData = [...this[str]]
          if (this.mteStr === 'textAdd') {
            tempData[index].content = obj.text
            tempData[index].text = obj.text
            tempData[index].color = obj.color
          } else {
            tempData[index].text = obj.text
            tempData[index].fillColor = obj.fillColor
            tempData[index].fillOpacity = obj.fillOpacity
            tempData[index].strokeColor = obj.strokeColor
          }
          this[str] = [...tempData]
          this.$storage(`map_${str}`, JSON.stringify(tempData))
        } else {
          this[this.mteStr](obj)
          this.isDbShow = false
          this.$msgs('请在地图上操作')
        }
      }
      this.mteObj = {}
    },
    textAdd (obj) {
      const that = this
      const curMap = this.amapManager.getMap()
      let mouseTool = new AMap.MouseTool(curMap)
      mouseTool.marker({
        content: ' ',
      })
      AMap.event.addListener(mouseTool,'draw',function(e){
        let cPath = e.obj.getPosition()
        let markerData = [...that.markerData]
        markerData.push({
          position: [cPath.lng, cPath.lat],
          draggable: true,
          animation: 'AMAP_ANIMATION_DROP',
          content: obj.text,
          offset: [0, -10],
          text: obj.text,
          color: obj.color,
        })
        that.markerData = [...markerData]
        window.setTimeout(() => {
          mouseTool.close(true)
          that.isDbShow = true
        }, 100)
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  .amap-box {
    height: 100%;
  }
}
.scoped-deal-box {
  background: #f2f2f2;
  box-shadow: 0 0 5px #666;
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  height: 100%;
  width: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  &.t2 {
    opacity: 0.5;
  }
  .sdb-info {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px 10px 0;
    .p1 {
      font-size: 14px;
      user-select: none;
      padding-bottom: 10px;
      .more {
        color: #409eff;
        text-decoration: underline;
        padding-left: 2px;
        cursor: pointer;
      }
    }
    .p2 {
      padding-bottom: 6px;
    }
  }
  .sdb-add {
    padding: 0 10px 10px;
    .b {
      display: inline-block;
      vertical-align: middle;
      border-radius: 0;
      background: #0c78b1;
      color: #fff;
      min-width: 60px;
      height: 36px;
      line-height: 36px;
      cursor: pointer;
      outline: none;
      padding: 0 10px;
      margin-right: 10px;
      font-size: 14px;
      text-align: center;
      &:last-child {
        margin-right: 0;
      }
      &.t2 {
        background: #409eff;
      }
      &.t3 {
        width: 177px;
      }
    }
  }
  .sdb-list {
    background: #fff;
    margin-bottom: 10px;
    padding-top: 10px;
    .label {
      margin-left: 10px;
      border-left: 4px solid #409eff;
      padding-left: 6px;
      &.t2 {
        border-left-color: #0c78b1;
      }
    }
    .ul {
      height: 300px;
      overflow-y: auto;
    }
    .op {
      border-bottom: 1px solid #dcdcdc;
      padding: 10px;
      .p1 {
        color: #313131;
        font-weight: bold;
        padding-bottom: 6px;
      }
      .more {
        .d {
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
          padding: 0 6px;
          line-height: 20px;
          height: 20px;
          border: 1px solid #0c78b1;
          color: #0c78b1;
          border-radius: 6px;
          font-size: 12px;
          font-weight: bold;
          cursor: pointer;
          &.d2 {
            color: #409eff;
            border-color: #409eff;
          }
          &.d3 {
            color: #313131;
            border-color: #313131;
          }
          &.d4 {
            color: #f00;
            border-color: #f00;
          }
        }
      }
    }
  }
}

.scoped-marker-text {
  color: #fff;
  min-width: 100px;
  font-weight: bold;
}

.scoped-select-center {
  position: absolute;
  left: -75px;
  top: 0px;
  cursor: pointer;
  width: 60px;
  line-height: 14px;
  color: #313131;
  .s {
    color: #f00;
    font-size: 12px;
  }
}


</style>