谷歌地圖多次套印不累積不透明度

我有多個圈相互交叉的地圖（波紋管是僅有的兩個例子，但它至少是約100圈）。當它們交叉時，不透明度增加一倍，所以當我在5或6個圓圈之間交叉時，它會變成大約100％的不透明度。谷歌地圖多次套印不累積不透明度

有沒有一種方法可以讓使不顯示「過」的第一個第二圓？其實一個不這麼認爲，但也許有人已經預料到這樣的事情...

LEFT：我有什麼----------------------- ----------------------- RIGHT：我想要什麼 Left : what i have, right : what i want

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);

感謝您的幫助;）

來源

2014-04-18 Pierre Granger

有趣的問題和發達的問題。 ..我唯一的想法是你可能會考慮將微觀幾何體合併爲一個更大的宏觀幾何體 - 在GIS中我們稱之爲[Dissolve]（http://wiki.gis.com/wiki/index.php/Dissolve）功能。在不知道服務器端技術的情況下，很難指出你的方向。你可以近似解決客戶端，但我認爲這將是一個乏味的練習。 – elrobis

用一個多邊形繪製多個路徑----------隨着倍數圈畫 After/Before

@大衛斯特拉坎回答解決了我的問題的一個重要組成部分。下面是該解決方案的一部分：首先你必須用這種「畫圓」的功能，而不是谷歌地圖API V3的Circle對象：

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; 
}

該函數返回的路徑，所以你可以用它來打造專業化的數組路徑至極後你將用它來建立一個單一的多邊形對象：

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);

，這是所有的，你已經開出複雜的，但單個多邊形，可能更容易使用。

對我來說唯一的問題是，檢查包含在這個單一的多邊形（與谷歌函數containsLocation和github.com/tparkin/Google-Maps-Point-in-Polygon）包含的標記是行不通的，所以我不得不繼續使用我的倍數圈子檢查標記是否在我的區域。

感謝@david strachan他的回答。

來源

2014-04-22 08:49:19

這個解決方案是好的，但我發現，多邊形不能精確地映射到社交圈，以免有將被看作是內部分地區該地區但實際上並不在該地區內。任何想法如何解決這個問題？ – ninjacoder

你認爲這是因爲這個圓圈不是完全圓形的嗎？如果是這樣，也許可以通過在drawCircle中修改var points = 32到64來使每個多邊形更加精確？ –

當您定期添加圓圈時，與圓形繪圖相比，此方法是否存在任何性能問題？好像那將需要多次添加到您的路徑列表和多邊形對象上調用的setpath，或者是有一個更有效的方式來做到這一點？ – Michael

使用Polygon class你可以得到的重疊不透明度爲S英格爾。

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);

來源

2014-04-18 20:42:58

這是完美的;）唯一的是，繪製圓圈後，我檢查是否有很多點在它們內部。與我以前的版本，多圈，我不得不用「circle.contains（經緯度）」，並返回200個結果：與多邊形，我想谷歌的功能containsLocation和https://github.com/tparkin/Google-Maps-Point -in-Polygon，他們都返回了100個結果。我要用你的伎倆來顯示和定期檢查點。我張貼一個完整的答案，謝謝你多少:) –

畫圓沒有定義 – Michael

我有類似的問題，但我的覆蓋是irrigular形狀rusters。在下面的例子中的橢圓。只是證明這個問題，但實際的柵格是任何形式的形狀，而是讓所有相同的顏色：

<!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

來源

2017-10-02 20:37:13 nacef

谷歌地圖多次套印不累積不透明度

回答

相關問題