t

src/api/other.js

@@ -163,4 +163,19 @@ export default {
   admnewscollect: params => { // 今日简报 - 新闻采集
     return getRequestNoSort('/adm/news/collect', params, 'loading')
   },
+  admmapcoordindetail: params => { // 地图 测试 详情
+    return getRequestNoSort('/adm/map/coordin/detail', params)
+  },
+  admmapcoordinlist: params => { // 地图 测试 列表
+    return getRequestNoSort('/adm/map/coordin/list', params)
+  },
+  admmapcoordinadd: params => { // 地图 测试 添加
+    return getRequestNoSort('/adm/map/coordin/add', params)
+  },
+  admmapcoordinedit: params => { // 地图 测试 编辑
+    return getRequestNoSort('/adm/map/coordin/edit', params)
+  },
+  admmapcoordindel: params => { // 地图 测试 删除
+    return getRequestNoSort('/adm/map/coordin/del', params)
+  },
 }

src/components/Common/BaseForm.vue

@@ -33,6 +33,21 @@
           >{{ op.key }}</el-option>
         </el-select>
       </el-form-item>
+      <el-form-item
+        v-else-if="item.type === 'colorPicker'"
+        :key="index"
+        :class="item.class"
+        :prop="item.key"
+        :label="isInline && noLabel ? '' : item.label"
+        :label-width="item.singleLabelWidth || labelWidth"
+        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
+      >
+        <el-color-picker
+          @change="changeHandle"
+          @focus="focusHandle(item.key)"
+          v-model.trim="baseForm[item.key]">
+        </el-color-picker>
+      </el-form-item>
       <el-form-item
         v-else-if="item.type === 'selectRemote'"
         :key="index"

src/main.js

@@ -48,7 +48,7 @@ import VueAMap from 'vue-amap' // 高德
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: '8343df94cab859af3bd36362029a4e19',
-  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
+  plugin: ['AMap.MouseTool', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.TileLayer'],
   v: '1.4.15',
   uiVersion: '1.0' })
 

src/router/index.js

@@ -294,6 +294,11 @@ export const constantRoutes = [
     component: () => import('@/views/404'),
     hidden: true
   },
+  {
+    path: '/map/dtl',
+    component: () => import('@/views/map/dtl'),
+    hidden: true
+  },
   {
     path: '/',
     component: Layout,

src/views/map/components/popup/MapTextEdit.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :visible.sync="isShow"
+      :title="mteStr === 'polygonAdd' ? '多边形操作' : '文字操作'"
+      :fullscreen="false"
+      width="400px"
+      custom-class="xl-dialog"
+      center
+    >
+      <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="110px">
+      </base-form>
+      <div class="xl-form">
+        <div class="xl-form-footer">
+          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
+          <el-button v-if="curObj.obj" class="xl-form-btn t1" @click="close('confirm')">保存</el-button>
+          <el-button v-else class="xl-form-btn t3" @click="close('confirm')">去画图</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { arrToObj } from '@/utils'
+export default {
+  components: { },
+  mixins,
+  props: {
+    isShow: Boolean,
+    curObj: Object,
+    mteStr: String,
+  },
+  data() {
+    return {
+      loading: false,
+      formData: [],
+      fillColor: '#DC3021',
+      strokeColor: '#DC3021',
+    }
+  },
+  watch: {
+    isShow: function(val) {
+      if (val) {
+        this.getDef()
+      }
+    },
+  },
+  methods: {
+    getDef (str) {
+      let params = { ...this.curObj.obj }
+      if (!params.text) params.text = '标题示例'
+      if (this.mteStr === 'polygonAdd') {
+        if (!params.fillColor) {
+          params.fillColor = this.fillColor
+          params.fillOpacity = '0.3'
+          params.strokeColor = this.strokeColor
+        }
+        this.formData = [
+          { label: '标题', key: 'text', rules: 1},
+          { label: '填充色', key: 'fillColor', type: 'colorPicker', rules: 1},
+          { label: '透明度', key: 'fillOpacity', rules: 1},
+          { label: '轮廓色', key: 'strokeColor', type: 'colorPicker', rules: 1},
+        ]
+      } else {
+        if (!params.color) {
+          params.color = '#fff'
+        }
+        this.formData = [
+          { label: '文字内容', key: 'text', rules: 1},
+          { label: '文字颜色', key: 'color', type: 'colorPicker', rules: 1},
+        ]
+      }
+      this.setDefaultValue(params)
+    },
+    close (str) {
+      if (str === 'confirm') {
+        this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
+          if (valid) {
+            const oldform = this.$refs.ruleForm.baseForm
+            const newForm = { ...oldform }
+            if (this.curObj.obj) {
+              this.$emit('close', newForm, 'edit')
+            } else {
+              this.$emit('close', newForm)
+            }
+            this.setDefaultValue()
+          }
+        })
+      } else {
+        this.$emit('close')
+        this.setDefaultValue()
+      }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../../styles/libEdit.scss';
+.lib-edit {
+  padding-top: 0;
+  ::v-deep .el-date-editor.el-input {
+    width: 100%;
+  }
+  ::v-deep .el-textarea__inner {
+    height: 300px;
+  }
+}
+</style>

src/views/map/components/popup/listEdit.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :visible.sync="isShow"
+      :title="curObj.id ? '编辑地图工具' : '新增地图工具'"
+      :fullscreen="false"
+      width="700px"
+      custom-class="xl-dialog"
+      center
+    >
+      <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="110px">
+      </base-form>
+      <div class="xl-form">
+        <div class="xl-form-footer">
+          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
+          <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { arrToObj } from '@/utils'
+export default {
+  components: { },
+  mixins,
+  props: {
+    isShow: Boolean,
+    curObj: Object
+  },
+  inject: ['parentData'],
+  data() {
+    return {
+      loading: false,
+      formData: [],
+    }
+  },
+  watch: {
+    isShow: function(val) {
+      if (val) {
+        this.getDef()
+      }
+    },
+  },
+  methods: {
+    getDef (str) {
+      let params = { ...this.curObj }
+      this.formData = [
+        { label: '标题', key: 'title', rules: 1}, 
+      ]
+      this.setDefaultValue(params)
+    },
+    close (str) {
+      if (str === 'confirm') {
+        this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
+          if (valid) {
+            const oldform = this.$refs.ruleForm.baseForm
+            const newForm = { ...oldform }
+            if (this.curObj.id) newForm.uuid = this.curObj.id
+            let apiStr = 'admmapcoordinadd'
+            if (this.curObj.id) apiStr = 'admmapcoordinedit'
+            this.$api.other[apiStr](newForm).then(data => {
+              this.$msgs(newForm.estate_id ? '编辑成功' : '新增成功')
+              this.$emit('close', newForm)
+            })
+          }
+        })
+      } else {
+        this.$emit('close')
+        this.setDefaultValue()
+      }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../../styles/libEdit.scss';
+.lib-edit {
+  padding-top: 0;
+  ::v-deep .el-date-editor.el-input {
+    width: 100%;
+  }
+  ::v-deep .el-textarea__inner {
+    height: 300px;
+  }
+}
+</style>

src/views/map/components/searchForm/List.vue

@@ -0,0 +1,45 @@
+<template>
+  <base-form slot="content" ref="ruleForm" :data="searchData">
+    <div slot="footer">
+      <el-button :loading="listLoading" icon="el-icon-search" class="xl-form-btn bgc1" @click="searchHandle">查询</el-button>
+    </div>
+  </base-form>
+</template>
+<script>
+export default {
+  props: {
+    listLoading: Boolean
+  },
+  inject: ['parentData'],
+  mixins,
+  data() {
+    return {
+      searchData: [],
+      isHidePut: false,
+    }
+  },
+  computed: {
+    name () {
+      return this.parentData.$route.query.name || ''
+    }
+  },
+  mounted () {
+    this.getDef()
+  },
+  methods: {
+    getDef (str) {
+      let params = { ...this.$refs.ruleForm.baseForm }
+      this.searchData = [
+        { label: 'ID', key: 'uuid' },
+        { label: '标题', key: 'title' },
+      ]
+      this.setDefaultValue(params, 'searchData')
+    },
+    searchHandle() {
+      const oldform = this.$refs.ruleForm.baseForm
+      const newForm = { ...oldform }
+      this.$emit('change', newForm)
+    }
+  }
+}
+</script>

src/views/map/dtl.vue

@@ -0,0 +1,587 @@
+<template>
+  <div class="app-container">
+    <div class="scoped-deal-box">
+      <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">文字列表</div>
+        <div class="ul">
+          <div class="op" v-for="(t, index) in markerData" :key="index">
+            <p class="p1" @click="openMte('textAdd', {obj: t, index})">{{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 {
+      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
+        // },
+      },
+      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)
+      }, 100)
+    },
+    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,
+          }
+        }
+        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: ' ',
+      })
+      window.setTimeout(() => {
+        mouseTool.close(true)
+      }, 1000)
+      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('中心坐标选取成功~')
+      })
+    },
+    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.$router.go(0)
+        })
+      })
+    },
+    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: 1, // 轮廓宽度
+          strokeOpacity: 0.6, // 轮廓透明度
+          text: obj.text,
+        })
+        that.polygons = [...polygons]
+        mouseTool.close(true)
+      })
+    },
+    mapIsEdit (index, str) {
+      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
+      this.mteObj = {}
+      if (obj) {
+        if (bcStr && bcStr === 'edit') {
+          const index = this.mteObj.index || 0
+          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)
+        }
+      }
+    },
+    textAdd (obj) {
+      const that = this
+      const curMap = this.amapManager.getMap()
+      let mouseTool = new AMap.MouseTool(curMap)
+      mouseTool.marker({
+        content: ' ',
+      })
+      window.setTimeout(() => {
+        mouseTool.close(true)
+      }, 1000)
+      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]
+      })
+    },
+  }
+}
+</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 #ccc;
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 220px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .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>

src/views/map/list.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <search-form
+      :list-loading="listLoading"
+      @change="searchHandle"
+    />
+    <table-list
+      :list-loading="listLoading"
+      :data="tableData2"
+      :columns="listConfig"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :total-records="totalRecords"
+      @currentChange="pageHandle"
+      :isAdd="true"
+      @add="openPopup"
+    />
+    <popup-edit
+      :isShow="isDtlShow"
+      :curObj="curObj"
+      @close="closePopup"
+    />
+  </div>
+</template>
+<script>
+import { arrToObj } from '@/utils'
+import SearchForm from './components/searchForm/List'
+import PopupEdit from './components/popup/listEdit'
+import baseTable from '_m/baseTable.js'
+export default {
+  name: 'list',
+  components: {
+    SearchForm,
+    PopupEdit,
+  },
+  provide() {
+    return {
+      parentData: this
+    }
+  },
+  mixins: [baseTable],
+  data() {
+    return {
+      apiStr: 'other.admmapcoordinlist',
+      searchForm: {},
+      isDtlShow: false,
+      curObj: {},
+    }
+  },
+  computed: {
+    tableData2() {
+      const arr = [...this.tableData]
+      arr.map(item => {})
+      return arr
+    }
+  },
+  created() {},
+  mounted() {
+    this.listConfig = {
+      rows: [
+        { label: 'ID', prop: 'uuid'},
+        { label: '标题', prop: 'title'},
+        { label: '更新人', prop: 'update_by' },
+        { label: '更新时间', prop: 'update_at' },
+        { label: '操作', width: 120, type: 'handle2', operations:
+          [
+            { label: '详情', func: this.linkDtl, btnType: 'primary' },
+            { label: '删除', func: this.delHandle, btnType: 'danger' },
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    delHandle(row) {
+      this.$msg(`您确定要删除该楼盘吗？`, 'confirm', () => {
+        this.$api.other.admmapcoordindel({
+          id: row.id,
+        }).then(() => {
+          this.$msgs(`已删除！`)
+          this.fetchData()
+        })
+      }, null, true)
+    },
+    linkDtl(row) {
+      this.$router.push(`/map/dtl?id=${row.uuid}`)
+    },
+    openPopup(row) {
+      if (row && row.id) {
+        this.curObj = row
+      } else {
+        this.curObj = {}
+      }
+      this.isDtlShow = true
+    },
+    closePopup(obj) {
+      this.isDtlShow = false
+      if (obj) {
+        this.fetchData()
+      }
+    },
+  }
+}
+</script>