เลเยอร์ KML และ GeoRSS

KmlLayer แสดงผลองค์ประกอบ KML และ GeoRSS เป็นการวางซ้อนชิ้นส่วน Maps JavaScript API

ภาพรวม

Maps JavaScript API รองรับรูปแบบข้อมูล KML และ GeoRSS สำหรับการแสดงข้อมูลทางภูมิศาสตร์ รูปแบบข้อมูลเหล่านี้จะแสดงบนแผนที่โดยใช้ออบเจ็กต์ KmlLayer ซึ่งตัวสร้างใช้ URL ของไฟล์ KML หรือ GeoRSS ที่เข้าถึงได้แบบสาธารณะ

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

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

Maps JavaScript API จะแปลงข้อมูล XML ทางภูมิศาสตร์ที่ให้ไว้เป็นการแทนค่า KML ซึ่งแสดงบนแผนที่โดยใช้การวางซ้อนชิ้นส่วน Maps JavaScript API KML นี้มีลักษณะ (และพฤติกรรมบางอย่าง) เหมือนองค์ประกอบการวางซ้อน Maps JavaScript API ที่คุ้นเคย องค์ประกอบ KML <Placemark> และ GeoRSS point จะแสดงผลเป็นเครื่องหมาย เช่น องค์ประกอบ <LineString> จะแสดงผลเป็นโพลีไลน์ ส่วนองค์ประกอบ <Polygon> จะแสดงผลเป็นรูปหลายเหลี่ยม ในทำนองเดียวกัน องค์ประกอบ <GroundOverlay> จะแสดงผลเป็นรูปภาพสี่เหลี่ยมผืนผ้าบนแผนที่ แต่ที่สำคัญ วัตถุเหล่านี้ไม่ใช่ Maps JavaScript API Markers, Polylines, Polygons หรือ GroundOverlays แต่จะแสดงผลเป็นวัตถุเดี่ยวในแผนที่

วัตถุ KmlLayer รายการปรากฏในแผนที่เมื่อตั้งค่าพร็อพเพอร์ตี้ map แล้ว คุณนำบุคคลดังกล่าวออกจากแผนที่ได้โดยโทรไปที่ setMap() ผ่าน null ออบเจ็กต์ KmlLayer จะจัดการการแสดงผลขององค์ประกอบย่อยเหล่านี้ด้วยการดึงข้อมูลฟีเจอร์ที่เหมาะสมสำหรับขอบเขตที่ระบุของแผนที่โดยอัตโนมัติ เมื่อขอบเขตเปลี่ยนไป ฟีเจอร์ในวิวพอร์ตปัจจุบันจะแสดงผลโดยอัตโนมัติ

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

ตัวเลือกเลเยอร์ KML

ตัวสร้าง KmlLayer() เลือกส่ง KmlLayerOptions จำนวนหนึ่ง:

• map ระบุ Map ที่จะแสดงผล KmlLayer คุณซ่อน KmlLayer ได้โดยการตั้งค่านี้เป็น null ภายในเมธอด setMap()
• preserveViewport ระบุว่าไม่ควรปรับแผนที่ตามขอบเขตของเนื้อหาของ KmlLayer เมื่อแสดงเลเยอร์ โดยค่าเริ่มต้น เมื่อแสดง KmlLayer ระบบจะซูมและวางตำแหน่งแผนที่เพื่อแสดงเนื้อหาทั้งหมดของเลเยอร์
• suppressInfoWindows บ่งชี้ว่าฟีเจอร์ที่คลิกได้ภายใน KmlLayer ไม่ควรทริกเกอร์การแสดงออบเจ็กต์ InfoWindow

นอกจากนี้ เมื่อแสดงผล KmlLayer แล้ว จะมีพร็อพเพอร์ตี้ metadata ที่เปลี่ยนแปลงไม่ได้ซึ่งมีชื่อ คำอธิบาย ตัวอย่างข้อมูล และผู้เขียนของเลเยอร์ภายในออบเจ็กต์ KmlLayerMetadata คุณตรวจสอบข้อมูลนี้ได้โดยใช้เมธอด getMetadata() เนื่องจากการแสดงผลของออบเจ็กต์ KmlLayer ต้องใช้การสื่อสารแบบไม่พร้อมกันไปยังเซิร์ฟเวอร์ภายนอก คุณจึงต้องรอรับเหตุการณ์ metadata_changed ซึ่งจะบ่งบอกว่ามีการป้อนข้อมูลพร็อพเพอร์ตี้แล้ว

ตัวอย่างต่อไปนี้สร้าง KmlLayer จากฟีด GeoRSS ที่ระบุ

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

  const georssLayer = new google.maps.KmlLayer({
    url:
      "http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss",
  });
  georssLayer.setMap(map);
}

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 49.496675, lng: -102.65625 },
  });
  const georssLayer = new google.maps.KmlLayer({
    url: "http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss",
  });

  georssLayer.setMap(map);
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

<html>
  <head>
    <title>GeoRSS Layers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

ตัวอย่างต่อไปนี้สร้าง KmlLayer จากฟีด KML ที่ระบุ

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

  const ctaLayer = new google.maps.KmlLayer({
    url: "https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml",
    map: map,
  });
}

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 41.876, lng: -87.624 },
  });
  const ctaLayer = new google.maps.KmlLayer({
    url: "https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml",
    map: map,
  });
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

<html>
  <head>
    <title>KML Layers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

รายละเอียดฟีเจอร์ KML

เนื่องจาก KML อาจมีฟีเจอร์จำนวนมาก คุณจึงเข้าถึงข้อมูลฟีเจอร์จากออบเจ็กต์ KmlLayer โดยตรงไม่ได้ แต่เมื่อฟีเจอร์แสดงขึ้น ฟีเจอร์เหล่านั้นจะแสดงผลให้มีลักษณะเหมือนการวางซ้อน Maps JavaScript API ที่คลิกได้ โดยค่าเริ่มต้น การคลิกฟีเจอร์แต่ละรายการจะแสดง InfoWindow ที่มีข้อมูล KML <title> และ <description> ในฟีเจอร์นั้นๆ นอกจากนี้ การคลิกฟีเจอร์ KML จะสร้าง KmlMouseEvent ซึ่งส่งผ่านข้อมูลต่อไปนี้

• position ระบุพิกัดละติจูด/ลองจิจูดที่จะตรึง InfoWindow สำหรับฟีเจอร์ KML นี้ โดยทั่วไป ตำแหน่งนี้จะเป็นตำแหน่งที่ผู้ใช้คลิกสำหรับรูปหลายเหลี่ยม เส้นประกอบ และ GroundOverlays แต่เป็นที่มาที่แท้จริงของเครื่องหมาย
• pixelOffset แสดงถึงออฟเซ็ตจาก position ข้างต้นเพื่อตรึง "หาง" InfoWindow สำหรับวัตถุรูปหลายเหลี่ยม ปกติออฟเซ็ตนี้จะเท่ากับ 0,0 แต่สำหรับเครื่องหมายจะมีความสูงของเครื่องหมาย
• featureData มีโครงสร้าง JSON ของ KmlFeatureData

ตัวอย่างออบเจ็กต์ KmlFeatureData จะแสดงด้านล่าง

{
  author: {
    email: "nobody@google.com",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

ตัวอย่างต่อไปนี้แสดงข้อความของฟีเจอร์ KML <Description> ภายในด้าน <div> เมื่อมีการคลิกฟีเจอร์

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

  const kmlLayer = new google.maps.KmlLayer({
    url: "https://raw.githubusercontent.com/googlearchive/kml-samples/gh-pages/kml/Placemark/placemark.kml",
    suppressInfoWindows: true,
    map: map,
  });

  kmlLayer.addListener("click", (kmlEvent) => {
    const text = kmlEvent.featureData.description;

    showInContentWindow(text);
  });

  function showInContentWindow(text: string) {
    const sidebar = document.getElementById("sidebar") as HTMLElement;

    sidebar.innerHTML = text;
  }
}

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 37.06, lng: -95.68 },
  });
  const kmlLayer = new google.maps.KmlLayer({
    url: "https://raw.githubusercontent.com/googlearchive/kml-samples/gh-pages/kml/Placemark/placemark.kml",
    suppressInfoWindows: true,
    map: map,
  });

  kmlLayer.addListener("click", (kmlEvent) => {
    const text = kmlEvent.featureData.description;

    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    const sidebar = document.getElementById("sidebar");

    sidebar.innerHTML = text;
  }
}

window.initMap = initMap;
index.js

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 15rem;
  flex-grow: 1;
  padding: 1rem;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 0;
  flex-grow: 4;
  height: 100%;
}
style.css

<html>
  <head>
    <title>KML Feature Details</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <div id="sidebar"></div>
    </div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

ข้อจำกัดด้านขนาดและความซับซ้อนสำหรับการแสดงผล KML

Maps JavaScript API มีข้อจำกัดเกี่ยวกับขนาดและความซับซ้อนของไฟล์ KML ที่โหลด ด้านล่างนี้คือข้อมูลสรุปของขีดจำกัดปัจจุบัน

หมายเหตุ: ขีดจำกัดเหล่านี้อาจเปลี่ยนแปลงได้ทุกเมื่อ

ขนาดไฟล์ใหญ่ที่สุดที่โหลดเข้ามาได้ (KML ดิบ, GeoRSS ดิบหรือ KMZ ที่มีการบีดอัด)

3MB

ขนาดไฟล์ KML สูงสุดที่ไม่มีการบีบอัด

10MB

ขนาดไฟล์สูงสุดที่ไม่ได้บีบอัดในไฟล์ KMZ

500 KB ต่อไฟล์

จำนวนลิงก์เครือข่ายสูงสุด

10 คน

จำนวนสูงสุดของจุดสนใจทั้งหมดที่มีอยู่ในทั้งเอกสาร

1,000 คน

จำนวนเลเยอร์ KML

เราจำกัดจำนวนเลเยอร์ KML ที่แสดงใน Google Maps เดียว หากเกินขีดจำกัดนี้ เลเยอร์ของคุณจะไม่ปรากฏบนแผนที่ และจะมีการรายงานข้อผิดพลาดในคอนโซล JavaScript ของเว็บเบราว์เซอร์ จำนวนสูงสุดนี้ขึ้นอยู่กับจำนวนคลาส KmlLayer ที่สร้างขึ้น และความยาวรวมของ URL ทั้งหมดที่ใช้ในการสร้างเลเยอร์เหล่านั้น KmlLayer ใหม่แต่ละรายการที่คุณสร้างจะใช้พื้นที่ส่วนหนึ่งในขีดจำกัดเลเยอร์ และอีกส่วนหนึ่งเพิ่มเติมของขีดจำกัด ทั้งนี้ขึ้นอยู่กับความยาวของ URL ที่โหลดไฟล์ KML มา ดังนั้น จำนวนเลเยอร์ที่คุณเพิ่มได้จะแตกต่างกันไปตามแอปพลิเคชัน โดยเฉลี่ยแล้วคุณควรโหลดได้ระหว่าง 10 ถึง 20 เลเยอร์โดยไม่เกินขีดจำกัด หากยังถึงขีดจำกัดอยู่ ให้ใช้เครื่องมือย่อ URL เพื่อตัด URL ของ KML ให้สั้นลง หรือสร้างไฟล์ KML เดียวที่ประกอบด้วย NetworkLinks ให้กับ URL ของ KML แต่ละรายการ

ข้อควรพิจารณาด้านประสิทธิภาพและการแคช

เซิร์ฟเวอร์ของ Google จะแคชไฟล์ KML ไว้ชั่วคราวเพื่อลดภาระงานของเซิร์ฟเวอร์ การทำเช่นนี้ยังช่วยปรับปรุงประสิทธิภาพสำหรับผู้ใช้ด้วยการแสดง การแสดงส่วนที่เหมาะสมของไฟล์ KML อย่างมีประสิทธิภาพขณะที่ผู้ใช้คลิก เลื่อน และซูมแผนที่

เพื่อประสิทธิภาพที่ดีที่สุด เราขอแนะนำให้คุณดำเนินการดังนี้

• ใช้แท็ก <expires> ที่เหมาะสมใน KML
  
  KmlLayer จะไม่ใช้ส่วนหัว HTTP เมื่อเลือกวิธีแคชไฟล์ KML
• อย่าสร้างไฟล์แบบไดนามิกในเวลาที่ขอ
  
  แต่ให้สร้างไฟล์ก่อนที่จะจำเป็นต้องใช้ และแสดงไฟล์แบบคงที่แทน หากเซิร์ฟเวอร์ของคุณใช้เวลาในการส่งไฟล์ KML นาน KmlLayer อาจไม่แสดง
• อย่าพยายามข้ามแคชเว้นแต่คุณจะทราบแน่ชัดว่าไฟล์ได้รับการอัปเดตแล้ว
  
  การข้ามแคชทุกครั้ง (เช่น การใส่ตัวเลขสุ่มหรือเวลานาฬิกาของผู้ใช้เป็นพารามิเตอร์การค้นหา) อาจทำให้เซิร์ฟเวอร์ของคุณทำงานหนักเกินไปได้ง่ายๆ หากเว็บไซต์ได้รับความนิยมอย่างกะทันหัน และคุณกำลังแสดงไฟล์ KML ขนาดใหญ่
  
  และอาจทำให้แคชแสดงข้อมูลที่ไม่มีอัปเดตแก่ผู้ใช้ หากนาฬิกาของผู้ใช้ไม่ถูกต้อง และแท็ก <expires> ไม่ได้ตั้งค่าอย่างถูกต้อง
  
  แต่ให้เผยแพร่ไฟล์แบบคงที่ที่อัปเดตแล้วด้วยหมายเลขการแก้ไขใหม่ที่ไม่ต่อเนื่อง และใช้รหัสฝั่งเซิร์ฟเวอร์เพื่ออัปเดต URL ที่ส่งไปยัง KmlLayer แบบไดนามิกด้วยเวอร์ชันปัจจุบัน
• จำกัดการเปลี่ยนแปลงไฟล์ KML ไว้ที่ 1 ครั้งต่อนาที
  
  หากไฟล์ทั้งหมดมีขนาดรวมแล้วมากกว่า 1 MB (ไม่บีบอัด) โปรดจำกัดการเปลี่ยนแปลงไว้ที่ 1 ครั้งต่อ 5 นาที
• เมื่อใช้เซิร์ฟเวอร์ข้อมูลภูมิสารสนเทศ ให้หลีกเลี่ยงการใช้พารามิเตอร์การค้นหาเพื่อจำกัดวิวพอร์ตของเลเยอร์
  
  แต่คุณสามารถจำกัดวิวพอร์ตของแผนที่ด้วยเหตุการณ์ bounds_changed แทนได้ ผู้ใช้จะได้รับเฉพาะฟีเจอร์ที่แสดงได้โดยอัตโนมัติเท่านั้น
  
  หากเซิร์ฟเวอร์ข้อมูลภูมิสารสนเทศมีข้อมูลจำนวนมาก ให้ลองใช้ชั้นข้อมูลแทน
• เมื่อใช้เซิร์ฟเวอร์ข้อมูลเชิงพื้นที่ ให้ใช้ KmlLayer หลายรายการสำหรับกลุ่มฟีเจอร์แต่ละกลุ่มที่ต้องการอนุญาตให้ผู้ใช้สลับโหมดได้ แทนที่จะใช้ KmlLayer รายการเดียวที่มีพารามิเตอร์การค้นหาต่างกัน
• ใช้ไฟล์ KMZ ที่บีบอัดเพื่อลดขนาดไฟล์
• หากคุณใช้ Google Cloud Storage หรือโซลูชันพื้นที่เก็บข้อมูลระบบคลาวด์อื่น ให้หลีกเลี่ยงการใช้ฟีเจอร์ต่างๆ เช่น URL ที่ลงนามหรือโทเค็นชั่วคราวเพื่อบังคับใช้การควบคุมการเข้าถึง ซึ่งอาจป้องกันการแคชโดยไม่ได้ตั้งใจ
• ลดความแม่นยำของจุดทั้งหมดให้เป็นความแม่นยำที่เหมาะสม
• ผสานและทำให้เรขาคณิตของฟีเจอร์ที่คล้ายกันง่ายขึ้น เช่น รูปหลายเหลี่ยมและโพลีไลน์
• นำองค์ประกอบหรือทรัพยากรรูปภาพที่ไม่ได้ใช้ออก
• นำองค์ประกอบที่ไม่รองรับออก

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

องค์ประกอบ KML ที่รองรับ

Maps JavaScript API รองรับองค์ประกอบ KML ต่อไปนี้ ปกติแล้ว โปรแกรมแยกวิเคราะห์ KML จะละเลยแท็กที่โปรแกรมไม่เข้าใจโดยไม่มีผลอะไร

• หมุด
• ไอคอน
• โฟลเดอร์
• HTML ที่สื่อความหมาย—การแทนที่เอนทิตีผ่าน <BalloonStyle> และ <text>
• KMZ (KML ที่มีการบีบอัด รวมถึงรูปภาพที่แนบมา)
• โพลีไลน์และรูปหลายเหลี่ยม
• ลักษณะของโพลีไลน์และรูปหลายเหลี่ยม รวมถึง สี สีเติม และความโปร่งแสง
• ลิงก์ของเครือข่ายเพื่อนำเข้าข้อมูลแบบไดนามิก
• Ground Overlay และ Screen Overlay

ตารางต่อไปนี้จะแสดงรายละเอียดทั้งหมดขององค์ประกอบ KML ที่สนับสนุน