polymer - Vaadin 14 聚合物元素 this.dispatchEvent 不是函数

Question

我正在尝试在传单和传单绘制之上编写一个聚合物包装器。我已经设法创建了地图和绘图工具栏，但是我无法使用 dispatchEvent 方法将事件发送到服务器，因为我正在获取Uncaught TypeError: this.dispatchEvent is not a function. 我的课看起来像这样：

import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
import { ThemableMixin } from "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js";
import * as L from "leaflet/dist/leaflet-src.js";
import * as LDraw from "leaflet-draw/dist/leaflet.draw-src.js";
import { LeafletTypeConverter } from "./leaflet-type-converter.js";

class LeafletMap extends ThemableMixin(PolymerElement) {
  static get template() {
    return html`
      <div
        id="map"
        style="position: relative; width: 100%; height: 100%;"
      ></div>
    `;
  }

  static get is() {
    return "leaflet-map";
  }

ready() {
    super.ready();
    console.info("LeafletMap - ready() leaflet map is ready.");
    console.log("LeafletMap - ready() mapOptions: {}", this.mapOptions);

    this.leafletConverter = new LeafletTypeConverter();
    console.log("LeafletMap - ready() using converter", this.leafletConverter);

    // init leaflet map
    let map = this.toLeafletMap(this.mapOptions);
    console.log('going to add draw items');
    
    try {
        var drawnItems = new L.FeatureGroup();
         map.addLayer(drawnItems);
         var drawControl = new L.Control.Draw({
             edit: {
                 featureGroup: drawnItems
             }
         });
        map.addControl(drawControl);
        drawnItems.addTo(map);
    } catch (e) {
        console.log(e);
    }
    
    map.on(L.Draw.Event.CREATED, function (e) {
        console.log('ON MAP CREATED, draw element');
        console.log(e);
         var type = e.layerType,
             layer = e.layer;
     
         if (type === 'marker') {
             // Do marker specific actions
         }
        
        this.dispatchEvent(new CustomEvent('draw-end', {detail: {type: type}}));
        map.addLayer(layer);
     });

    this.map = map;
  }

我希望当在地图上绘制一个元素时，dispatchEvent 方法会在服务器上向我发回有关它的信息，因为 map.on() 回调上的前 2 个 console.logs 正在正确显示。

我在这里几乎是在黑暗中工作，因为我对使用聚合物元件的经验很少，所以欢迎任何帮助。

标签： polymervaadin-flowvaadin14