Leaflet: 지도 중앙에 오프셋을 허용합니다.

실제로 Leaflet에서는 매우 쉽습니다. 필요한 것은 map.containerPointToLatLng 메소드입니다. 지도의 왼쪽 상단 모서리를 기준으로 일부 픽셀 좌표를 지리적 위치로 변환합니다. 그래서 다음과 같이 합니다.

var centerPoint = map.getSize().divideBy(2),
    targetPoint = centerPoint.subtract([overlayWidth, 0]),
    targetLatLng = map.containerPointToLatLng(centerPoint);

map.panTo(targetLatLng);

이렇게 하면 사용 사례가 해결됩니까?

이봐. 그것은 일종의 수행이며 아마도 충분할 것입니다. 그러나 여기에서 문제는 뷰포트가 중심에 두고 싶은 위치라고 가정한 다음 오프셋하여 두 단계 이동이 될 것이라는 점입니다. 위도-경도를 취하는 것과는 반대로 오프셋한 다음 패닝합니다. 하나의 움직임.

아 제 계산이 정확하지 않습니다. 오프셋 중심이 대상 지점에 있고 오프셋이 overlayWidth / 2 와 같도록 실제 지도 중심을 설정해야 합니다. 단일 동작에 대한 작업 코드는 다음과 같습니다.

var targetPoint = map.project(targetLatLng, targetZoom).subtract([overlayWidth / 2, 0]),
    targetLatLng = map.unproject(targetPoint, targetZoom);

map.setView(targetLatLng, targetZoom);

이것은 우리가 겪었던 것과 같은 경우입니다. 약간 불투명한 사이드바가 지도 상단에 오버레이되었습니다. fitBounds()를 호출할 때마다 약간 떨어져 있고 올바르게 하기 위해 다른 동작을 수행해야 합니다. 우리는 이에 대한 풀 리퀘스트를 고려하고 있었지만 약간의 작업이 될 수 있고 충분히 일반적인 사용 사례가 아니라고 생각했기 때문에 사이드바를 지도 옆으로 옮기는 것으로 끝이 났습니다.

@mourner 그것은 많은 의미가 있습니다. project() 메서드를 놓친 것 같습니다. 이것은 대부분의 사용 사례를 처리합니다. 감사합니다.

@ajbeaven 처럼 (GeoJSON) 레이어에 대한 오프셋 fitBounds는 매우 훌륭하지만 훨씬 더 복잡할 것 같습니다. 뷰포트의 경계가 효과적으로 변경되고 있고 한 번의 호출로 오프셋을 수행하는 방법을 알지 못하기 때문에 오프셋만으로는 충분하지 않다고 생각합니다.

어느 쪽이든, 라이브러리 자체에 추가하는 것이 합리적이지 않다면 자유롭게 닫으십시오. 제공된 코드로 내 특정 프로젝트를 관리할 수 있다고 생각합니다. 감사 해요.

fitBounds 는 좀 더 장황하지만 쉽습니다. 이 https://github.com/CloudMade/Leaflet/blob/master/src/map/Map.js#L275 메서드를 복사하여 붙여넣고 사용하는 크기를 수정한 다음 사용하세요.

var targetZoom = altGetBoundsZoom(map, bounds);
// ... calculate targetLatLng as above
map.setView(targetLatLng, targetZoom);

안녕. fitBounds 를 매개변수로 LatLng[] 와 함께 사용하고 있으며 위에서 제공한 코드 조각을 사용하려고 시도했지만 운이 없었습니다.
내 웹에는 지도를 아래에 표시하려는 사이드바 오버레이가 있지만 이 오버레이 아래에 마커가 표시되지 않도록 하고 싶습니다. (지도 중심을 오프셋하는 것도 좋지만 수동으로 수행할 수 있습니다.)

fitBounds 에 대한 전체 코드 조각을 _offset map_에 게시해 주시겠습니까?
위에 쓰신 내용이 많이 헷갈리네요. 문제는 포인트 배열을 사용하기 때문에 targetLatLng 나 targetPoint $가 없다는 것입니다.

ㅋ 컨테이너의 각 면에 세미 오버레이된 공간의 양을 정의하는 옵션이 있으면 정말 멋질 것입니다. 여기서 여전히 지도를 그릴 수 있지만 마커에 컨트롤을 배치하지 않을 것입니다.

여기에서 내가 구현한 코드를 볼 수 있습니다. (이것은 결코 훌륭한 코드 인스턴스는 아니지만 아이디어는 있습니다) 또한 Leaflet 맵인 맵 속성을 보유하는 객체에 내장되어 있습니다. 다음과 같은 방법이 있습니다.

앱셋뷰
appSetBounds
appGetBoundsZoom

https://github.com/MinnPost/minnpost-my-boundaries/blob/master/visualizations/index.html#L556

내장된 이 기능을 추가하는 것이 유용할 것이므로 다시 엽니다.

나는 그 뒤에 지도와 함께 550px의 화면 왼쪽에 목록이 있어야 했기 때문에 이 토론을 접하게 되었습니다. L.Map의 일부 기본 기능을 재정의하는 것이 더 쉬울 것이라고 결정했습니다. 모든 아이디어에 감사드립니다.

모두 해결되었으면 좋겠지만 100% 확신할 수는 없습니다.

MapCenterOffsetMixin = {
    UIOffset: [550, 0], // x, y
    getBounds: function(){
        var a=this.getPixelBounds(),
            b=this.unproject(new L.Point(a.min.x+this.UIOffset[0],a.max.y+this.UIOffset[1]), this._zoom,!0),
            c=this.unproject(new L.Point(a.max.x,a.min.y),this._zoom,!0);
            return new L.LatLngBounds(b,c)
    },
    _latLngToNewLayerPoint: function (latlng, newZoom, newCenter) {
        var targetPoint = this.project(newCenter, newCenter).subtract([this.UIOffset[0]/2, this.UIOffset[1]/2]),
            newCenter = this.unproject(targetPoint, newZoom);
        var topLeft = this._getNewTopLeftPoint(newCenter, newZoom).add(this._getMapPanePos());
        return this.project(latlng, newZoom)._subtract(topLeft);
    },
    _getCenterLayerPoint: function () {
        return this.containerPointToLayerPoint(this.getSize().divideBy(2).add([this.UIOffset[0]/2, this.UIOffset[1]/2]));
    },
    _resetView: function (a, b, c, d) {
        var e = this._zoom !== b;
        // Change the center
        var targetPoint = this.project(a, b).subtract([this.UIOffset[0] / 2, this.UIOffset[1]/2]),
            a = this.unproject(targetPoint, b);
        d || (this.fire("movestart"), e && this.fire("zoomstart")), this._zoom = b, this._initialTopLeftPoint = this._getNewTopLeftPoint(a);
        if (!c) L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
        else {
            var f = L.DomUtil.getPosition(this._mapPane);
            this._initialTopLeftPoint._add(f)
        }
        this._tileLayersToLoad = this._tileLayersNum, this.fire("viewreset", {
            hard: !c
        }), this.fire("move"), (e || d) && this.fire("zoomend"), this.fire("moveend"), this._loaded || (this._loaded = !0, this.fire("load"))
    }
}

L.Map.include(MapCenterOffsetMixin);

@averrips 올려 주셔서 감사합니다. 귀하의 솔루션은 현재 잘 작동하고 있습니다 ... Firefox에서 확대/축소 컨트롤이 이제 깨진 것을 제외하고 :( 일종의 "catchall"오류가 발생합니다. TypeError: t is undefined

다음은 지도에 있어야 하는 fitBoundsPadded의 구현입니다.
fitBounds처럼 사용하지만 원하는 패딩을 전달하므로 다음과 같이 사용합니다.

map.fitBoundsPadded(myBounds, new L.Point(0, 0), new L.Point(0, 150));

그리고 코드:

    fitBoundsPadded: function (bounds, paddingTopLeft, paddingBottomRight) { //(LatLngBounds, Point, Point)

        var zoom = this.getBoundsZoom(bounds);
        var zoomToTry = zoom;

        while (true) {
            var newTopLeft = this.unproject(this.project(bounds.getNorthEast(), zoomToTry).add(paddingTopLeft), zoomToTry);
            var newBottomRight = this.unproject(this.project(bounds.getSouthWest(), zoomToTry).add(paddingBottomRight), zoomToTry);

            var paddedBounds = new L.LatLngBounds([bounds.getSouthWest(), bounds.getNorthEast(), newTopLeft, newBottomRight]);

            var zoom2 = this.getBoundsZoom(paddedBounds);

            if (zoom2 == zoomToTry) {
                return this.fitBounds(paddedBounds);
            } else {
                zoomToTry--;
            }
        }
    },

마스터에서 구현! 다음과 같이 사용하십시오.

map.fitBounds(bounds, [20, 30], [40, 50]); // bounds, topLeftPadding, bottomRightPadding

또는 두 번째 인수만 전달하면 오른쪽 하단 패딩이 기본적으로 왼쪽 상단과 동일하게 설정됩니다.

서명이 조금 바뀌었습니다. 이제 다음과 같이 사용합니다.

map.fitBounds(bounds, {
    padding: [20, 30]
});

map.fitBounds(bounds, {
    paddingTopLeft: [20, 30],
    paddingbottomRight: [40, 50]
});

다른 기능에 패딩을 추가하는 작업이 계획되어 있습니까?

아마도, 예. setView 및 panTo 이상.

모든 면에 동일한 패딩을 적용하기 위한 바로 가기가 있어야 합니다. 이 같은.

map.fitBounds(bounds, { padding: 20 });

현재 대신...

map.fitBounds(bounds, { padding: [20, 20] });

@averrips Mixin이 많은 도움이 되었습니다. 감사합니다.

아직 솔루션을 찾을 수 없으므로 여기로 이동합니다(정말 쉽습니다).

 기능 중심(지도, 위도, 오프셋, 오프셋) {
 var 센터 = map.project(latlng);
 중심 = 새로운 L.point(center.x+offsetx,center.y+offsety);
 var 대상 = map.unproject(중앙);
 map.panTo(대상);
 }

"setView" 및 "panTo"에도 동일한 기능을 추가하십시오.
감사 해요!

또한 왼쪽 | 오른쪽 컨트롤도 패딩하는 방법이 있습니까?

다음은 현재 https://github.com/codeforamerica/lv-trucks-map(http://clvfoodtrucks.com/ 의 라이브 사이트)에 있는 프로젝트에서 오프셋을 사용하여 panTo를 구현한 방법입니다. L.map 프로토타입 객체를 수정하여 이 메서드를 지도 객체에서 "기본적으로" 사용할 수 있으며 지도를 생성하기 전에 JavaScript 코드에 추가해야 합니다.

L.Map.prototype.panToOffset = function (latlng, offset, options) {
    var x = this.latLngToContainerPoint(latlng).x - offset[0]
    var y = this.latLngToContainerPoint(latlng).y - offset[1]
    var point = this.containerPointToLatLng([x, y])
    return this.setView(point, this._zoom, { pan: options })
}

panTo() 와 동일하게 작동하지만 [xOffset, yOffset] 형식의 배열인 추가 매개변수 offset 가 있습니다. 이것을 수정하여 setViewOffset() 메서드도 만들 수 있습니다.

고마워, 루!

참고로 이 구성은 Foursquare 홈페이지에서 볼 수 있는 수평 오프셋을 에뮬레이트하는 데 적합합니다.
https://gist.github.com/missinglink/7620340

@louh님 감사합니다!

@missinglink 감사합니다. 코드가 작동합니다!

확대/축소 작업에도 솔루션이 있습니까?

나는 다음과 같은 것을 사용하고 있습니다.

        var MapCenterOffsetMixin = {
            getMapOffset: function() {
                console.log('getMapOffset');
                return [$('#left-panel').offset().left, 0];
            },
            getBounds: function(){
                console.log('getBounds');
                var offset = this.getMapOffset(),
                    bounds = this.getPixelBounds(),
                    sw = this.unproject(new L.Point(bounds.min.x + offset[0], bounds.max.y + offset[1]), this._zoom, !0),
                    ne = this.unproject(new L.Point(bounds.max.x, bounds.min.y), this._zoom, !0);

                return new L.LatLngBounds(sw, ne)
            },
            _oldLatLngToNewLayerPoint: L.Map.prototype._latLngToNewLayerPoint,
            _latLngToNewLayerPoint: function (latlng, newZoom, newCenter) {
                console.log('_latLngToNewLayerPoint');
                var offset = this.getMapOffset(),
                    targetPoint = this.project(newCenter, newCenter).subtract([offset[0] / 2, offset[1] / 2]);
                newCenter = this.unproject(targetPoint, newZoom);

                return this._oldLatLngToNewLayerPoint(latlng, newZoom, newCenter);
            },
            _getCenterLayerPoint: function () {
                console.log('_getCenterLayerPoint');
                var offset = this.getMapOffset();
                return this.containerPointToLayerPoint(this.getSize().divideBy(2).add([offset[0] / 2, offset[1] / 2]));
            },
            _oldResetView: L.Map.prototype._resetView,
            _resetView: function (center, zoom, preserveMapOffset, afterZoomAnim) {
                console.log('_resetView');
                var offset = this.getMapOffset(),
                    targetPoint = this.project(center, zoom).subtract([offset[0] / 2, offset[1] / 2]);
                center = this.unproject(targetPoint, zoom);

                this._oldResetView(center, zoom, preserveMapOffset, afterZoomAnim);
            }
        };
        L.Map.include(MapCenterOffsetMixin);

하지만 확대/축소에 실패합니다.

해결책은 다음과 같습니다. https://github.com/Mappy/Leaflet-active-area. 멋진! :)

'map.fitBounds(bounds, topLeftPadding, bottomRightPadding)' 함수는 픽셀이 아닌 위도를 조정하기 위해 값을 사용하는 것 같습니다. 따라서 확대/축소 수준에 따라 지도가 조정되는 정도에 따라 다른 결과가 나타납니다. 나는 이것에 대한 사용 사례가 있다고 확신하지만, 조정이 확대/축소 수준에 의존해서는 안 된다는 설정 크기 사이드 바 또는 상위 메뉴와 같이 모든 사람이 제기하는 문제인 것 같습니다. 좌표가 아닌 픽셀을 기반으로 패딩을 추가하는 내장 전단지 기능이 있습니까?

topLeftPadding 및 bottomRightPadding 예상 값(픽셀): http://leafletjs.com/reference.html#map -fitboundsoptions

어떤 이유에서인지 저에게는 그렇지 않은 것 같습니다. 이것을 테스트하기 위해 15의 확대/축소 수준에서 마커를 중앙에 놓은 다음 이 명령을 실행합니다...
map.fitBounds(pointsArray, {paddingTopLeft: [0,0], paddingBottomRight: [800,0], maxZoom: map.getZoom()});
그런 다음 19의 확대/축소 수준에서 마커를 중앙에 놓고 다시 실행합니다. 레벨 15에서는 이동하는 양이 거의 눈에 띄지 않습니다. 그러나 레벨 19에서는 페이지의 절반 정도를 이동합니다. 내 함수 호출에서 뭔가 잘못하고 있습니까?