Vue2使用render挂载地图组件

export class Popup {
    map: L.Map;
    pop: L.Popup;
    constructor(options: PopuopOptions) {
        this.map = options.map;
        this.pop = L.popup({
            minWidth: 376,
            maxWidth: 376,
            maxHeight: 254,
            className: 'marker-popbox',
            offset: [-100, 0]
        });
    }
    lookAt(latlng: L.LatLng, data: any) {


        const isTables = Object.keys(data.data).length > 1;
        this.pop.setLatLng(latlng).setContent('<div id="popup"></div>').openOn(this.map)
        new Vue({
            render: h => h(PopupBox, {
                props: {
                    data: data,
                    isTables,
                }
            })
        }).$mount('#popup')
        this.map.on('popupclose', () => {

            this.removeAnimateMarker()
        })
    }
    remove() {
        this.pop.remove();
    }
    removeAnimateMarker() {
        this.map.eachLayer((layer: any) => {
            if (layer.options.type === 'circle-animate') {
                layer.remove();
            }
        })
        this.map.off({ popupclose: this.removeAnimateMarker })
    }

}
//动画类
export class MakerAnimate {
    map: L.Map;
    animateMarker: any;
    constructor(map: L.Map) {
        this.map = map;

    }
    lookAt(latlng: L.LatLng) {
        let dom = document.createElement("div");

        var myIcon = (L as any).divIcon({
            className: "my-div-icon",
            html: dom,
            iconSize: 50,
        });
        this.animateMarker = (L as any)
            .marker(latlng, {
                icon: myIcon,
                type: "circle-animate",
                zIndexOffset: -100,
            })
            .addTo(this.map);

        new Vue({
            el: dom,
            render: (h) => h(CircleAnimate),
        });
    }
    remove() {
        if (this.animateMarker) this.animateMarker.remove();
    }
}