从vue2-leaflet-draw-toolbar提取坐标

如何解决从vue2-leaflet-draw-toolbar提取坐标

我正在使用vue2-leaflet-draw-toolbar插件在地图上绘制形状，有人知道如何获取绘制形状的坐标吗？我正在尝试使用这些数据在标记离开这些区域时触发事件。

解决方法

您可以在vue2leaflet中使用原始的传单图。

文档：https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html

安装

npm i leaflet-draw

进口：

import L from 'leaflet';
/* eslint-disable no-unused-vars */
import LDraw from 'leaflet-draw';
/* eslint-enable no-unused-vars */
// Import leaflet draw css and icons for draw toolbar
import 'leaflet-draw/dist/leaflet.draw.css';

内嵌式添加：

// Leaflet Map Object
this.$nextTick(() => {
  this.map = this.$refs.map.mapObject;

  // Tell leaflet that the map is exactly as big as the image
  this.map.setMaxBounds(this.bounds);

  // The view model from Vue Data used in JS
  // This works,since wm refers to your view model.
  let vm = this;

  // Leaflet Draw
  // Add new FeatureGroup from leaflet for Draw objects on map
  const featureGroup = new window.L.FeatureGroup().addTo(map);

   // Create leaflet draw control menu
      const drawControl = new window.L.Control.Draw({
        position: 'topright',draw: {
          polyline: {
            allowIntersection: true,// Restricts shapes to simple polygons
            drawError: {
              color: 'orange',timeout: 2000,message: '<strong>Nicht erlauben<strong>',},showArea: true,metric: true,//m2
            repeatMode: false,zIndexOffset: -10000,shapeOptions: {
              polylineID: true,customArrow: false,color: '#000000',weight: 5,lineCap: 'round',lineJoin: 'bevel',dashArray: '',opacity: 1,polygon: {
            allowIntersection: false,shapeOptions: {
              polylineID: false,fillColor: '#2196F3',fillOpacity: 0.7,rectangle: {
            allowIntersection: false,circle: {
            allowIntersection: false,//m2
            showRadius: true,repeatMode: false,marker: false,circlemarker: false,edit: {
          featureGroup: featureGroup,remove: true,edit: {
            // Set color and fill for edited element
            selectedPathOptions: {
              color: '#000',fillColor: '#000',})
      // Add all draw shapes on the map
      map.addControl(drawControl);
 }