เปลี่ยนศูนย์มุมมอง 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
     }));
}

เมื่อฟังก์ชั่นทำงานฉันจะได้รับสิ่งนี้ที่คอนโซล explorer:

Lat: 9.0412851667 Long: -79.5658145000

แต่แผนที่ไปที่[0,0]ไม่มีใครรู้ว่าทำไมสิ่งนี้เกิดขึ้น?

— Guillelon
แหล่งที่มา

คำตอบ:

ใน ol.proj.transform คุณต้องระบุ fromProject ก่อน toProject จากนั้นควรใช้งานได้

ในขณะที่ 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);
}

— Simon Zyx
แหล่งที่มา

โอเคฉันเข้าใจแล้วขอบคุณ

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

ฉันมีบัญชีการแลกเปลี่ยนสแต็กใหม่และไม่มีชื่อเสียงสูงพอที่จะแสดงความคิดเห็นใน "Uncaught TypeError: ล้มเหลวในการดำเนินการ 'putImageData' ใน 'CanvasRenderingContext2D': พารามิเตอร์ลอย 3 ไม่แน่นอน ความผิดพลาด สิ่งนี้เกิดขึ้นเนื่องจากคุณมีค่า Lat และอินพุตแบบยาวย้อนกลับ

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

ควรจะเป็น:

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

ในกรณีที่คนอื่นมีปัญหานี้

— Michael Gentry
แหล่งที่มา

ใช่คุณพูดถูก - ฉันจะอัปเดตคำตอบของฉันตามนั้น

— 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
แหล่งที่มา