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

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

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

ดูตัวอย่าง