Javascript 谷歌地图多重叠加无累积不透明度
我有一张多个圆圈相互交叉的地图（下面是一个只有两个圆圈的例子，但至少有100个圆圈）。当它们交叉时，不透明度会加倍，所以当我在5到6个圆圈之间交叉时，它的不透明度会变成100% 有没有办法让第二个圆圈不显示在第一个圆圈的上方？事实上，我不这么认为，但也许有人已经预料到了这样的事情 左：我所拥有的------------------------------------------右：我想要的 以防你想玩： 谢谢你的帮助；） 使用可以使重叠不透明度为单个Javascript 谷歌地图多重叠加无累积不透明度,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我有一张多个圆圈相互交叉的地图（下面是一个只有两个圆圈的例子，但至少有100个圆圈）。当它们交叉时，不透明度会加倍，所以当我在5到6个圆圈之间交叉时，它的不透明度会变成100% 有没有办法让第二个圆圈不显示在第一个圆圈的上方？事实上，我不这么认为，但也许有人已经预料到了这样的事情 左：我所拥有的------------------------------------------右：我想要的 以防你想玩： 谢谢你的帮助；） 使用可以使重叠不透明度为单个 var peanut = new goo
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);
用一个多边形绘制多条路径------绘制多个圆 @大卫·斯特拉坎的回答解决了我大部分问题。 以下是此解决方案的一部分：首先，您必须使用此“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;
}
感谢@david strachan的回答。我也有类似的问题，但我的覆盖层是灌溉状的锈菌。以下示例中的省略号仅用于说明问题，但实际光栅是任何形式的形状，但颜色相同：
<!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>
多光栅
html{height:100%}正文{height:100%}
var映射；
函数初始化（）{
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=新的google.maps.GroundOverlay（“scrap.png”，boundaries1）；
rmap1.setMap（map）；
rmap2=新的google.maps.GroundOverlay（“scrap2.png”，boundaries1）；
rmap2.setMap（map）；
}
函数showcov（m，v）{if（v.checked）{m.setOpacity（0）；m.setMap（map）；}else{m.setMap（null）；m.setOpacity（100）；}
有趣的问题和成熟的问题。。我唯一的想法是，你可以考虑将微观几何体合并成一个更大的宏观几何体——在GIS中，我们称之为函数。如果不了解服务器端技术，就很难为您指明方向。您可以在客户端近似地找到一个解决方案，但我认为这将是一个乏味的练习。这非常有效；）唯一的问题是，画完圆后，我检查是否有很多点在里面。对于我以前的版本，多个圆，我只需要使用“circle.contains（LatLng）”并返回200个结果：对于polygon，我尝试了google函数containsLocation，它们都返回了100个结果。我要用你的技巧来显示，用规则的圆圈来检查点。我发布了一个完整的答案，非常感谢：）drawCircle没有定义这个解决方案很好，但我发现多边形并没有精确地映射到圆上，因此有些区域将被视为在该区域内，但实际上不在该区域内。你知道怎么绕开它吗？你认为这是因为圆圈不是完全圆的吗？如果是这样，您可以通过修改drawCircle中的var points=32到64来提高每个多边形的精度？与定期添加圆时绘制的圆相比，该方法是否存在性能问题？似乎这需要反复添加到路径列表中，并在多边形对象上调用setPath，或者有更有效的方法吗？@Michael，我在大约1600个点的路径上使用过它，还没有测量过，但它相当快，只要你每25个点只画一个多边形。这可能不是最漂亮的方式，但它不会花费太多时间，只要是js/用户端，我认为这对你的网站来说不是问题。不确定你说的“每25点画一个多边形”是什么意思。。。你如何挑选？尽管在本主题中，删除已经完全覆盖的圆并不对形状添加任何内容肯定会很有用。
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);
<!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>