Use the Leaflet framework and prepare to extend an object.
code show as below:
var FxtMap = L.Class.extend({
_preZoom: 4,
_initZoom: 4,
_queryScale: 7,
_map:null,
fxtData: null,
options: {
center: [31.2, 121.46715194],
zoom: 4,
crs: sh_crs,
doubleClickZoom: false,
zoomControl: false,
attributionControl: false
},
initialize: function (id, mapOption) {
if (mapOption) {
L.Util.setOptions(this, mapOption);
}
this._map = L.map(id, this.options);
m_tileLayer.addTo(this._map);
m_oldView = this._map.getBounds();
this._map.on({
zoomstart: this.getPreZoom,
zoomend: this.triggerLyrChange,
viewreset: MapViewReset,
moveend: MapDrag
});
this._map.invalidateSize("true");
},
getPreZoom: function (e) {
this._preZoom = this._map.getZoom();
},
triggerLyrChange: function () {
if (this._map.getZoom() == this._queryScale && this._map.getZoom() > this._preZoom) {
this._map.fire('jsonLyrType');
}
if (this.getZoom() == this._queryScale - 1 && this._map.getZoom() < this._preZoom) {
this._map.fire('imgLyrType');
}
},
...
})getPreZoom and triggerLyrChange are both event binding functions. This in the function is the _map of the object. How to correctly reference the instantiated object in this function? Can I only use FxtMap.prototype?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
No problem as mentioned above, just use bind, or you can simulate a bind yourself,
You figure it out yourself, ask and answer your own questions.
This is a typical problem with the 'this' variable in js. In the event binding function, the callback function is eventually called by the event binding object, so 'this' at this time points to the object. At this time, you want to change the callback function The 'this' variable points to the instance object, and you need to manually change the point of this through Function.prototype.bind.