Leaflet 对象作为 Vue 组件答案

【问题标题】：Leaflet objects as Vue componentsLeaflet 对象作为 Vue 组件
【发布时间】：2016-02-13 07:09:15
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript leaflet vue.js

【解决方案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);

【讨论】：