2014-04-18 9 views
7

मुझे एक दूसरे के पार एक से अधिक मंडलियों के साथ एक नक्शा मिला है (भाई केवल दो के साथ एक उदाहरण है लेकिन यह कम से कम 100 मंडल है)। जब वे पार करते हैं, अस्पष्टता दोगुना हो जाती है, इसलिए जब मेरे पास 5 या 6 सर्कल के बीच एक क्रॉस होता है तो यह लगभग 100% अस्पष्टता बन जाता है।Google मानचित्र एकाधिक ओवरले कोई संचयी अस्पष्टता

क्या दूसरा सर्कल पहले "ओवर" को दिखाने की अनुमति देने का कोई तरीका नहीं है? असल में ऐसा नहीं लगता है लेकिन शायद किसी ने पहले से ही इस तरह की उम्मीद की है ...

LEFT: मेरे पास क्या है ----------------------- ----------------------- सही: मैं क्या चाहते Left : what i have, right : what i want

बस मामले में आप चाहते हैं खेलने: http://jsfiddle.net/ZWt6w/

var populationOptions = { 
     strokeWeight: 0, 
     fillColor: '#FF0000', 
     fillOpacity: 0.5, 
     map: map, 
     center: citymap[city].center, 
     radius: citymap[city].population 
    }; 
    // Add the circle for this city to the map. 
    cityCircle = new google.maps.Circle(populationOptions); 

आपकी मदद के लिए धन्यवाद;)

+1

दिलचस्प समस्या और अच्छी तरह से विकसित सवाल। ..मैं केवल सोचा था कि आप माइक्रो ज्यामिति को एक बड़े मैक्रो ज्यामिति में विलय करने पर विचार कर सकते हैं - जीआईएस में हम इसे एक [डिसोल्व] (http://wiki.gis.com/wiki/index.php/Dissolve) कहते हैं। समारोह। अपनी सर्वर-साइड टेक्नोलॉजीज को जानने के बिना आपको दिशा में इंगित करना मुश्किल है। आप एक समाधान क्लाइंट-साइड का अनुमान लगा सकते हैं, लेकिन मुझे लगता है कि यह एक कठिन अभ्यास होगा। – elrobis

उत्तर

6
एक बहुभुज अनेक पथों के साथ आकर्षित के साथ

---------- गुणकों हलकों के साथ तैयार की After/Before

@ दाऊद स्ट्रेचन जवाब मेरे सवाल का एक बड़ा हिस्सा हल । यहाँ इस समाधान का एक हिस्सा है:

function drawCircle(point, radius, dir) 
{ 
    var d2r = Math.PI/180; // degrees to radians 
    var r2d = 180/Math.PI; // radians to degrees 
    var earthsradius = 3963; // 3963 is the radius of the earth in miles 
    var points = 32; 

    // find the raidus in lat/lon 
    var rlat = (radius/earthsradius) * r2d; 
    var rlng = rlat/Math.cos(point.lat() * d2r); 

    var extp = new Array(); 
    if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the 
    else{var start=points+1;var end=0} 
    for (var i=start; (dir==1 ? i < end : i > end); i=i+dir) 
    { 
     var theta = Math.PI * (i/(points/2)); 
     ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
     ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
     extp.push(new google.maps.LatLng(ex, ey)); 
    } 
    return extp; 
} 

इस समारोह पथ देता है, तो आप इसे उपयोग कर सकते हैं एक सरणी buid करने: पहले आप इस "drawCircle" समारोह के बजाय गूगल मैप्स एपीआई V3 के सर्किल वस्तु का उपयोग करना चाहिए के रास्ते जो आप एक ही बहुभुज वस्तु का निर्माण करने के बाद का उपयोग करेगा:

var polys = [] ; 
$(xml).find("trkpt").each(function() { // Parsing every points of my track 
    var p = new google.maps.LatLng($(this).attr("lat"), $(this).attr("lon")); 
    points.push(p); 
    if ((i++ % 10) == 0) // Only display a circle every 10 points 
    { 
     polys.push(drawCircle(p,radius/1609.344,1)) ; // Radius value is in meters for me, so i divide to make it in miles 
    } 
}); 


peanutcircle = new google.maps.Polygon({ 
    paths: polys, 
    strokeOpacity: 0, 
    strokeWeight: 0, 
    fillColor: color, 
    fillOpacity: 0.35, 
}); 
peanutcircle.setMap(map); 

और यह सब है, तो आप एक जटिल है, लेकिन एक बहुभुज, शायद आसान उपयोग करने के लिए तैयार हो जाता है।

केवल मेरे लिए समस्या यह है कि इस एकल बहुभुज में निहित मार्करों की जांच करना (Google फ़ंक्शन में स्थान और github.com/tparkin/Google-Maps-Point-in-Polygon) अच्छा काम नहीं कर रहा है, इसलिए मुझे उपयोग करना जारी रखना पड़ा मेरे गुणक मंडल यह जांचने के लिए कि मेरे क्षेत्र में मार्कर हैं या नहीं।

उनके उत्तर के लिए @ डेविड स्ट्रैंचन धन्यवाद।

+0

यह समाधान अच्छा है लेकिन मुझे पता चला है कि बहुभुज बिल्कुल सर्किल पर मैप नहीं करता है, इसलिए कुछ ऐसे क्षेत्र हैं जो भीतर होने के रूप में दिखाई देंगे क्षेत्र लेकिन वास्तविकता में क्षेत्र के भीतर नहीं हैं। कोई विचार है कि उसके आसपास कैसे जाना है? – ninjacoder

+0

क्या आपको लगता है कि सर्कल की वजह से यह बिल्कुल सही नहीं है? यदि ऐसा है तो आप DrawCircle में var points = 32 से 64 को संशोधित करके प्रत्येक बहुभुज को अधिक सटीक बना सकते हैं? –

+0

जब आप नियमित रूप से मंडलियों को जोड़ रहे होते हैं तो सर्कल ड्राइंग की तुलना में दृष्टिकोण में कोई प्रदर्शन समस्या होती है? ऐसा लगता है कि बार-बार आपकी पथ सूची में जोड़ने और आपके पॉलीगॉन ऑब्जेक्ट पर सेटपैथ को कॉल करने की आवश्यकता होगी, या ऐसा करने का एक और अधिक प्रभावी तरीका है? – Michael

7

Polygon class का उपयोग करके आप ओवरलैप अस्पष्टता प्राप्त कर सकते हैं चिमनी के पास।

enter image description here

var peanut = new google.maps.Polygon({ 
       paths: [drawCircle(citymap['chicago'].center, citymap['chicago'].population/3000, 1),//division by 3000 to suit 
         drawCircle(citymap['losangeles'].center,citymap['losangeles'].population/3000, 1)], 
       strokeColor: "#ff0000", 
       strokeOpacity: 0.35, 
       strokeWeight: 0, 
       fillColor: "#FF0000", 
       fillOpacity: 0.35 
    }); 
    peanut.setMap(map); 
+0

यह पूरी तरह से काम करता है;) केवल एक चीज है, मंडलियों को चित्रित करने के बाद, मैं जांचता हूं कि उनके अंदर कई बिंदु हैं या नहीं।मेरे पिछले संस्करण, एकाधिक मंडलियों के साथ, मुझे बस "circle.contains (LatLng)" का उपयोग करना पड़ा और 200 परिणाम लौटाए: बहुभुज के साथ, मैंने Google फ़ंक्शन को स्थानांतरित करने की कोशिश की है और https://github.com/tparkin/Google-Maps-Point पॉलीगॉन में, वे दोनों 100 परिणाम लौटे। मैं अंक की जांच करने के लिए अपनी चाल का उपयोग करने और नियमित सर्कल का उपयोग करने जा रहा हूं। मैं एक पूरा उत्तर पोस्ट कर रहा हूं, आपको बहुत धन्यवाद :) –

+0

drawCircle को परिभाषित नहीं किया गया है – Michael

0

मुझे एक ही समस्या है, लेकिन मेरे ओवरले सिंचित आकार जंगली हैं। निम्न उदाहरण में ellips सिर्फ मुद्दा प्रदर्शित करने के लिए कर रहे हैं, लेकिन वास्तविक rasters किसी भी रूप के आकार, लेकिन सभी एक ही रंग के होने हैं:

<!DOCTYPE html><html><head> 
<title>Multi-Raster</title> 
<style type="text/css">html { height: 100% }body { height: 100%}</style> 
<script language="javascript" type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript"> 
var map; 
function initialize() { 
var coord = new google.maps.LatLng(45.4931831359863,-73.6133499145508); 
var myOptions = {zoom: 10,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP}; 
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng(44.59386,-74.89627), new google.maps.LatLng(46.39251,-72.33043)); 
rmap1 =new google.maps.GroundOverlay("scrap.png", boundaries1); 
rmap1.setMap(map); 
rmap2 =new google.maps.GroundOverlay("scrap2.png", boundaries1); 
rmap2.setMap(map); 
} 
function showcov(m,v){if(v.checked) {m.setOpacity(0);m.setMap(map); }else {m.setMap(null);m.setOpacity(100);}} 
</script></head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%;height:100%"></div> 
</form></td></tr></table></div></body></html> 

raster1 raster2

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