2013-01-22 18 views
12

मैं गूगल एपीआई v3 के साथ एक हीटमैप बनाने रहा हूँ पर नहीं आधारित है। मैं एक उदाहरण दूंगा। आइए भूकंप के परिमाण पर विचार करें। मैं अपनी परिमाण निर्दिष्ट करने के लिए प्रत्येक बिंदु पर भार निर्दिष्ट करता हूं। हालांकि जब आप ज़ूम आउट करते हैं तो Google बिंदुओं की घनत्व को मानता है। अधिक अंक एक जगह पर हैं, यह redder यह हो जाता है। उदाहरण के लिए यदि दो धरती एक-दूसरे के मील के भीतर होती हैं, एक परिमाण 3 और दूसरा परिमाण 8 के साथ, पहला व्यक्ति हरा/नीला होना चाहिए और दूसरा एक लाल होगा। लेकिन एक बार जब आप ज़ूम आउट करते हैं और नक्शे में दो बिंदु करीब आते हैं, तो Google मानचित्र वजन के बजाए अंक की संख्या मानते हैं और नतीजतन, यह पढ़ता प्रतीत होता है। मैं इसे औसत i.e. (3 + 8)/2=5.5 ... जो भी रंग दर्शाता है वह होना चाहता हूं। क्या यह संभव है?हीटमैप औसत वजन पर और डेटा बिंदुओं की संख्या

उत्तर

1

पर एक बहुत अच्छा खुला स्रोत उदाहरण यह उदाहरण नक़्शे पर एक परत के रूप में हीटमैप का उपयोग करता है, आशा है कि यह मदद करता है: http://maps.forum.nu/v3/gm_customTiles.html

2

परिभाषा के द्वारा एक हीटमैप बिंदु घनत्व के साथ-साथ वजन प्रत्येक बिंदु करने के लिए सौंपा समझता है। कम से कम Google का ताप नक्शा इस तरह से काम करता है जहां तक ​​मुझे उनके साथ काम करने से पता है। तो आपको वास्तव में जो चाहिए वह एक हीटमैप नहीं है बल्कि बिंदुओं का एक मानचित्र है कि वे मूल्य के आधार पर रंगीन होंगे।

मैं भी अनुपात घनत्व/वजन बदलने के लिए है कि गूगल के हीटमैप आदेश नक्शा रंग करने के लिए में ध्यान में रखना, लेकिन मैं किसी भी तरह से नहीं मिला की जरूरत है। वर्तमान में हीटमैप का मुख्य कारक घनत्व है और वजन में परिवर्तन रंग पर कम प्रभाव डालता है। https://github.com/pa7/heatmap.js

एक भी देशांतर/अक्षांश बिंदु पर एक औसत प्राप्त करने के लिए मैं PointCount स्टोर करने के लिए _organiseData समारोह संशोधित और है:

2

एक आंशिक समाधान के रूप में, मैं heatmap.js निम्नलिखित परियोजना से संशोधित कर लिया है प्रत्येक एक्स, वाई स्थिति के लिए प्वाइंटसम; और इन मानों के साथ मुझे एक बिंदु पर औसत मिलता है:

स्टोर [x] [y] = storePointSum [x] [y]/storePointCount [x] [y];

मैं अभी भी बाहर काम कर रहा हूँ कई एक्स, वाई coords विभिन्न मानचित्र प्रस्तावों पर स्टैक हो जाते ... अगर मैं यह पता लगा कि मैं इसे पोस्ट करेंगे कैसे "मिश्रण" संशोधित करने के लिए।

चियर्स

~ हारून

+1

*** अद्यतन *** ऐसा लगता है कि "additive अल्फा सम्मिश्रण" का इस्तेमाल किया एचटीएमएल कल्पना द्वारा परिभाषित किया गया है (और नियंत्रित), और यह है कि क्या मौलिक रंग इस विशेष गर्मी में तैयार निर्धारित करता है नक्शा- और शायद अधिकतर इसकी उच्च प्रदर्शन प्रकृति के कारण। दुर्भाग्य से मैं "औसत ढाल अल्फा-मिश्रण" करने का कोई तरीका नहीं ढूंढ पाया; संदर्भ सेटिंग globalCompositeOperation आशाजनक लग रहा था, लेकिन यह केवल पारंपरिक मिश्रणों का समर्थन करने के लिए प्रतीत होता है। क्या कोई इसे आगे खोजना चाहता है, पर्यवेक्षक के लिए दो महत्वपूर्ण कार्य _drawAlpha और _getPointTemplate हैं। –

3

कुछ हद तक एक सभ्य वैकल्पिक हल नहीं है अगर तुम मुझे पसंद कर रहे हैं और प्रसंस्करण समय या शक्ति एक उपरिशायी उत्पन्न करने के लिए नहीं है और आप के लिए किसी भी मौजूदा पुस्तकालयों संशोधित नहीं कर सकते आपकी पसंद

मैं गलत पर गूगल मैप्स हीटमैप पुस्तकालय और maxIntensity सेट और नष्ट किया करते थे। अधिकतम चयन को आपके चयन के मूल्य पर सेट करने से आपके हीटमैप-पॉइंट की समस्या हल हो जाएगी जो 0 या एक सेट मान के बजाय एक दूसरे के संबंध में रंग हो रही है। झूठी को अपनाने की सेटिंग स्वचालित त्रिज्या सेटिंग्स को अक्षम कर देगी जो तब होता है जब आप ज़ूम स्तर बदलते हैं।

अगला मैं हर बार ज़ूम स्तर बदल के लिए एक घटना है और जो उस स्थिति में मैं एक मूल्य है कि कि ज़ूम स्तर के लिए सबसे सही तरीका में अपने डेटा का प्रतिनिधित्व करने लग रहा था के लिए त्रिज्या सेट।

अब समस्या से छुटकारा पाने के लिए जहां नक्शा मिश्रण पर डेटापॉइंट्स और एक बड़े लाल ब्लॉब में एक साथ जोड़ा जाए, मैंने अपने ज़ूम स्तर पर प्रत्येक ज़ूम स्तर के लिए एक अलग ग्रिड बनाने का फैसला किया।मैं एक ही ग्रिड बिंदु के अंदर बॉक्स किए गए सभी मानों का औसत करता हूं और यह सुनिश्चित करता हूं कि ग्रिड ओवरलैपिंग से हीटमैप पॉइंट्स को रखने के लिए काफी बड़ा है, लेकिन सर्कल के गुच्छा की तरह दिखने के लिए पर्याप्त छोटा नहीं है। (मैंने पाया कि ग्रिड चिकनी दिखने के लिए मानचित्र पर गर्मी बिंदु त्रिज्या के आकार के लगभग 0.4 गुना होना चाहिए)।

हीटमैप बिंदु का त्रिज्या Google द्वारा पिक्सेल में सेट किया गया है। मुझे नहीं पता था कि पिक्सल को लेट/लांग में कैसे परिवर्तित किया जाए, इसलिए मैंने इसे एक निश्चित त्रिज्या के साथ एक सर्कल के पीछे रेखाओं को रेखांकित करके मापा और इन पंक्तियों के बीच की दूरी को माप लिया। यदि आप एक छोटे से देश से ज्यादा मैपिंग करने की योजना नहीं बना रहे हैं तो वह रूपांतरण विधि बहुत अच्छी तरह से काम करेगी।

प्रदर्शन के अनुसार यह उतना बुरा नहीं है जितना मैंने सोचा था। मैं लगभग 2300 अंक लोड कर रहा हूं और मैप लोड जितना तेज़ी से करता है, इससे पहले कि मैंने प्रत्येक ज़ूम स्तर के लिए ग्रिड बनाया हो, और आप ज़ूम स्तर को बदलते समय डेटा पॉइंट रीफ्रेश नहीं करते हैं।

map.heatmap.set('maxIntensity', 12000); 
map.heatmap.set('dissipating', false); 

ग्रिड बदलें और ज़ूम स्तर प्रति त्रिज्या:

map._on({ 
    obj: map.gMap, 
    event: "zoom_changed", 
    callback: function(){ 
     var zoomLevel = map.zoom(); 
     switch(zoomLevel){ 
      case 7: 
       map.heatmap.setData(gridData[zoomLevel]); 
       map.heatmap.set('radius', 0.04); 
       break; 
      case 8: 
       map.heatmap.setData(gridData[zoomLevel]); 
       map.heatmap.set('radius', 0.03); 
       break; 
      case 9: 
       map.heatmap.setData(gridData[zoomLevel]); 
       map.heatmap.set('radius', 0.02); 
       break; 
      case 10: 
       map.heatmap.setData(gridData[zoomLevel]); 
       map.heatmap.set('radius', 0.01); 
       break; 
      case 11: 
       map.heatmap.setData(gridData[zoomLevel]); 
       map.heatmap.set('radius', 0.005); 
       break; 
      case 12: 
       map.heatmap.setData(gridData[zoomLevel]); 
       map.heatmap.set('radius', 0.0025); 
       break; 
      case 13: 
       map.heatmap.setData(gridData[zoomLevel]); 
       map.heatmap.set('radius', 0.00225); 
       break; 
      default: 
       map.heatmap.setData(gridData[zoomLevel]); 
       map.heatmap.set('radius', 0.000625); 
     } 
    } 
}); 

मेरे ग्रिड में उत्पन्न कर रहे हैं

मानचित्र सेटिंग्स:

यहाँ ऊपर के सभी के लिए कोड के कुछ टुकड़े हैं PHP जो शायद सभी के लिए अलग दिखाई देगा, लेकिन एक उदाहरण के रूप में, यहां मैं जिस फ़ंक्शन का उपयोग करता हूं:

function getHeatGrid($gridSize){ 
$mapGrid = false; 
$mapData = false; 
$radius = $gridSize * 2.8 * 0.3; //grid size is multiplied by 2.8 to convert from the heat map radius to lat/long values(works for my lat/long, maybe not yours). * 0.3 is arbitrary to avoid seeing the grid on the map. 
$string = file_get_contents("mapData.json"); 
$json_a = json_decode($string, true); 

forEach($json_a as $key => $value){ 
    $row = intval(round(($value['center_longitude']/$radius))); 
    $column = intval(round(($value['center_latitude']/$radius)/68*111)); //around 52.0;5.0 latitude needs to be scaled to make a square grid with the used longitude grid size 
    if(isset($mapGrid[$row][$column])){ 
     $mapGrid[$row][$column] = round(($value['solarValue'] + $mapGrid[$row][$column])/2); 
    } else { 
     $mapGrid[$row][$column] = $value['solarValue']; 
    } 
} 

forEach($mapGrid as $long => $array){ 
    forEach($array as $lat => $weight){ 
     $mapData[] = array(
      "center_longitude" => $long * $radius, 
      "center_latitude" => ($lat * $radius)/111*68, 
      "solarValue" => $weight 
     ); 
    } 
} 
return $mapData; 
} 

दुर्भाग्य से मैं अभी इस मानचित्र को प्रदर्शित नहीं कर सकता क्योंकि यह वर्तमान में कंपनी के ग्राहकों के लिए निजी रखा गया है, लेकिन यदि यह सार्वजनिक रूप से उपलब्ध हो जाता है तो मैं एक लिंक जोड़ूंगा ताकि आप देख सकें कि यह विधि कितनी अच्छी तरह से काम करती है ।

उम्मीद है कि यह किसी की मदद करेगा।

लुकास

संबंधित मुद्दे