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

เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

ภาพรวม

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

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

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

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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) สามครั้ง คุณรวมออบเจ็กต์ 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

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

ดูตัวอย่าง