ชั้นแผนที่ความหนาแน่น

1. ภาพรวม
2. โหลดไลบรารีการแสดงข้อมูลผ่านภาพ
3. เพิ่มจุดข้อมูลแบบถ่วงน้ำหนัก
4. ปรับแต่งเลเยอร์แผนที่ความหนาแน่น

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

ภาพรวม

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

โหลดไลบรารีการแสดงข้อมูลผ่านภาพ

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

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

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

ดูตัวอย่าง