0

Коллеги, доброго времени суток. Ищу ответ на свой вопрос, может кто сталкивался. Делаю карту на leaflet:

'use strict';
import newLayer from './rosreestrLayerOptions.js';

export default class Map {

    constructor() {

        this.eventEmitter = eventEmitter.bus;
        this.conteiner = document.getElementById("map"),
        this.map = false;
        this.layers = {

            google: L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {

                maxZoom: 20,
                subdomains:['mt0','mt1','mt2','mt3'],
                disableDefaultUI: true,
                styles: [{
                    featureType: "poi",
                    stylers: [{ visibility: "off" }]
                }]

            }),
            newGrid: new L.newLayer("/api/newGrid?x={x}&y={y}&z={z}&dpi=96&transparent=true&format=png32&bbox={bbox}&size=256,256&bboxSR=102100&imageSR=102100&f=image", {

                tileSize: 256,
                clickable: true,    
                zIndex: 103

            })

        };
        this.options = {

            attributionControl: false,
            zoomControl: false,
            doubleClickZoom: false,
            inertia: true,
            zoom: 15,
            maxZoom: 17,
            minZoom: 6

        };

    }

    init(lat, lng) {

        this.map = L.map(this.conteiner, this.options);

        this.map.setView([lat, lng]);

        this.map.addLayer(this.layers.google);

        this.map.addLayer(this.layers.newLayer);

    }

Как сделать "настройку" слоя)))), делаю так, соответственно ничего не выходит:

export default let newLayer = L.TileLayer.extend({

options: {
    tileSize: 256
},
getTileUrl: (point) => {

    let map = this._map,
        crs = map.options.crs,
        tileSize = this.options.tileSize,
        nwPoint = point.multiplyBy(tileSize),
        sePoint = nwPoint.add([tileSize, tileSize]);

    let nw = crs.project(map.unproject(nwPoint, point.z)),
        se = crs.project(map.unproject(sePoint, point.z)),
        bbox = [nw.x, se.y, se.x, nw.y].join(',');

    return L.Util.template(this._url, L.extend({
        s: this._getSubdomain(tilePoint),
        z: point.z,
        x: point.x,
        y: point.y,
        bbox: bbox
    }, this.options));

},
onAdd: (map) => {

    L.TileLayer.prototype.onAdd.call(this, map);

    if (this.options.clickable) {

        L.DomUtil.addClass(this._container, 'leaflet-clickable-raster-layer');

        if (this._needInitInteraction) {

            this._initInteraction();
            this._needInitInteraction = false;

        }

    }
},
_needInitInteraction: true,
_initInteraction: () => {
    let div = this._container,
        events = ['dblclick', 'click', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];

    for (let i = 0; i < events.length; i++) {

        L.DomEvent.on(div, events[i], this._fireMouseEvent, this);

    }
},
_fireMouseEvent: (e) => {
    let map = this._map;
    if (map.dragging && map.dragging.moved()) { return; }

    let containerPoint = map.mouseEventToContainerPoint(e),
        layerPoint = map.containerPointToLayerPoint(containerPoint),
        latlng = map.layerPointToLatLng(layerPoint);

    this.fire(e.type, {
        latlng: latlng,
        layerPoint: layerPoint,
        containerPoint: containerPoint,
        originalEvent: e
    });
}

});

Собственно так делал мой бывший коллега, я переписываю на es6. Уперся в эту проблему. Если кто-то сможет помочь буду благодарен.

p.s. в браузере пишет Cannot read property '_initContainer' of undefined. Теряется this.

romandiller
  • 61

0 Answers0