增加地图功能

src/views/mapAnalysis/index.vue

@@ -1,118 +1,204 @@
 <template>
   <div class="mapCom">
-    <div id="map"></div>
+    <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>
+<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'
 
-// import '@/assets/mapdarw/Leaflet.draw'
-// import '@/assets/mapdarw/leaflet.draw.css'
-// import '@/assets/mapdarw/leaflet.pin.css'
-// import '@/assets/mapdarw/leaflet.pin.js'
-
-export default {
-  data() {
-    return {
-      map: null,
-      img: img,
-      DefaultIcon1: null,
-      layerGroup: [],
-      layers: [],
-      rightObj: {},
-      areaLayer: null,
-      tilsUrl: './static/kMapTiles/{z}/{x}/{y}.jpg',
-      ciLayer: null
+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
     }
-  },
-  mounted() {
-    this.initMap()
-  },
-  methods: {
-    initMap() {
-      let map = L.map('map', {
-        center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
-        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)
-
-      var editableLayers = new L.FeatureGroup()
-      map.addLayer(editableLayers)
-
-      var MyCustomMarker = L.Icon.extend({
-        options: {
-          shadowUrl: null,
-          iconAnchor: new L.Point(12, 12),
-          iconSize: new L.Point(24, 36),
-          iconUrl: this.img
+  })
+
+  var options = {
+    position: 'topleft',
+    draw: {
+      polyline: {
+        shapeOptions: {
+          color: '#f357a1',
+          weight: 5
         }
-      })
-
-      var options = {
-        position: 'topright',
-        draw: {
-          polyline: {
-            shapeOptions: {
-              color: '#f357a1',
-              weight: 10
-            }
-          },
-          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'
-            }
-          },
-          // circle: false, // Turns off this drawing tool
-          rectangle: false,
-          // rectangle: {
-          //   shapeOptions: {
-          //     clickable: false
-          //   }
-          // },
-          marker: {
-            icon: new MyCustomMarker()
-          }
+      },
+      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
         },
-        edit: {
-          featureGroup: editableLayers, //REQUIRED!!
-          remove: true
+        shapeOptions: {
+          color: '#bada55'
         }
+      },
+      rectangle: false,
+      marker: {
+        icon: new MyCustomMarker()
       }
+    },
+    edit: {
+      featureGroup: drawLayerGroup.value, //REQUIRED!!
+      remove: true
+    }
+  }
 
-      var drawControl = new L.Control.Draw(options)
-      map.addControl(drawControl)
+  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
+  map.on(L.Draw.Event.CREATED, function (e) {
+    let type = e.layerType,
+      layer = e.layer
 
-        console.log('e====>>>', e)
+    console.log('created====>>>', e)
 
-        if (type === 'marker') {
-          layer.bindPopup('A popup!')
-        }
+    if (type === 'marker') {
+      layer.bindPopup('A popup!')
+    }
 
-        editableLayers.addLayer(layer)
-      })
+    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)
+  })
+}
+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
@@ -125,36 +211,35 @@ export default {
       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: 16px
+    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%
-
-.lmap-image
-  width: 32px
-  height: 32px
-
-.lmap-span
-  display: inline-block
-  margin-left: 5px
-  padding: 5px
-  font-weight: bold
-  line-height: 20px
-  font-size: 14px
-  color: #fff
-  white-space: nowrap
-
-.lmap-text
-  display: inline-block
-  margin-left: 5px
-  padding: 5px
-  font-weight: bold
-  line-height: 20px
-  font-size: 16px
-  color: #fff
-  width: 500px
-  white-space: nowrap
-  position: absolute
-  text-align: center
-  top: 25px
-  left: -250px
 </style>

src/views/mapAnalysis/mapjs.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="mapCom">
+    <div id="map"></div>
+  </div>
+</template>
+<script>
+import { CanvasLabel } from '@panzhiyue/leaflet-canvaslabel'
+import img from '@/assets/mapdarw/images/marker-icon.png'
+
+// import '@/assets/mapdarw/Leaflet.draw'
+// import '@/assets/mapdarw/leaflet.draw.css'
+// import '@/assets/mapdarw/leaflet.pin.css'
+// import '@/assets/mapdarw/leaflet.pin.js'
+
+export default {
+  data() {
+    return {
+      map: null,
+      img: img,
+      layers: [],
+      tilsUrl: './static/kMapTiles/{z}/{x}/{y}.jpg'
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      let map = L.map('map', {
+        center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
+        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)
+
+      var editableLayers = new L.FeatureGroup()
+      map.addLayer(editableLayers)
+
+      var MyCustomMarker = L.Icon.extend({
+        options: {
+          shadowUrl: null,
+          iconAnchor: new L.Point(12, 12),
+          iconSize: new L.Point(24, 36),
+          iconUrl: this.img
+        }
+      })
+
+      var options = {
+        position: 'topleft',
+        draw: {
+          polyline: {
+            shapeOptions: {
+              color: '#f357a1',
+              weight: 10
+            }
+          },
+          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'
+            }
+          },
+          // circle: false, // Turns off this drawing tool
+          rectangle: false,
+          // rectangle: {
+          //   shapeOptions: {
+          //     clickable: false
+          //   }
+          // },
+          marker: {
+            icon: new MyCustomMarker()
+          }
+        },
+        edit: {
+          featureGroup: editableLayers, //REQUIRED!!
+          remove: true
+        }
+      }
+
+      this.initDrawTooltip()
+
+      var drawControl = new L.Control.Draw(options)
+      map.addControl(drawControl)
+
+      // CREATED
+      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!')
+        }
+
+        editableLayers.addLayer(layer)
+      })
+      map.on(L.Draw.Event.DRAESTOP, function (e) {
+        console.log('DRAESTOP======>>>>', e)
+      })
+    },
+    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 = '拖动标记以编辑图形'
+    }
+  }
+}
+</script>
+<style scoped lang="sass">
+.mapCom
+  height: 85vh
+
+  .iconLabel
+    width: 80px !important
+
+  .iconSty
+    &Class
+      width: 50px
+      height: 100px
+      position: relative
+      top: 40px
+
+#map
+  width: 100%
+  height: 100%
+
+.lmap-image
+  width: 32px
+  height: 32px
+
+.lmap-span
+  display: inline-block
+  margin-left: 5px
+  padding: 5px
+  font-weight: bold
+  line-height: 20px
+  font-size: 14px
+  color: #fff
+  white-space: nowrap
+
+.lmap-text
+  display: inline-block
+  margin-left: 5px
+  padding: 5px
+  font-weight: bold
+  line-height: 20px
+  font-size: 16px
+  color: #fff
+  width: 500px
+  white-space: nowrap
+  position: absolute
+  text-align: center
+  top: 25px
+  left: -250px
+</style>

src/views/mapAnalysis/mapts.vue

@@ -0,0 +1,220 @@
+<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">绘制图形：{{ it.name }}</span>
+          <span>绘制ID：{{ it.id }}</span>
+        </div>
+        <div class="detailMsgBot">
+          <span style="margin-right: 10px">精度：{{ it.lat }}</span>
+          <span>纬度：{{ it.lng }}</span>
+        </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'
+// import L from 'leaflet'
+// import 'leaflet/dist/leaflet.css'
+
+const map = ref(null)
+const drawLayerGroup = ref(null)
+const drawLayers = ref([])
+const tilsUrl = ref('./static/kMapTiles/{z}/{x}/{y}.jpg')
+
+const initMap = () => {
+  map.value = 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.value)
+
+  drawLayerGroup.value = new L.FeatureGroup()
+  map.value.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'
+        }
+      },
+      // circle: false, // Turns off this drawing tool
+      rectangle: false,
+      // rectangle: {
+      //   shapeOptions: {
+      //     clickable: false
+      //   }
+      // },
+      marker: {
+        icon: new MyCustomMarker()
+      }
+    },
+    edit: {
+      featureGroup: drawLayerGroup.value, //REQUIRED!!
+      remove: true
+    }
+  }
+
+  initDrawTooltip()
+  var drawControl = new L.Control.Draw(options)
+  map.value.addControl(drawControl)
+
+  map.value.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)
+    // getDrawArr(e)
+  })
+
+  map.value.on(L.Draw.Event.EDITED, function (e) {
+    let type = e.layerType,
+      layer = e.layer
+
+    console.log('editmove====>>>', e)
+  })
+}
+const getDrawArr = (value) => {
+  if (value) {
+    let obj = {
+      id: value._leaflet_id,
+      name: value.layerType,
+      lat: value.layer._latlng.lat,
+      lng: value.layer._latlng.lng
+    }
+    drawLayers.value.push(obj)
+  }
+}
+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 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
+  .title
+    font-size: 16px
+    font-weight: bold
+  .detailMsg
+    margin: 10px 0
+    .detailMsgTop
+      span
+        font-size: 14px
+        font-weight: bold
+    .detailMsgBot
+      span
+        display: inline-block
+        font-size: 14px
+        font-weight: bold
+
+#map
+  width: 100%
+  height: 100%
+</style>