0

http://www.choptankelectric.com/outages/google/cec_create_xml.htmlにページがあり、いくつかのポリゴンには、透明であるはずの「ドーナツ」の穴が含まれていますが、グレー表示されています。

座標は XML ファイルから取得され、 http: //www.choptankelectric.com/outages/index.html のように見えるはずです。XML は、mySQL DB テーブルに保持されている座標から生成されます。各ポリゴンには、polygonID と、(内側のポリゴンの場合) それを含む親の外側のポリゴンを示すフィールドがあります。

透明なドーナツの穴で表示するにはどうすればよいですか?

したがって、コードは次のとおりです。

var phpscript = "cec_create_xml.php"; // creates xml data for polygons
downloadUrl(phpscript, function(data) {
   var polygons = data.documentElement.getElementsByTagName("polygon");
   for (var a = 0; a < polygons.length; a++) {
   //for (var a = 0; a < 1; a++) {
      var Parent = polygons[a].getAttribute("Parent");
      var strokeColor = polygons[a].getAttribute("strokeColor");
      var strokeOpacity = polygons[a].getAttribute("strokeOpacity");
      var strokeWeight = polygons[a].getAttribute("strokeWeight");
      var fillColor = polygons[a].getAttribute("fillColor");
      var fillOpacity = polygons[a].getAttribute("fillOpacity");
      var pts = [[]];
      var points = polygons[a].getElementsByTagName("point");
      for (var i = 0; i < points.length; i++) {
         pts[i] = new google.maps.LatLng(parseFloat(points[i].getAttribute("lat")),
         parseFloat(points[i].getAttribute("lng")));
      }
      var polyOptions = {
         paths: pts,
         strokeColor: strokeColor,
         strokeOpacity: strokeOpacity,
         strokeWeight: strokeWeight,
         fillColor: fillColor,
         fillOpacity: fillOpacity
      }
      varCECarea = new google.maps.Polygon(polyOptions);
      CECarea.bindTo('map',map,'polymap');
   }
});
4

1 に答える 1

1

問題は、親を持つポリゴンが親パスの一部として処理されていないことです。これは、最新のコメントで認識しているように聞こえます。これらの親が意図されているようなマルチポリゴンがある場合、すべてのパスを一度に google.maps.PolygonOptions オブジェクトの 'paths' プロパティに渡します (または Polygon.setPaths() を最初の引数として呼び出す場合)。それぞれがポリゴン パスを含む配列の配列。上に投稿したコードの正確な部分を次のように変更します。

var phpscript = "cec_create_xml.php"; // creates xml data for polygons
downloadUrl(phpscript, function(data) {
    var i, poly, id, parent,
        parentPolys = {},
        childPolys = [],
        polyXml = data.documentElement.getElementsByTagName("polygon"),
        len = polyXml.length;

    function jsPolyFromXmlPoly(xmlPolygon) {
        var i, pt, lat, lng,
            obj = {
                paths : [[]],
                id : xmlPolygon.getAttribute('PolygonID'),
                parent : xmlPolygon.getAttribute("Parent"),
                strokeColor : xmlPolygon.getAttribute("strokeColor"),
                strokeOpacity : xmlPolygon.getAttribute("strokeOpacity"),
                strokeWeight : xmlPolygon.getAttribute("strokeWeight"),
                fillColor : xmlPolygon.getAttribute("fillColor"),
                fillOpacity : xmlPolygon.getAttribute("fillOpacity")
            },
            pts = xmlPolygon.getElementsByTagName('point'),
            len = pts.length;
        for (i = 0; i < len; i++) {
            pt = pts[i];
            lat = Number(pt.getAttribute('lat'));
            lng = Number(pt.getAttribute('lng'));
            obj.paths[0].push(new google.maps.LatLng(lat, lng));
        }
        return obj;
    }

     //begin filtering & separating child polygons and parent polygons,
     //first converting to javascript object rather than xml
    for (i = 0; i < len; i++) {
        poly = jsPolyFromXmlPoly(polyXml[i]);
        id = poly.id;
        parent = poly.parent;
        if (parent === '0') {
            parentPolys[id] = poly;
        } else {
            childPolys.push(poly);
        }
    }
     //begin pushing all the child polygons paths into their parents 'paths' array
    for (i = 0, len = childPolys.length; i < len; i++) {
        poly = childPolys[i];
        id = poly.parent;
        parent = parentPolys[id];
        parent.paths.push(poly.paths[0]);
    }
     //create google maps polygons using only the parent polygons,
     //as they now contain all the child polygon paths
    for (i in parentPolys) {
        poly = parentPolys[i];
        var polyOptions = {
            paths: poly.paths,
            strokeColor: poly.strokeColor,
            strokeOpacity: poly.strokeOpacity,
            strokeWeight: poly.strokeWeight,
            fillColor: poly.fillColor,
            fillOpacity: poly.fillOpacity
        };
        var CECarea = new google.maps.Polygon(polyOptions);
        CECarea.bindTo('map', map, 'polymap');
    }
});
于 2013-07-26T09:46:08.687 に答える