Question

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

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

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

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

Answer 1

This is in no means complete solution, but to big for a comment so i thought i'de throw it in here. Haven't worked with Vue, but in Angular, if you need to turn something in to a directive after angular has already run, you need to compile it. I had a look at the Vue API and they offer something similar called mount. It turns an element dynamicly added to the DOM into a component:

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);

Leaflet对象作为Vue组件

1 个答案: