谷歌地图多重叠加没有累积透明度

Question

我有一个包含多个圆的地图（下面是一个仅包含两个圆的示例，但至少有100个圆）。当它们相交时，不透明度会增加一倍，所以当我在5或6个圆之间相交时，它就变成了约100％的不透明度。

是否有一种方法可以使第二个圆不显示在第一个圆上方？实际上我认为没有，但也许有人已经考虑过这样的问题...

左边：我现在拥有的内容----------------------------------------------右边：我想要的内容 如果您想尝试： 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);

感谢您的帮助 ;)

谢谢您的协助；）

- Pierre Granger

---

有趣的问题和深入的提问。我的想法是您可以考虑将微观几何图形合并为更大的宏观几何图形--在GIS中，我们称之为Dissolve函数。不知道您使用的服务器端技术，很难指导您方向。您可以在客户端近似解决方案，但我认为这将是一个繁琐的练习。 - elrobis

Answer 1

使用一个多路径绘制的多边形 ---------- 绘制多个圆

@david strachan的答案解决了我问题的很大一部分。 这是他的解决方案的一部分：你必须首先使用这个“drawCircle”函数，而不是Google Maps 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的回答。

- Pierre Granger

---

你认为这是因为圆不完全是圆的缘故吗？如果是这样，也许你可以通过在drawCircle中将变量点数从32修改为64来使每个多边形更精确。 - Pierre Granger

与绘制圆形相比，如果您经常添加圆形，这种方法是否存在性能问题？看起来这将需要不断向路径列表中添加内容并在多边形对象上调用setPath，还是有更有效的方法可以做到这一点？ - Michael

@Michael，我在大约1600个点的路径上使用它，没有测量过，但速度相当快，只要每25个点绘制一个多边形。这可能不是最美观的方法，但只需不花费太多时间就可以完成工作，只要它是js /用户端，我认为这对您的网站不是问题。 - Pierre Granger

不确定您所说的“每25个点绘制一个多边形”是什么意思...您如何剔除？尽管在这个话题上，删除完全重叠且对形状没有任何贡献的圆形肯定会很有用。 - Michael

嘿，@ninjacoder，你的问题解决了吗？我也有同样的问题，当我们有偶数个重叠的圆时，单击事件不起作用。 - James Dullat

Answer 2

使用Polygon class，您可以使重叠的不透明度为单一值。

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

- david strachan

---

这个完美运作 ;) 唯一的问题是，在画圆之后，我要检查许多点是否在圆内。在我的以前版本中，使用“circle.contains(LatLng)”就可以返回200个结果：对于多边形，我尝试了谷歌函数containsLocation和https://github.com/tparkin/Google-Maps-Point-in-Polygon，它们都返回了100个结果。我将使用您的技巧来显示和正常圆来检查点。我会发布一个完整的答案，非常感谢 :) - Pierre Granger

drawCircle未定义。 - Michael

对于所有想知道的人，你可以在 Pierre Granger 的答案中找到 drawCircle 函数。 - Splitframe

Answer 3

我有一个类似的问题，但我的叠加层是不规则形状的光栅图像。以下示例中的椭圆只是为了演示问题，但实际的光栅图像可以是任何形状，但颜色都相同：

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

光栅1 光栅2

- nacef