javascript - 作为 Vue 组件的 Leaflet 对象

Question

TL;DR:我想动态创建对象(目前只是多边形)并将其添加到 Leaflet使用 Leaflet API 映射，但使它们具有反应性，让 Vue处理它们并控制它们的一些属性。

我正在尝试解决一个看似非常简单的问题，但我认为我的大脑无法正常工作，因为我想不出正确的方法。

使用 Leaflet，我可以调用 L.polygon(args).addTo(map)，它返回一个多边形对象并将路径元素插入到 DOM 中。然而，这些多边形将由用户创建、修改和删除，并且有些东西应该是 react 性的(路径、样式、选择状态等)，这让我想使用 Vue 来简化事情。

我可以看到如何通过使用 Leaflet API 或 Vue 来实现这一点，但不能同时使用两者。如果我只使用 Leaflet，则没有反应性。 (我需要外部 UI 来响应多边形的变化，反之亦然。)如果我只使用 Vue，我必须手动实现 Leaflet 已经处理的功能(例如缩放时调整多边形的大小)。我该如何利用两者？

Answer 1

这绝不是完整的解决方案，但对于评论来说太重要了，所以我想我应该把它扔在这里。没有使用过 Vue，但在 Angular 中，如果你需要在 Angular 已经运行后将某些东西变成指令，你需要编译它。我查看了 Vue API，他们提供了类似的东西，叫做 mount。它将动态添加到 DOM 的元素变成组件:

var polygon = new L.Polygon([...]).addTo(map);

Vue.component('polygon', {
    ready: function () {
        console.log(this.$el);
    }
});

var PolygonComponent = Vue.component('polygon');

new PolygonComponent().$mount(polygon._path);