Igor-Vladyka / leaflet.browser.print

A leaflet plugin which allows users to print the map directly from the browser
https://igor-vladyka.github.io/leaflet.browser.print/
MIT License
154 stars 76 forks source link

how to add a new EXTEND register? #42

Closed ghost closed 5 years ago

ghost commented 5 years ago

hello, dear lgor: I define a new type VectorGrid by :

L.VectorGrid = L.GridLayer.extend({
// A factory method which will be used to instantiate the per-tile renderers.
rendererFactory: L.svg.tile,
// A data structure holding initial symbolizer definitions for the vector features.

vectorTileLayerStyles: {},
initialize:function(option){L.setOptions(this, options);
        L.GridLayer.prototype.initialize.apply(this, arguments);
        if (this.options.getFeatureId) {
            this._vectorTiles = {};
            this._overriddenStyles = {};
            this.on('tileunload', function(e) {
                var key = this._tileCoordsToKey(e.coords),
                    tile = this._vectorTiles[key];

                if (tile && this._map) {
                    tile.removeFrom(this._map);
                }
                delete this._vectorTiles[key];
            }, this);
        }
        this._dataLayerNames = {};}
)

now i use the VectorGrid type to define a city's boundarys ,how to add the register? very thanks ! han

Igor-Vladyka commented 5 years ago

Please try this code:

L.Control.BrowserPrint.Utils.registerLayer( L.VectorGrid , "L.VectorGrid ", function(layer) { return new L.VectorGrid(layer.options); } );

And let me know if it works for you.

ghost commented 5 years ago

Mr. Lgor thank you for your reply 👍 sorry i forgot that i use another extend ↓

L.VectorGrid.Slicer = L.VectorGrid.extend({
    options: {        vectorTileLayerName: 'sliced',
        extent: 4096,   // Default for geojson-vt
        maxZoom: 14     // Default for geojson-vt
    },
    initialize: function(geojson, options) {
        L.VectorGrid.prototype.initialize.call(this, options);
        var options = {};
        for (var i in this.options) {
            if (i !== 'rendererFactory' &&
                i !== 'vectorTileLayerStyles' &&
                typeof (this.options[i]) !== 'function'
            ) {
                options[i] = this.options[i];
            }
        }    },
    _getVectorTilePromise: function(coords) {

        var _this = this;

        var p = new Promise( function waitForWorker(res) {
            _this._worker.addEventListener('message', function recv(m) {
                if (m.data.coords &&
                    m.data.coords.x === coords.x &&
                    m.data.coords.y === coords.y &&
                    m.data.coords.z === coords.z ) {

                    res(m.data);
                    _this._worker.removeEventListener('message', recv);
                }
            });
        });

        this._worker.postMessage(['get', coords]);

        return p;
    },

});

L.vectorGrid.slicer = function (geojson, options) {
    return new L.VectorGrid.Slicer(geojson, options);
};

and identify my city boundry ↓: _self.cityLayer = L.vectorGrid.slicer(boundarys, {options:..});

write like this? L.Control.BrowserPrint.Utils.registerLayer( L.VectorGrid.Slicer , "L.VectorGrid.Slicer ", function(layer) { return new L.VectorGrid.Slicer(layer.options); } );

sincerely han

ghost commented 5 years ago

and when i print a scale control , my basemap color is almost black ,the result is a printed salce control with a black background.like this (left one , want right one) :

https://hanbg.xyz/usr/uploads/2018/08/255385175.png

                    MAP.app.map.on("browser-print-start", function(e){
                        scaleff.addTo(e.printMap);
                    });

what is the id of [printMap] or some method to bind the div

Igor-Vladyka commented 5 years ago

Hello friend.

Yes, maybe documentation is not so obvious, but I will try to help you.

In the registerLayer you need to specify (type, "marker", createFunction).

In you case it should be something like:

L.Control.BrowserPrint.Utils.registerLayer( L.VectorGrid.Slicer , "L.VectorGrid.Slicer ", function(layer) { return L.vectorGrid.slicer(layer.geojson, layer.options); } );

I can't see you screenshots, but your boundaries should be somewhere inside layer, like "layer.geojson"

Or, just save them outside! And pass on print creation new ones :)

Example:

var boundarys = {}; _self.cityLayer = L.vectorGrid.slicer(boundarys, {options:..}); L.Control.BrowserPrint.Utils.registerLayer( L.VectorGrid.Slicer , "L.VectorGrid.Slicer ", function(layer) { return L.vectorGrid.slicer(boundarys , layer.options); } );

And it will still work.

Please keep in mind that code L.vectorGrid.slicer() equals to new L.VectorGrid.Slicer().

Regards, Igor

ghost commented 5 years ago

thank you you are so nice , i will have a try appreciate it 👍 han /-------------------------------/ it works! wow ,thank you !