Коллеги, доброго времени суток, прошу помощи. В продолжении вчерашнего вопроса, встала очередная проблема. Разбираю код бывшего коллеги. Карта, выводим слой подложки google maps на него накладываем другой слой:
import rosreestrLayerOptions from './layerOptions.js';
export default class Map {
constructor() {
this.eventEmitter = eventEmitter.bus;
layerOptions.init()
this.conteiner = document.getElementById("map"),
this.map = false;
this.overlays = {
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.TileLayer.newLayer("/api/grid?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
};
this.currentMapData = {
lat: 0,
lng: 0,
center: []
};
}
init(lat, lng) {
this.map = L.map(this.conteiner, this.options);
this.map.setView([lat, lng]);
this.map.addLayer(this.overlays.google);
this.map.addLayer(this.overlays.rosreestrGrid);
this.listener();
}
}
}
суть я думаю ясна, инициализирую карту, накладываю слой. Тут:
'use strict';
export default class layerOptions {
static init(layer) {
L.TileLayer.newLayer = L.TileLayer.extend({
options: {
tileSize: 256
},
getTileUrl: (tilePoint) => {
let map = this._map,
crs = map.options.crs,
tileSize = this.options.tileSize,
nwPoint = tilePoint.multiplyBy(tileSize),
sePoint = nwPoint.add([tileSize, tileSize]);
let nw = crs.project(map.unproject(nwPoint, tilePoint.z)),
se = crs.project(map.unproject(sePoint, tilePoint.z)),
bbox = [nw.x, se.y, se.x, nw.y].join(',');
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
z: tilePoint.z,
x: tilePoint.x,
y: tilePoint.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
});
}
});
}
}
как я понимаю происходит установка опций, но и контекст теряется.
leaflet подключаю в шаблоне
<script src="/javascripts/libs/leaflet/leaflet-src.js"></script>
.
Кто нибудь работал с leaflet и es6???? Как решить проблему. Заранее благодарю.
