OpenLayers 3 뷰 센터 변경

OpenLayers 3을 사용하여 일부 맵과 상호 작용하고 있습니다. 먼저 내지도를 선언합니다.

map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
                ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

지도의 뷰 센터를 변경하기 위해 액션을 트리거하는 이벤트가 있습니다. 이 방법으로 (내 좌표는 EPSG:4326형식입니다) :

function CenterMap(lat, long) {
     console.log("Lat: " + lat + " Long: " + long);
     map.setView(new ol.View({
            center: ol.proj.transform([lat, long], 'EPSG:3857', 'EPSG:4326'),
            zoom: 5
     }));
}

함수가 실행될 때 탐색기 콘솔에서 이것을 얻습니다.

Lat: 9.0412851667 Long: -79.5658145000

그러나지도는로 이동합니다 [0,0]. 왜 이런 일이 발생하는지 아는 사람이 있습니까?

— 길레 론
소스

답변:

ol.proj.transform에서 toProjection 전에 fromProjection을 지정해야 작동합니다.

Michael Gentry가 그의 답변에서 설명했듯이, 또 다른 문제는 경도 (서쪽 동쪽 x)를 먼저 지정한 다음 위도 (남쪽 y)를 지정해야한다는 것입니다.

센터를 설정하는 더 좋은 방법은 항상 새 뷰를 작성하는 대신 현재 뷰를 가져 와서 센터를 설정하는 것입니다.

function CenterMap(long, lat) {
    console.log("Long: " + long + " Lat: " + lat);
    map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(5);
}

— 사이먼 yx 스
소스

알았어 고마워 한 가지 더, 내가 그렇게 변경하면 새로운 오류가 발생

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite. ol.js:457 2Uncaught RangeError: Invalid array length

합니다. 좌표가 너무 길기 때문입니다. 변경하면 [131.044922, -25.363882]정상적으로 작동합니다. 좌표가 너무 길어요?

— Guillelon

그것은 문제가되지 않아야합니다. 오류가 발생한 좌표는 무엇입니까? 위에서 언급 한 것?

— Simon Zyx

네 저기

— Guillelon

이 좌표를 MapQuest 맵으로 시도해 보았습니다. 경도 -79는 여전히 EPSG : 4326 (+/- 90도 이내) 및 EPSG : 3857 (+/- 85도 이내) 범위 내에 있습니다.

— Simon Zyx

렌더러와 레인저 내부에서 발생하는 유형 오류

— Simon Zyx

새 스택 교환 계정이 있고 "CatchRenderingContext2D '에서'Uncaught TypeError : 'putImageData'를 실행하지 못했습니다. float 매개 변수 3이 무한하지 않습니다. ' 오류. 위도 및 긴 입력이 뒤로 있기 때문에 발생합니다.

map.getView().setCenter(ol.proj.transform([lat, long], 'EPSG:4326', 'EPSG:3857'));

해야한다:

map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));

다른 사람 이이 문제가있는 경우를 대비하여.

— 마이클 젠트리
소스

네 맞아요-그에 따라 답변을 업데이트하겠습니다.

— Simon Zyx

브라우저 전용 :

<script src='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js'></script>


  ol.proj.transform() 

  ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857');

js-app 사용

   // for projection
  import {transform} from 'ol/proj.js';

  // use this one : transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857')





   var map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
      //center: [-118.246521, 34.049039],
        center: transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857'),
      zoom: 16
    })
  });

— hoogw
소스