增加地图页面

package.json

@@ -29,6 +29,7 @@
     "@form-create/designer": "^3.1.3",
     "@form-create/element-ui": "^3.1.24",
     "@iconify/iconify": "^3.1.1",
+    "@panzhiyue/leaflet-canvaslabel": "^1.2.0",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
@@ -50,6 +51,8 @@
     "fast-xml-parser": "^4.3.2",
     "highlight.js": "^11.9.0",
     "jsencrypt": "^3.3.2",
+    "leaflet": "^1.9.4",
+    "leaflet-draw": "^1.0.4",
     "lodash-es": "^4.17.21",
     "min-dash": "^4.1.1",
     "mitt": "^3.0.1",

src/main.ts

@@ -40,6 +40,12 @@ import './permission'
 import '@/plugins/tongji' // 百度统计
 import Logger from '@/utils/Logger'
 
+import L from "leaflet"
+import "leaflet/dist/leaflet.css"
+import "leaflet-draw";
+import "leaflet-draw/dist/leaflet.draw.css";
+
+
 import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
 
 // 创建实例
@@ -50,6 +56,7 @@ const setupAll = async () => {
 
   setupStore(app)
 
+
   setupGlobCom(app)
 
   setupElementPlus(app)
@@ -63,6 +70,7 @@ const setupAll = async () => {
   await router.isReady()
 
   app.use(VueDOMPurifyHTML)
+  app.use(L)
 
   app.mount('#app')
 }

src/router/modules/remaining.ts

@@ -430,6 +430,12 @@ const remainingRouter: AppRouteRecordRaw[] = [
       }
     ]
   },
+  // {
+  //   path: '/mapAnalysis',
+  //   component: () => import('@/views/member/user/detail/index.vue'),
+  //   name: 'mapAnalysis',
+  //   meta: { hidden: true },
+  // },
   {
     path: '/pay',
     component: Layout,

src/views/mapAnalysis/index.vue

@@ -0,0 +1,160 @@
+<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,
+      DefaultIcon1: null,
+      layerGroup: [],
+      layers: [],
+      rightObj: {},
+      areaLayer: null,
+      tilsUrl: './static/kMapTiles/{z}/{x}/{y}.jpg',
+      ciLayer: null
+    }
+  },
+  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: '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()
+          }
+        },
+        edit: {
+          featureGroup: editableLayers, //REQUIRED!!
+          remove: true
+        }
+      }
+
+      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('e====>>>', e)
+
+        if (type === 'marker') {
+          layer.bindPopup('A popup!')
+        }
+
+        editableLayers.addLayer(layer)
+      })
+    }
+  }
+}
+</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>