เลเยอร์แผนที่ความหนาแน่น

เลือกแพลตฟอร์ม: Android iOS JavaScript
  1. ภาพรวม
  2. โหลดไลบรารีการแสดงภาพ
  3. เพิ่มจุดข้อมูลแบบถ่วงน้ำหนัก
  4. ปรับแต่งเลเยอร์ฮีตแมป

เลเยอร์แผนที่ความหนาแน่นจะแสดงผลแผนที่ความหนาแน่นฝั่งไคลเอ็นต์

ภาพรวม

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

โหลดไลบรารีการแสดงภาพ

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

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

เพิ่มเลเยอร์แผนที่ความหนาแน่น

หากต้องการเพิ่มเลเยอร์ฮีตแมป คุณต้องสร้างHeatmapLayer ออบเจ็กต์ใหม่ก่อน แล้วระบุข้อมูลทางภูมิศาสตร์ในรูปแบบอาร์เรย์หรือออบเจ็กต์ MVCArray[] ข้อมูลอาจเป็นออบเจ็กต์ LatLng หรือออบเจ็กต์ WeightedLocation หลังจากสร้างอินสแตนซ์ของออบเจ็กต์ HeatmapLayer แล้ว ให้เพิ่มออบเจ็กต์ลงใน แผนที่โดยเรียกใช้เมธอด setMap()

ตัวอย่างต่อไปนี้จะเพิ่มจุดข้อมูล 14 จุดลงในแผนที่ซานฟรานซิสโก

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

เพิ่มจุดข้อมูลที่มีการถ่วงน้ำหนัก

ฮีตแมปแสดงผลได้ทั้ง LatLng หรือ WeightedLocation ออบเจ็กต์ หรือทั้ง 2 อย่างรวมกัน ออบเจ็กต์ทั้ง 2 รายการแสดงจุดข้อมูลเดียวบนแผนที่ แต่WeightedLocation ออบเจ็กต์ช่วยให้คุณระบุน้ำหนักสำหรับจุดข้อมูลนั้นเพิ่มเติมได้ การกำหนดน้ำหนักให้กับจุดข้อมูลจะทำให้ WeightedLocation แสดงผลด้วยความเข้มข้นมากกว่าออบเจ็กต์ LatLng ธรรมดา น้ำหนักเป็นสเกลเชิงเส้น ซึ่งแต่ละLatLng ออบเจ็กต์จะมีน้ำหนักโดยนัยเป็น 1 การเพิ่มWeightedLocation ของ {location: new google.maps.LatLng(37.782, -122.441), weight: 3} เพียงรายการเดียวจะมี ผลเช่นเดียวกับการเพิ่ม google.maps.LatLng(37.782, -122.441) 3 ครั้ง คุณสามารถผสมออบเจ็กต์ weightedLocation และ LatLng ในอาร์เรย์เดียวได้

การใช้WeightedLocationแทนLatLngจะมีประโยชน์ในกรณีต่อไปนี้

  • การเพิ่มข้อมูลจำนวนมากในที่เดียว การแสดงผลออบเจ็กต์ WeightedLocation รายการเดียวที่มีน้ำหนัก 1000 จะเร็วกว่าการแสดงผลออบเจ็กต์ LatLng จำนวน 1000 รายการ
  • การเน้นข้อมูลตามค่าที่กำหนดเอง ตัวอย่างเช่น คุณใช้LatLngเมื่อพล็อตข้อมูลแผ่นดินไหวได้ แต่คุณอาจต้องการ ใช้WeightedLocationเพื่อวัดขนาดของแผ่นดินไหวแต่ละครั้งใน มาตราริกเตอร์
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

ปรับแต่งเลเยอร์แผนที่ความหนาแน่น

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

  • dissipating: ระบุว่าฮีตแมปจะจางลงเมื่อซูมหรือไม่ เมื่อ dissipating เป็นเท็จ รัศมีของอิทธิพลจะเพิ่มขึ้นตามระดับการซูมเพื่อ ให้มั่นใจว่าความเข้มของสีจะยังคงอยู่ ณ ตำแหน่งทางภูมิศาสตร์ใดก็ตาม ค่าเริ่มต้นคือ True
  • gradient: การไล่ระดับสีของฮีตแมปที่ระบุเป็นอาร์เรย์ของสตริงสี CSS ระบบรองรับสี CSS3 ทั้งหมด รวมถึง RGBA ยกเว้นสีที่มีชื่อแบบขยายและค่า HSL(A)
  • maxIntensity: ความเข้มสูงสุดของฮีตแมป โดยค่าเริ่มต้น ระบบจะปรับขนาดสีของฮีตแมปแบบไดนามิกตามความหนาแน่นสูงสุดของจุดที่พิกเซลใดก็ตามบนแผนที่ พร็อพเพอร์ตี้นี้ช่วยให้คุณ ระบุค่าสูงสุดคงที่ได้ การตั้งค่าความเข้มสูงสุดอาจเป็นประโยชน์เมื่อ ชุดข้อมูลมีค่าผิดปกติ 2-3 ค่าที่มีความเข้มสูงผิดปกติ
  • radius: รัศมีของอิทธิพลสำหรับจุดข้อมูลแต่ละจุดเป็นพิกเซล
  • opacity: ความทึบแสงของฮีตแมป ซึ่งแสดงเป็นตัวเลขระหว่าง 0 ถึง 1

ตัวอย่างด้านล่างแสดงตัวเลือกการปรับแต่งบางส่วนที่ใช้ได้

ดูตัวอย่าง