หน้านี้ได้รับการแปลโดย Cloud Translation API

ห้องสมุดเรขาคณิต

ภาพรวม
แนวคิดเรขาคณิตแบบทรงกลม
1. ฟังก์ชันระยะทางและพื้นที่
2. ฟังก์ชันการนําทาง
การเข้ารหัสเรขาคณิต
ฟังก์ชันรูปหลายเหลี่ยมและโพลีไลน์
1. มีสถานที่ตั้ง()
2. isLocationOnEdge()

ภาพรวม

แนวคิดภายในเอกสารนี้หมายถึงฟีเจอร์ที่มีในไลบรารี google.maps.geometry เท่านั้น ไลบรารีนี้จะไม่โหลดโดยค่าเริ่มต้นเมื่อคุณโหลด Maps JavaScript API แต่จะต้องระบุอย่างชัดแจ้งผ่านพารามิเตอร์ libraries Boottrap ดูข้อมูลเพิ่มเติมได้ในภาพรวมไลบรารี

ไลบรารีเรขาคณิตของ Maps JavaScript API มีฟังก์ชันยูทิลิตีสําหรับการคํานวณข้อมูลเรขาคณิตบนพื้นผิวของโลก ไลบรารีมีเนมสเปซ 3 รายการต่อไปนี้

spherical มีค่าสาธารณูปโภคที่เป็นทรงกลมซึ่งช่วยให้คุณคํานวณมุม ระยะทาง และพื้นที่จากละติจูดและลองจิจูดได้
encoding มียูทิลิตีสําหรับการเข้ารหัสและถอดรหัสเส้นทางโพลีไลน์ตามอัลกอริทึม Polyline ที่เข้ารหัส
poly มีฟังก์ชันยูทิลิตีสําหรับการคํานวณที่เกี่ยวข้องกับรูปหลายเหลี่ยมและเส้นประกอบ

ไลบรารี google.maps.geometry ไม่มีคลาสเลย ไลบรารีจะมีเมธอดแบบคงที่ในเนมสเปซด้านบน

แนวคิดเรขาคณิตแบบทรงกลม

รูปภาพที่อยู่ใน Maps JavaScript API มี 2 มิติและ "ราบ" แต่ Earth เป็นมิติข้อมูล 3 มิติและมักมีขนาดประมาณเป็นฮีโร่คลุมเครือ ภายใน Maps API เราใช้ทรงกลมและเพื่อนําเสนอ Earth บนพื้นผิวเรียบ 2 มิติ เช่น หน้าจอคอมพิวเตอร์ของคุณ Maps API จะใช้การฉายภาพ

ภายในการคาดคะเน 2 มิติ บางครั้งลักษณะที่ปรากฏอาจหลอกลวงได้ เนื่องจากการคาดคะเนแผนที่อาจต้องใช้ความบิดเบือนเล็กน้อย ระบบจึงไม่จําเป็นต้องใช้เรขาคณิตพื้นฐานแบบยูคลิด เช่น ระยะทางที่สั้นที่สุดระหว่างจุด 2 จุดของลูกโลกไม่ใช่เส้นตรง แต่เป็นวงกลมที่มีลักษณะดี

เนื่องจากความแตกต่างเหล่านี้ ฟังก์ชันเรขาคณิตจึงอยู่ในทรงกลม (หรือในการคาดการณ์) จึงต้องใช้เรขาคณิตทรงกลมเพื่อคํานวณสิ่งที่สร้างเป็นระยะทาง หัวข้อ และพื้นที่ ยูทิลิตีสําหรับคํานวณโครงสร้างเรขาคณิตทรงกลมเหล่านี้อยู่ในเนมสเปซ google.maps.geometry.spherical ของ Maps API เนมสเปซนี้มีวิธีแบบคงที่สําหรับการคํานวณค่าสเกลาร์จากพิกัดทรงกลม (ละติจูดและลองจิจูด)

ฟังก์ชันระยะทางและพื้นที่

ระยะทางระหว่าง 2 จุดคือความยาวของเส้นทางที่สั้นที่สุดระหว่าง 2 จุด เส้นทางที่สั้นที่สุดสายนี้เรียกว่าภูมิศาสตร์ ในทรงกลม วงกลมทั้งหมด คือกลุ่มของวงกลมขนาดใหญ่ หากต้องการคํานวณระยะทางนี้ โปรดเรียกใช้ computeDistanceBetween() และส่งผ่านออบเจ็กต์ LatLng 2 รายการ

แต่ให้ใช้ computeLength() เพื่อคํานวณความยาวของเส้นทางที่ระบุแทนหากมีสถานที่หลายแห่ง

ผลการค้นหาระยะทางจะแสดงเป็นเมตร

หากต้องการคํานวณพื้นที่ (เป็นตารางเมตร) ของพื้นที่รูปหลายเหลี่ยม ให้เรียกใช้ computeArea() โดยส่งอาร์เรย์ของออบเจ็กต์ LatLng เพื่อกําหนดทิศทางแบบปิด

เมื่อไปยังส่วนต่างๆ บนวงกลม มุมคือมุมของทิศทางจากจุดอ้างอิงแบบคงที่ ซึ่งโดยปกติแล้วจะเป็นทิศเหนือจริง ภายใน Google Maps API ส่วนหัวจะวัดเป็นองศาจากทิศเหนือจริง โดยที่ส่วนหัววัดตามเข็มนาฬิกาจากทิศเหนือจริง (0 องศา) คุณอาจคํานวณส่วนหัวนี้ระหว่าง 2 ตําแหน่งโดยใช้เมธอด computeHeading() โดยส่งออบเจ็กต์ 2from และ to LatLng รายการ

ในการคํานวณทิศทางที่เฉพาะเจาะจง ตําแหน่งต้นทาง และระยะทางในการเดินทาง (หน่วยเป็นเมตร) คุณสามารถคํานวณพิกัดจุดหมายได้โดยใช้ computeOffset()

หากออบเจ็กต์และค่า LatLng จํานวน 2 รายการมีค่าระหว่าง 0 ถึง 1 คุณอาจคํานวณปลายทางระหว่างออบเจ็กต์เหล่านี้ได้โดยใช้เมธอด interpolate() ซึ่งสามารถหาค่าประมาณการเชิงเส้นเชิงเส้นระหว่างตําแหน่ง 2 ตําแหน่ง โดยค่าจะแสดงระยะทางที่เป็นเศษส่วนให้เดินทางไปตามเส้นทางจากต้นทางไปยังปลายทาง

ตัวอย่างต่อไปนี้สร้างเส้นประกอบ 2 เส้นเมื่อคุณคลิก 2 จุดบนแผนที่ ได้แก่ พื้นที่ทางภูมิศาสตร์ 1 เส้นและ "เส้นตรง" 1 เส้นที่เชื่อมต่อกับทั้ง 2 ตําแหน่ง และคํานวณหัวข้อระหว่างการเดินทางระหว่าง 2 จุด

TypeScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

let marker1: google.maps.Marker, marker2: google.maps.Marker;
let poly: google.maps.Polyline, geodesicPoly: google.maps.Polyline;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 34, lng: -40.605 },
    }
  );

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
    document.getElementById("info") as HTMLElement
  );

  marker1 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 40.714, lng: -74.006 },
  });

  marker2 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 48.857, lng: 2.352 },
  });

  const bounds = new google.maps.LatLngBounds(
    marker1.getPosition() as google.maps.LatLng,
    marker2.getPosition() as google.maps.LatLng
  );

  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, "position_changed", update);
  google.maps.event.addListener(marker2, "position_changed", update);

  poly = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: "#CC0099",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map,
  });

  update();
}

function update() {
  const path = [
    marker1.getPosition() as google.maps.LatLng,
    marker2.getPosition() as google.maps.LatLng,
  ];

  poly.setPath(path);
  geodesicPoly.setPath(path);

  const heading = google.maps.geometry.spherical.computeHeading(
    path[0],
    path[1]
  );

  (document.getElementById("heading") as HTMLInputElement).value =
    String(heading);
  (document.getElementById("origin") as HTMLInputElement).value = String(
    path[0]
  );
  (document.getElementById("destination") as HTMLInputElement).value = String(
    path[1]
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
let marker1, marker2;
let poly, geodesicPoly;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 34, lng: -40.605 },
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
    document.getElementById("info")
  );
  marker1 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 40.714, lng: -74.006 },
  });
  marker2 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 48.857, lng: 2.352 },
  });

  const bounds = new google.maps.LatLngBounds(
    marker1.getPosition(),
    marker2.getPosition()
  );

  map.fitBounds(bounds);
  google.maps.event.addListener(marker1, "position_changed", update);
  google.maps.event.addListener(marker2, "position_changed", update);
  poly = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });
  geodesicPoly = new google.maps.Polyline({
    strokeColor: "#CC0099",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map,
  });
  update();
}

function update() {
  const path = [marker1.getPosition(), marker2.getPosition()];

  poly.setPath(path);
  geodesicPoly.setPath(path);

  const heading = google.maps.geometry.spherical.computeHeading(
    path[0],
    path[1]
  );

  document.getElementById("heading").value = String(heading);
  document.getElementById("origin").value = String(path[0]);
  document.getElementById("destination").value = String(path[1]);
}

window.initMap = initMap;index.js

ดูตัวอย่าง

ลองใช้ตัวอย่าง

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

วิธีการเข้ารหัส

เส้นทางภายใน Maps JavaScript API มักจะระบุเป็นออบเจ็กต์ Array จาก LatLng รายการ อย่างไรก็ตาม การส่งผ่านอาร์เรย์ดังกล่าวมักจะเป็นกลุ่ม คุณอาจใช้อัลกอริทึมการเข้ารหัสโพลีไลน์ของ Google เพื่อบีบอัดเส้นทางที่ระบุแทนได้ ซึ่งสามารถขยายขอบเขตการถอดรหัสได้ในภายหลัง

ไลบรารี geometry มีเนมสเปซ encoding สําหรับยูทิลิตีเพื่อเข้ารหัสและถอดรหัส Polylines

วิธีแบบคงที่ encodePath() จะเข้ารหัสเส้นทางที่ระบุ คุณจะส่งอาร์เรย์ของ LatLng หรือ MVCArray ก็ได้ (ซึ่งแสดงผลโดย Polyline.getPath())

หากต้องการถอดรหัสเส้นทางที่เข้ารหัส ให้เรียก decodePath() ไปยังเมธอดที่ใช้สตริงที่เข้ารหัส

ตัวอย่างต่อไปนี้แสดงแผนที่ของออกซฟอร์ด มิสซิสซิปปี การคลิกที่แผนที่จะเป็นการเพิ่มจุดในเส้นประกอบ เมื่อมีการสร้างเส้นประกอบ การเข้ารหัสจะปรากฏขึ้นที่ด้านล่าง

TypeScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 14,
      center: { lat: 34.366, lng: -89.519 },
    }
  );
  const poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map,
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, "click", (event) => {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(
  latLng: google.maps.LatLng,
  poly: google.maps.Polyline
) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  const encodeString = google.maps.geometry.encoding.encodePath(path);

  if (encodeString) {
    (document.getElementById("encoded-polyline") as HTMLInputElement).value =
      encodeString;
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 34.366, lng: -89.519 },
  });
  const poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map,
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, "click", (event) => {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  const encodeString = google.maps.geometry.encoding.encodePath(path);

  if (encodeString) {
    document.getElementById("encoded-polyline").value = encodeString;
  }
}

window.initMap = initMap;index.js

ดูตัวอย่าง

ลองใช้ตัวอย่าง

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

ฟังก์ชันรูปหลายเหลี่ยมและโพลีไลน์

เนมสเปซของไลบรารีเรขาคณิต poly มีฟังก์ชันสาธารณูปโภค ซึ่งระบุว่าจุดใดจุดหนึ่งอยู่ภายในหรือใกล้กับรูปหลายเหลี่ยมหรือเส้นประกอบ

มีสถานที่ตั้ง()

containsLocation(point:LatLng, polygon:Polygon)

หากต้องการทราบว่าจุดหนึ่งๆ อยู่ในรูปหลายเหลี่ยมหรือไม่ ให้ส่งจุดและรูปหลายเหลี่ยมไปยัง google.maps.geometry.poly.containsLocation() ฟังก์ชันจะแสดงผลเป็น "จริง" หากจุดอยู่ในรูปหลายเหลี่ยมหรืออยู่ที่ขอบของจุด

โค้ดต่อไปนี้จะเขียน "true" ลงในคอนโซลเบราว์เซอร์หากการคลิกของผู้ใช้อยู่ในสามเหลี่ยมที่กําหนดไว้ หรือเขียนว่า "false"

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886, -70.269),
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var bermudaTriangle = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
    ]
  });

  google.maps.event.addListener(map, 'click', function(event) {
    console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

โค้ดอีกเวอร์ชันหนึ่งจะวาดรูปสามเหลี่ยมสีน้ําเงินบนแผนที่หากการคลิกเกิดขึ้นภายในสามเหลี่ยมเบอร์มิวดาและวงกลมสีแดง ไม่เช่นนั้น ให้ทําดังนี้

ดูตัวอย่าง

isLocationOnEdge()

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

หากต้องการทราบว่าจุดจะอยู่ที่เส้นตรงหรือใกล้เส้นประกอบ หรือในหรือใกล้ขอบของรูปหลายเหลี่ยม ให้ส่งจุด รูปหลายเหลี่ยม/รูปหลายเหลี่ยม หรือไม่เพิ่มค่าความอดทนในองศาที่ google.maps.geometry.poly.isLocationOnEdge() ฟังก์ชันจะแสดงผลเป็น "จริง" หากระยะทางระหว่างจุดกับจุดที่ใกล้ที่สุดบนเส้นหรือขอบยังอยู่ในพื้นที่ที่ยอมรับ ค่าความคลาดเคลื่อนเริ่มต้นคือ 10^-9 องศา

function initialize() {
  var myPosition = new google.maps.LatLng(46.0, -125.9);

  var mapOptions = {
    zoom: 5,
    center: myPosition,
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var cascadiaFault = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(49.95, -128.1),
      new google.maps.LatLng(46.26, -126.3),
      new google.maps.LatLng(40.3, -125.4)
    ]
  });

  cascadiaFault.setMap(map);

  if (google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1)) {
    alert("Relocate!");
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

ห้องสมุดเรขาคณิต

ภาพรวม

แนวคิดเรขาคณิตแบบทรงกลม

ฟังก์ชันระยะทางและพื้นที่

ฟังก์ชันการนําทาง

TypeScript

JavaScript

ลองใช้ตัวอย่าง

วิธีการเข้ารหัส

TypeScript

JavaScript

ลองใช้ตัวอย่าง

ฟังก์ชันรูปหลายเหลี่ยมและโพลีไลน์

มีสถานที่ตั้ง()

isLocationOnEdge()