이마

이것은 사회에서 여전히 필요한 것이 있을 수 있다.

요구 사항

예를 들어 리플렛은 어느 도시에서 먹을 수 있는 음식 정보를 큰 바늘 등으로 시각화된 지도를 만든다.제이스로 만들었다고 가정해 봐.
다만, 게재된 정보의 편의를 위해 그 도시 이외의 곳을 지도에 표시하고 싶지 않다.
어떻게 해야만 이 요구를 만족시킬 수 있습니까?

샘플 1 "지도를 이동한 후 지정된 위치로 강제 반환" 처리 설치

따라서 요구를 충족시키는 행위로 지도를 이동해 강제로 지정한 좌표로 복원해 보자.
인코딩으로 이런 느낌입니다.( 샘플 1 / 소스 )
sample1.html

        // 地図の中心緯度経度初期値
        var mapInitLatLng = [
            43.10379, 141.53621
        ];
        // 地図を定義
        var mymap = L.map('map', {
            maxZoom: 24,
            minZoom: 10,
        }).setView(mapInitLatLng, 16);

        // 地理院地図のタイルをセット
        L.tileLayer(
            'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://maps.gsi.go.jp/">地理院地図</a>',
            maxZoom: 18,
        }).addTo(mymap);

        // 地図移動時に発生させるイベントをセット
        mymap.on('moveend', moveInitLatLng);

        /**
         * 地図の中心位置を mapInitLatLng に強制的に移動する
         */
        function moveInitLatLng(e) {
            mymap.panTo(mapInitLatLng);
        }

하는 일은.

지도 이동이 완료되었을 때 불이 나는 모veend 이벤트 설정 함수.

L.map 대상의panto 방법을 사용하여 지도의 중심을 moveend 이벤트와 관련된 함수로 설정합니다.

그렇습니다.
이때 지도가 표시되면 지도를 끌어다 놓고 이동할 때마다 지도는 지도의 초기 위치로 돌아갑니다.

견본의 2: 이동 가능한 지도의 범위를 직사각형으로 표시한다

샘플1의 상태는 단순히 사용하기 불편한 지도일 뿐이니 조금만 융통성 있게 풀어보자.
이 처리를 추가하기 전에 지도를 이동할 수 있는 범위를 확인하고 가시화합니다.( 샘플2、소스 )
sample2.html

        // 市全体を囲む矩形を定義
        var cityBounds = [[43.17293, 141.44430], [43.01615, 141.6684]];
        var cityRect = L.rectangle(cityBounds, {color: "red", fillColor: '#f03', fillOpacity: 0.5, weight: 1});
        cityRect.addTo(mymap);

이것은 단지 지도에 직사각형을 그릴 뿐이다.그런데 이렇게 도시 전체를 둘러싼 직사각형을 그리니 우리 도시는 정말 크군요.

샘플의 3사각형 범위 내에서 지도를 이동해 보세요

샘플 2에서 묘사한 직사각형 범위 내에서 지도를 이동해 보세요.( 샘플3、소스 )
sample3.html

        // 地図移動時のイベントをセット
        mymap.on('moveend', moveInsideCityBound);

        /**
         * 地図の中心位置を市全体を囲む矩形内に移動する
         */
        function moveInsideCityBound(e) {
            // 表示してる地図の中心座標を取得
            var mapCenter = mymap.getCenter();
            // 市全体を囲む矩形の LatLngBounds オブジェクトを取得する
            var checkBounds = cityRect.getBounds();

            // 現在の地図の中心位置が checkBounds に含まれてるかチェック。
            // 含まれてない場合、地図の中心座標を矩形内部に戻す。
            if(!checkBounds.contains(mapCenter)) {
                mymap.panTo(mapInitLatLng);
            }

        }

하는 일은 간단하다. 지도의 중심 좌표가 직사각형의 범위에 포함되었는지 확인하고 범위를 초과한 상황에서 되돌아와야 할 좌표를 되돌려준다.


이에 따라 우선 지정된 범위의 지도를 열람할 수 있게 됐다.

ToDo

그러나 지금까지 되돌아온 좌표는 지도의 초기 위치에 고정되어 있기 때문에 이동 가능한 범위가 큰 범위와 관련된 상황에서 사용성이 좋지 않다.
따라서 조금 더 유연하게'직사각형을 벗어난 좌표에서 가장 가까운 직사각형 안의 좌표로 되돌아오는 것'등이 좋다.
하지만 여기까지 읽은 여러분의 숙제입니다.나는 각양각색의 방법이 있다고 생각한다.

끝말

하지만 지도에 이런 제한을 주는 플러그인은 이미 있을지도 모른다.찾지 못했지만

추기

리플렛은 의견 표시줄에 나와 있는 것처럼js에서는 L.Map입니다.setMaxBounds 방법을 사용하여 디스플레이 범위를 제한할 수 있습니다.이것은 표준적인 방법이다.tom_메모 감사합니다.
샘플 4・소스
sample4.html

        // 地図の中心緯度経度
        var mapInitLatLng = [
            43.10379, 141.53621
        ];
        // 地図を定義
        var mymap = L.map('map', {
            maxZoom: 24,
            minZoom: 10,
        }).setView(mapInitLatLng, 11);
        // 市全体を囲む矩形を定義
        var cityBounds = [[43.17293, 141.44430], [43.01615, 141.6684]];
        var cityRect = L.rectangle(cityBounds, {color: "red", fillColor: '#f03', fillOpacity: 0.5, weight: 1});
        cityRect.addTo(mymap);
        // setMaxBounds を指定して地図の表示範囲を制限
        mymap.setMaxBounds(cityBounds);