编辑：

Question

我想绘制一个由一个具有一定直径的圆形和一个具有相同中心但不太宽和长的矩形组成的形状。

示例是此图片右上角的灰色形状：http://nl.ivao.aero/extern/pictures/AIRSP004.jpg

现在我显然可以在彼此的顶部使用单独的圆形和矩形，但这不会产生我正在寻找的结果，因为重叠的部分会有双重不透明和/或丑陋的边框内部重叠部分。

是否有可能创建这样一个复杂的＆＃34;外形/多边形？还是一种假装它而没有上述双重不透明问题的方法？

编辑：

这是我提出的代码，完全基于Dr.Molle的答案。

var CTRs = [{
    name: 'Eelde CTR',
    segments: [{
        type: 'point',
        coords: {"lat":53.041097,"lng":6.271475}
    },{
        type: 'curve',
        start: {"lat":53.105131,"lng":6.406608},
        end: {"lat":53.223394,"lng":6.658117},
        center: {"lat":53.125000,"lng":6.583333},
        radius: 6.5
    },{
        type: 'point',
        coords: {"lat":53.286983,"lng":6.794394}
    },{
        type: 'point',
        coords: {"lat":53.208306,"lng":6.896883}
    },{
        type: 'curve',
        start: {"lat":53.144606,"lng":6.760219},
        end: {"lat":53.026556,"lng":6.508892},
        center: {"lat":53.125000,"lng":6.583333},
        radius: 6.5
    },{
        type: 'point',
        coords: {"lat":52.962414,"lng":6.373378}
    }]
}];

function drawCTRs()
{
    for ( var i = 0; i < CTRs.length; i++ )
    {
        drawAirspace(CTRs[i]);
    }
}

function circleSegment(start, end, center, radius, points)
{
    points = points || 180;
    var a = [];
    var startHeading    = ( google.maps.geometry.spherical.computeHeading(center, start) + 360 ) % 360;
    var endHeading      = ( google.maps.geometry.spherical.computeHeading(center, end) + 360 ) % 360;
    var heading         = startHeading;
        radius         *= 1852;

    var headingIncr     = Math.abs((((endHeading - startHeading) + 360) % 360) / points);

    for ( var i = 0; i < points; i++, heading += headingIncr )
    {
        heading = heading % 360;
        a.push(new google.maps.geometry.spherical.computeOffset(center, radius, heading));
    }

    return a;
}

function drawAirspace( airspace )
{
    var path = [];
    for ( var i = 0; i < airspace.segments.length; i++ )
    {
        if ( airspace.segments[i].type == 'point' )
        {
            path.push(new google.maps.LatLng(airspace.segments[i].coords.lat, airspace.segments[i].coords.lng));
        } else if ( airspace.segments[i].type == 'curve' )
        {
            path = path.concat(circleSegment(
                new google.maps.LatLng(airspace.segments[i].start.lat, airspace.segments[i].start.lng),
                new google.maps.LatLng(airspace.segments[i].end.lat, airspace.segments[i].end.lng),
                new google.maps.LatLng(airspace.segments[i].center.lat, airspace.segments[i].center.lng),
                airspace.segments[i].radius,
                100
            ));
        }
    }

    var airspaceOverlay = new google.maps.Polygon({
        paths: path,
        map: map,
        title: airspace.name,
        strokeColor: '#770000',
        strokeWeight: 2,
        fillColor: '#770000',
        fillOpacity: .2
    })
}

Answer 1

首先，你需要让圆圈的点能够创建一个看起来像圆圈的多边形（参见：How to draw a circle using polygon in GoogleMaps）

基于这条路径，打破圈子并添加自定义点并不难。基于链接答案的修改函数：

function circlePath(center,radius,points){
   var a=[],p=360/points,d=0,pp;
   for(var i=0;i<points;++i,d+=p){
       pp=google.maps.geometry.spherical.computeOffset(center,radius,d);

    if(d%180==20){
     a.push(google.maps.geometry.spherical.computeOffset(pp,radius*.7,45+(d-(d%180))));
     i+=44;d+=(44*p);
    }
    else if(d%180==65){
     a.push(google.maps.geometry.spherical.computeOffset(pp,radius*.7,45+(d-(d%180))));  
    }
    else{
     a.push(pp);
    }

   }
   return a;
 }

演示：http://jsfiddle.net/doktormolle/1nmcd2nv/

如何使用Google Maps Javascript API v3绘制某个复杂的形状

编辑：

1 个答案: