Google Maps JS API 多边形渲染问题

Question

我正在创建一个包含许多多边形的 Google 地图。问题是当我的多边形渲染时，它们的颜色不一致（多边形体上的颜色不同）并且它们没有完全渲染。包括 2 个图像，您可以在其中看到渲染的给定多边形的数量不一致。

期望的行为是多边形完全渲染（不存在多边形未渲染的直线沿着多边形主体的中间向下）并且多边形填充的颜色在整个多边形中保持一致。

我认为这是一个平铺问题。这是我用来管理自定义地图类型的 "getTile" 和 "releaseTile" 逻辑的代码：

GMICMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var c = Math.pow(2, zoom);
    var c = Math.pow(2, zoom);
    var tilex=coord.x,tiley=coord.y;
    if (imageWraps) {
      if (tilex<0) tilex=c+tilex%c;
      if (tilex>=c) tilex=tilex%c;
      if (tiley<0) tiley=c+tiley%c;
      if (tiley>=c) tiley=tiley%c;
    }
    else {
      if ((tilex<0)||(tilex>=c)||(tiley<0)||(tiley>=c)) {
        var blank = ownerDocument.createElement('DIV');
        blank.style.width = this.tileSize.width + 'px';
        blank.style.height = this.tileSize.height + 'px';
        return blank;
      }
    }
    var img = ownerDocument.createElement('IMG');
    var d = tilex;
    var e = tiley;
    var f = "t";
    for (var g = 0; g < zoom; g++) {
      c /= 2;
      if (e < c) {
          if (d < c) { f += "q" }
          else { f += "r"; d -= c }
      }
      else {
          if (d < c) { f += "t"; e -= c }
          else { f += "s"; d -= c; e -= c }
      }
}
GMICMapType.prototype.realeaseTile = function(tile) {
      var idx = this.Cache.indexOf(tile);
      if(idx!=-1) this.Cache.splice(idx, 1);
      tile=null;
}

此外，我正在使用此代码将多边形推送到地图：

            // Construct the sector outline.
        window[sectorName] = new google.maps.Polygon({
          name: sectorTitle,
          infoWindowPointX: sectorCenterPointX,
          infoWindowPointY: sectorCenterPointY,
          knownSystems: knownSystems,
          factionColor: factionColor,
          paths: sectorCoords,
          sectorDataNum: s,
          strokeColor: sectorColor,
          strokeOpacity: 1,
          strokeWeight: 0.8,
          zIndex: 1,
          fillColor: sectorColor,
          fillOpacity: 1
        });
        polygons.push(window[sectorName]);
        window[sectorName].setMap(map);

我猜这是与问题相关的代码，但我不确定是什么导致了问题，所以我不确定要包含哪些代码。如果我应该包括代码的其他部分（或所有代码），请告诉我。

Answer 1

我将回答我自己的问题，以供将来遇到类似问题的任何人参考，因为我没有收到任何答复并针对每个问题设计了解决方法。

问题：多边形颜色不正确。

解决：我检查了fillColor属性，发现传递的值不正确。传递正确的值解决了这个问题。

问题：并非所有多边形都在所有缩放级别下呈现。

解决方案：我的原始源图像是一张 1000 像素 X 1000 像素的地图，其内容几乎绘制到 4 个边缘中的 3 个边缘（这意味着在 3 侧的边界附近几乎没有空白 space）。我将我的源图像增加到 2000px X 2000px 并将我的原始图像放在中心，这意味着我的地图现在有更多 "empty" space 我没有在边缘附近渲染多边形。这导致地图更小，坐标保真度更低（1 X 现在是地图内容部分之前的两倍），但是多边形现在仅位于 google 地图元素。出于某种原因，这意味着所有多边形都在所有缩放级别渲染，这是我想要的结果，但会牺牲一些保真度和地图图像分辨率。

Google Maps JS API 多边形渲染问题

Google Maps JS API Polygon Rendering Issue

google-maps

maps

rendering

polygon

clipping