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