【问题标题】:Google map multiple overlay no cumulative opacity谷歌地图多重叠加无累积不透明度
【发布时间】:2014-04-18 12:34:00
【问题描述】:

我有一张地图,其中有多个圆圈相互交叉(下面是一个只有两个圆圈的示例,但至少有大约 100 个圆圈)。当它们交叉时,不透明度加倍,所以当我在 5 或 6 个圆圈之间交叉时,它就变成了大约 100% 的不透明度。

有没有办法让第二个圆圈不显示“超过”第一个圆圈?其实不这么认为,但也许有人已经预料到了这样的事情......

LEFT : 我有什么------------------------------ ---- 右:我想要什么

以防万一你想玩: 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);

感谢您的帮助;)

【问题讨论】:

  • 有趣的问题和成熟的问题。 ..我唯一的想法是您可能会考虑将微观几何图形合并到更大的宏观几何图形中——在 GIS 中,我们称之为Dissolve 函数。在不了解您的服务器端技术的情况下,很难为您指明方向。您可以在客户端近似解决方案,但我认为这将是一个乏味的练习。

标签: javascript google-maps google-maps-api-3


【解决方案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;
}

此函数返回路径,因此您可以使用它来构建路径数组,之后您将使用这些路径构建单个 Polygon 对象:

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 函数 containsLocation 和 github.com/tparkin/Google-Maps-Point-in-Polygon)效果不佳,所以我不得不继续使用我的多个圆圈以检查标记是否在我的区域中。

感谢@david strachan 的回答。

【讨论】:

  • 这个解决方案很好,但我发现多边形并没有准确地映射到圆圈上,所以有些区域将被视为在该区域内,但实际上不在该区域内。任何想法如何解决这个问题?
  • 你认为是因为圆圈不是完全圆的吗?如果是这样,也许您可​​以通过在 drawCircle 中修改 var points = 32 到 64 来使每个多边形更精确?
  • 当您定期添加圆圈时,与绘制圆圈相比,该方法是否存在性能问题?似乎这将需要重复添加到您的路径列表并在您的多边形对象上调用 setPath,还是有更有效的方法来做到这一点?
  • @Michael,我在大约 1600 个点的路径上使用它,没有测量它,但它非常快,只要你每 25 个点只绘制一个多边形。这可能不是最漂亮的方式,但它可以在没有太多时间的情况下完成这项工作,而且只要是 js / 用户端,我认为这对您的网站来说不是问题。
  • 不确定你的意思是“每 25 个点画一个多边形”......你如何剔除?尽管在这个主题上,删除已经完全覆盖的圆圈并且不向形状添加任何内容肯定会很有用。
【解决方案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);

【讨论】:

  • 这很好用;)唯一的事情是,在画完圆圈之后,我检查里面是否有很多点。对于我以前的版本,多个圆圈,我只需要使用“circle.contains(LatLng)”并返回 200 个结果:对于多边形,我尝试了谷歌函数 containsLocation 和github.com/tparkin/Google-Maps-Point-in-Polygon,它们都返回了 100 个结果。我将使用您的技巧来显示和常规圆圈来检查点。我正在发布一个完整的答案,非常感谢:)
  • drawCircle 未定义
【解决方案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>

raster1 raster2

【讨论】:

    猜你喜欢
    • 2019-07-26
    • 2015-12-07
    • 2014-02-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-12
    相关资源
    最近更新 更多