vue.js - 从 vue2-leaflet-draw-toolbar 中提取坐标

Question

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

Answer 1

您可以将原始的传单绘制与 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, // Restricts shapes to simple polygons
            drawError: {
              color: 'orange',
              timeout: 2000,
              message: '<strong>Nicht erlauben<strong>',
            },
            showArea: true,
            metric: true, //m2
            repeatMode: false,
            shapeOptions: {
              polylineID: false,
              color: '#000000',
              fillColor: '#2196F3',
              weight: 5,
              fillOpacity: 0.7,
              lineCap: 'round',
              lineJoin: 'bevel',
              dashArray: '',
              opacity: 1,
            },
          },
          rectangle: {
            allowIntersection: false, // Restricts shapes to simple polygons
            drawError: {
              color: 'orange',
              timeout: 2000,
              message: '<strong>Nicht erlauben<strong>',
            },
            showArea: true,
            metric: true, //m2
            repeatMode: false,
            shapeOptions: {
              polylineID: false,
              color: '#000000',
              fillColor: '#2196F3',
              weight: 5,
              fillOpacity: 0.7,
              lineCap: 'round',
              lineJoin: 'bevel',
              dashArray: '',
              opacity: 1,
            },
          },
          circle: {
            allowIntersection: false,
            showArea: true,
            metric: true, //m2
            showRadius: true,
            repeatMode: false,
            shapeOptions: {
              polylineID: false,
              color: '#000000',
              fillColor: '#2196F3',
              weight: 5,
              fillOpacity: 0.7,
              lineCap: 'round',
              lineJoin: 'bevel',
              dashArray: '',
              opacity: 1,
            },
          },
          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);
 }