免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
Leaflet 地圖偏移 地圖糾偏

    地圖區(qū)域是一個市,偏移量可以近似認為是固定不變的,通過修改Leaflet-src.js源碼中的_update方法和_addTile方法對瓦片進行偏移糾偏。

    Leaflet版本v1.3.4,要修改的_update和_addTile方法和最新版本1.6.0區(qū)別不大。

1、在_update方法中添加如下代碼,瓦片圖偏移后,在邊緣位置需要補充瓦片圖顯示,不然邊緣會出現(xiàn)空白:

        //處理糾偏后瓦片顯示
        var ratio = 1 / Math.pow(2, (18 - this._tileZoom)); //計算糾偏比率
        var deltaX = 0;
        var deltaY = 0;
        if (this._map.options.offsetX) deltaX = this._map.options.offsetX * ratio / 256;
        if (this._map.options.offsetY) deltaY = this._map.options.offsetY * ratio / 256;
        if (deltaX > 0) tileRange.max.x += (Math.round(deltaX) + 1);
        if (deltaY > 0) tileRange.max.y += (Math.round(deltaY) + 1);
        if (deltaX < 0) tileRange.min.x -= (Math.floor(deltaX) - 1);
        if (deltaY < 0) tileRange.min.y -= (Math.floor(deltaY) - 1);
View Code

2、在_update方法中修改如下代碼:

            for (i = 0; i < queue.length; i++) {
                this._addTile(queue[i], fragment, ratio);
            }
View Code

3、在_addTile方法中添加如下代碼,重新計算瓦片的像素位置:

        //糾偏
        if (this._map.options.offsetX) tilePos.x -= Math.floor(this._map.options.offsetX * ratio);
        if (this._map.options.offsetY) tilePos.y -= Math.floor(this._map.options.offsetY * ratio);
View Code

 

_update方法完整代碼:

    // Private method to load tiles in the grid's active zoom level according to map bounds
    _update: function (center) {
        var map = this._map;
        if (!map) { return; }
        var zoom = this._clampZoom(map.getZoom());

        if (center === undefined) { center = map.getCenter(); }
        if (this._tileZoom === undefined) { return; }    // if out of minzoom/maxzoom

        var pixelBounds = this._getTiledPixelBounds(center),
            tileRange = this._pxBoundsToTileRange(pixelBounds),
            tileCenter = tileRange.getCenter(),
            queue = [],
            margin = this.options.keepBuffer,
            noPruneRange = new Bounds(tileRange.getBottomLeft().subtract([margin, -margin]),
                                      tileRange.getTopRight().add([margin, -margin]));

        // Sanity check: panic if the tile range contains Infinity somewhere.
        if (!(isFinite(tileRange.min.x) &&
              isFinite(tileRange.min.y) &&
              isFinite(tileRange.max.x) &&
              isFinite(tileRange.max.y))) { throw new Error('Attempted to load an infinite number of tiles'); }

        for (var key in this._tiles) {
            var c = this._tiles[key].coords;
            if (c.z !== this._tileZoom || !noPruneRange.contains(new Point(c.x, c.y))) {
                this._tiles[key].current = false;
            }
        }

        // _update just loads more tiles. If the tile zoom level differs too much
        // from the map's, let _setView reset levels and prune old tiles.
        if (Math.abs(zoom - this._tileZoom) > 1) { this._setView(center, zoom); return; }

        //處理糾偏后瓦片顯示
        var ratio = 1 / Math.pow(2, (18 - this._tileZoom)); //計算糾偏比率
        var deltaX = 0;
        var deltaY = 0;
        if (this._map.options.offsetX) deltaX = this._map.options.offsetX * ratio / 256;
        if (this._map.options.offsetY) deltaY = this._map.options.offsetY * ratio / 256;
        if (deltaX > 0) tileRange.max.x += (Math.round(deltaX) + 1);
        if (deltaY > 0) tileRange.max.y += (Math.round(deltaY) + 1);
        if (deltaX < 0) tileRange.min.x -= (Math.floor(deltaX) - 1);
        if (deltaY < 0) tileRange.min.y -= (Math.floor(deltaY) - 1);

        // create a queue of coordinates to load tiles from
        for (var j = tileRange.min.y; j <= tileRange.max.y; j++) {
            for (var i = tileRange.min.x; i <= tileRange.max.x; i++) {
                var coords = new Point(i, j);
                coords.z = this._tileZoom;

                if (!this._isValidTile(coords)) { continue; }

                var tile = this._tiles[this._tileCoordsToKey(coords)];
                if (tile) {
                    tile.current = true;
                } else {
                    queue.push(coords);
                }
            }
        }

        // sort tile queue to load tiles in order of their distance to center
        queue.sort(function (a, b) {
            return a.distanceTo(tileCenter) - b.distanceTo(tileCenter);
        });

        if (queue.length !== 0) {
            // if it's the first batch of tiles to load
            if (!this._loading) {
                this._loading = true;
                // @event loading: Event
                // Fired when the grid layer starts loading tiles.
                this.fire('loading');
            }

            // create DOM fragment to append tiles in one batch
            var fragment = document.createDocumentFragment();

            for (i = 0; i < queue.length; i++) {
                this._addTile(queue[i], fragment, ratio);
            }

            this._level.el.appendChild(fragment);
        }
    },
View Code

_addTile方法完整代碼:

    _addTile: function (coords, container, ratio) {
        var tilePos = this._getTilePos(coords),
            key = this._tileCoordsToKey(coords);

        var tile = this.createTile(this._wrapCoords(coords), bind(this._tileReady, this, coords));

        this._initTile(tile);

        // if createTile is defined with a second argument ("done" callback),
        // we know that tile is async and will be ready later; otherwise
        if (this.createTile.length < 2) {
            // mark tile as ready, but delay one frame for opacity animation to happen
            requestAnimFrame(bind(this._tileReady, this, coords, null, tile));
        }

        //糾偏
        if (this._map.options.offsetX) tilePos.x -= Math.floor(this._map.options.offsetX * ratio);
        if (this._map.options.offsetY) tilePos.y -= Math.floor(this._map.options.offsetY * ratio);

        setPosition(tile, tilePos);

        // save tile in cache
        this._tiles[key] = {
            el: tile,
            coords: coords,
            current: true
        };

        container.appendChild(tile);
        // @event tileloadstart: TileEvent
        // Fired when a tile is requested and starts loading.
        this.fire('tileloadstart', {
            tile: tile,
            coords: coords
        });
    },
View Code

 

如何使用:

1、JS引用由leaflet.js修改為引用leaflet-src.js

2、創(chuàng)建地圖見如下代碼,注意offsetX和offsetY參數(shù),不同的城市,參數(shù)值不同,參數(shù)值可以用太樂地圖下載器軟件中的糾偏工具計算:

var map = new L.Map('map', { center: centerLatLng, zoom: 12, minZoom: 8, maxZoom: 18, maxBounds: mapBounds, offsetX: 1020, offsetY: 517, layers: [tileLayer], attributionControl: false, doubleClickZoom: false, zoomControl: false });
View Code

 

還有另一種糾偏方法,可以通過處理瓦片圖進行糾偏:https://www.cnblogs.com/s0611163/p/12034779.html

 

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
ajax學(xué)習(xí)筆記一:動態(tài)更改div位置 - 博客文章 - 博客園知識庫
javascript 拖拽
使用HTML5+Canvas調(diào)用IPHONE攝像頭拍照并壓縮處理
鼠標拖動層(可任意綁定DIV標簽)的兩種實現(xiàn)方法
Unity中的UV偏移
HTML5 Canvas像素處理使用接口介紹
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服