platformProject/src/views/mapAnalysis/index.vue

<template>
  <div class="mapCom">
    <div class="mapMain">
      <div id="map"></div>
    </div>
    <div class="mapDetail">
      <span class="title">数据详情</span>
      <div class="detailMsg" v-for="(it, index) in drawLayers" :key="index">
        <div class="detailMsgTop">
          <span style="margin-right: 10px">绘制图形：{{ layerTypeFn(it.layerType) }}</span>
          <span>绘制ID：{{ it.layer._leaflet_id }}</span>
        </div>
        <!-- 标记和圆形标记 -->
        <div
          class="detailMsgBot"
          v-if="it.layerType === 'marker' || it.layerType === 'circlemarker'"
        >
          <span style="margin-right: 10px">精度：{{ it.layer._latlng.lat }}</span>
          <span>纬度：{{ it.layer._latlng.lng }}</span>
        </div>
        <!-- 圆形区域 -->
        <div class="detailMsgBot" v-if="it.layerType === 'circle'">
          <span>半径：{{ it.layer._mRadius }}m</span>
          <span style="margin-right: 10px">精度：{{ it.layer._latlng.lat }}</span>
          <span>纬度：{{ it.layer._latlng.lng }}</span>
        </div>
        <!-- 线段 -->
        <div class="detailMsgBot" v-if="it.layerType === 'polyline'">
          <div v-for="(iv, idx) in it.layer._latlngs" :key="idx" style="margin: 5px 0">
            <span style="margin-right: 10px">精度：{{ iv.lat }}</span>
            <span>纬度：{{ iv.lng }}</span>
          </div>
        </div>
        <!-- 多边形区域 -->
        <div class="detailMsgBot" v-if="it.layerType === 'polygon'">
          <div v-for="(iv, idx) in it.layer._latlngs[0]" :key="idx" style="margin: 5px 0">
            <span style="margin-right: 10px">精度：{{ iv.lat }}</span>
            <span>纬度：{{ iv.lng }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, nextTick, onMounted, reactive, watch } from 'vue'
import { CanvasLabel } from '@panzhiyue/leaflet-canvaslabel'
import img from '@/assets/mapdarw/images/marker-icon.png'

const map = ref(null)
const drawLayerGroup = ref(null)
const drawLayers = ref([])
const tilsUrl = ref('./static/kMapTiles/{z}/{x}/{y}.jpg')

const initMap = () => {
  var map = L.map('map', {
    center: [39.918758195008294, 116.3972282409668], // 地图中心--北京
    zoom: 16, //缩放比列
    // drawControl: true
    zoomControl: false, //禁用 + - 按钮
    // doubleClickZoom: true, // 禁用双击放大
    attributionControl: false // 移除右下角leaflet标识
    // preferCanvas: true
  })
  let name = L.tileLayer(
    'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
  ).addTo(map)

  drawLayerGroup.value = new L.FeatureGroup()
  map.addLayer(drawLayerGroup.value)

  var MyCustomMarker = L.Icon.extend({
    options: {
      shadowUrl: null,
      iconAnchor: new L.Point(12, 12),
      iconSize: new L.Point(24, 36),
      iconUrl: img
    }
  })

  var options = {
    position: 'topleft',
    draw: {
      polyline: {
        shapeOptions: {
          color: '#f357a1',
          weight: 5
        }
      },
      polygon: {
        allowIntersection: false, // Restricts shapes to simple polygons
        drawError: {
          color: '#e1e100', // Color the shape will turn when intersects
          message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
        },
        shapeOptions: {
          color: '#bada55'
        }
      },
      rectangle: false,
      marker: {
        icon: new MyCustomMarker()
      }
    },
    edit: {
      featureGroup: drawLayerGroup.value, //REQUIRED!!
      remove: true
    }
  }

  initDrawTooltip()
  var drawControl = new L.Control.Draw(options)
  map.addControl(drawControl)

  map.on(L.Draw.Event.CREATED, function (e) {
    let type = e.layerType,
      layer = e.layer

    console.log('created====>>>', e)

    if (type === 'marker') {
      layer.bindPopup('A popup!')
    }

    drawLayerGroup.value.addLayer(layer)
    drawLayers.value.push(e)
  })

  map.on(L.Draw.Event.EDITED, function (e) {
    let type = e.layerType,
      layer = e.layer

    console.log('editmove====>>>', e)
  })

  map.on(L.Draw.Event.DELETED, function (e) {
    console.log('deleted====>>>', e)
    for (let i in e.layers._layers) {
      drawLayers.value.forEach((it, index) => {
        if (it.layer._leaflet_id.toString() === i) {
          drawLayers.value.splice(index, 1)
        }
      })
    }
  })
}
const initDrawTooltip = () => {
  L.drawLocal.draw.handlers.polygon = {
    tooltip: {
      start: '点击地图开始绘制多边形',
      cont: '继续选择',
      end: '点击第一个顶点完成绘制'
    }
  }
  L.drawLocal.draw.toolbar.buttons.polyline = '绘制-线'
  L.drawLocal.draw.toolbar.buttons.polygon = '绘制-多边形区域'
  L.drawLocal.draw.toolbar.buttons.circle = '绘制-圆形区域'
  L.drawLocal.draw.toolbar.buttons.marker = '绘制-定点标记'
  L.drawLocal.draw.toolbar.buttons.circlemarker = '绘制-定点圆形标记'
  L.drawLocal.edit.toolbar.actions.save.text = '保存'
  L.drawLocal.edit.toolbar.actions.save.title = '保存'
  L.drawLocal.edit.toolbar.actions.cancel.text = '取消'
  L.drawLocal.edit.toolbar.actions.cancel.title = '取消'
  L.drawLocal.edit.toolbar.actions.clearAll.text = '清除全部'
  L.drawLocal.edit.toolbar.actions.clearAll.title = '清除全部'
  L.drawLocal.edit.toolbar.buttons.editDisabled = '暂无区域可编辑'
  L.drawLocal.edit.toolbar.buttons.removeDisabled = '暂无区域可删除'
  L.drawLocal.edit.handlers.remove.tooltip.text = '选中一个区域去清除'
  L.drawLocal.edit.toolbar.buttons.edit = '编辑'
  L.drawLocal.edit.toolbar.buttons.remove = '删除'
  L.drawLocal.edit.toolbar.buttons.cancel = '取消'
  L.drawLocal.edit.toolbar.buttons.save = '保存'
  L.drawLocal.draw.toolbar.actions.text = '取消'
  L.drawLocal.draw.toolbar.actions.title = '取消绘制'
  L.drawLocal.draw.toolbar.finish.text = '完成'
  L.drawLocal.draw.toolbar.finish.title = '完成绘制'
  L.drawLocal.draw.toolbar.undo.text = '撤销'
  L.drawLocal.draw.toolbar.undo.title = '撤销'
  L.drawLocal.edit.handlers.edit.tooltip.subtext = '点击取消以撤消更改'
  L.drawLocal.edit.handlers.edit.tooltip.text = '拖动标记以编辑图形'
}
const layerTypeFn = (type) => {
  let name = ''
  if (type === 'marker') {
    name = '标记'
  } else if (type === 'circlemarker') {
    name = '圆形标记'
  } else if (type === 'polyline') {
    name = '线段'
  } else if (type === 'polygon') {
    name = '多边形区域'
  } else if (type === 'circle') {
    name = '圆形区域'
  }
  return name
}
const getData = (map) => {
  var latlngs = [
    [40.912569, 111.840153],
    [39.094994, 106.742496],
    [33.503718, 103.05109]
  ]
  L.polyline(latlngs, { color: 'red' }).addTo(map)
}

onMounted(() => {
  initMap()
})
</script>
<style scoped lang="sass">
.mapCom
  display: flex
  height: 85vh

  .iconLabel
    width: 80px !important

  .iconSty
    &Class
      width: 50px
      height: 100px
      position: relative
      top: 40px

.mapMain
  width: 80vw
  height: 100%
.mapDetail
  padding: 5px 10px
  width: calc(20vw - 20px)
  height: calc(100% - 10px)
  background: #fff
  overflow-y: auto
  .title
    font-size: 15px
    font-weight: bold
  .detailMsg
    margin: 10px 0
    border-bottom: 1px solid #000
    .detailMsgTop
      span
        font-size: 14px
        font-weight: bold
        opacity: 0.7
    .detailMsgBot
      margin-bottom: 10px
      span
        display: inline-block
        font-size: 14px
        font-weight: bold
        opacity: 0.7

#map
  width: 100%
  height: 100%
</style>