Google Maps JS API 多边形渲染问题

Posted 2023-03-23

【中文标题】Google Maps JS API 多边形渲染问题

【英文标题】：Google Maps JS API Polygon Rendering Issue

【发布时间】：2020-08-18 09:36:29

【问题描述】：

我正在创建一个包含许多多边形的 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);

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

【问题讨论】：

我已经设法回答了我关于多边形颜色的部分问题。我使用了一个函数来解释颜色的十六进制代码值，这给了我格式不正确的十六进制代码，导致不透明度错误，并且不知何故，来自相邻多边形的颜色被渲染在（现在是半透明的）相邻多边形后面。我仍然不清楚为什么某些多边形的一部分根本不渲染。我认为它与地图的尺寸​​有关？平铺？

【参考方案1】：

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

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

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

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

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