Google Maps JS API 多边形渲染问题
Google Maps JS API Polygon Rendering Issue
我正在创建一个包含许多多边形的 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);
我猜这是与问题相关的代码,但我不确定是什么导致了问题,所以我不确定要包含哪些代码。如果我应该包括代码的其他部分(或所有代码),请告诉我。
我将回答我自己的问题,以供将来遇到类似问题的任何人参考,因为我没有收到任何答复并针对每个问题设计了解决方法。
- 问题:多边形颜色不正确。
解决:我检查了fillColor属性,发现传递的值不正确。传递正确的值解决了这个问题。
- 问题:并非所有多边形都在所有缩放级别下呈现。
解决方案:我的原始源图像是一张 1000 像素 X 1000 像素的地图,其内容几乎绘制到 4 个边缘中的 3 个边缘(这意味着在 3 侧的边界附近几乎没有空白 space)。我将我的源图像增加到 2000px X 2000px 并将我的原始图像放在中心,这意味着我的地图现在有更多 "empty" space 我没有在边缘附近渲染多边形。这导致地图更小,坐标保真度更低(1 X 现在是地图内容部分之前的两倍),但是多边形现在仅位于 google 地图元素。出于某种原因,这意味着所有多边形都在所有缩放级别渲染,这是我想要的结果,但会牺牲一些保真度和地图图像分辨率。
我正在创建一个包含许多多边形的 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);
我猜这是与问题相关的代码,但我不确定是什么导致了问题,所以我不确定要包含哪些代码。如果我应该包括代码的其他部分(或所有代码),请告诉我。
我将回答我自己的问题,以供将来遇到类似问题的任何人参考,因为我没有收到任何答复并针对每个问题设计了解决方法。
- 问题:多边形颜色不正确。
解决:我检查了fillColor属性,发现传递的值不正确。传递正确的值解决了这个问题。
- 问题:并非所有多边形都在所有缩放级别下呈现。
解决方案:我的原始源图像是一张 1000 像素 X 1000 像素的地图,其内容几乎绘制到 4 个边缘中的 3 个边缘(这意味着在 3 侧的边界附近几乎没有空白 space)。我将我的源图像增加到 2000px X 2000px 并将我的原始图像放在中心,这意味着我的地图现在有更多 "empty" space 我没有在边缘附近渲染多边形。这导致地图更小,坐标保真度更低(1 X 现在是地图内容部分之前的两倍),但是多边形现在仅位于 google 地图元素。出于某种原因,这意味着所有多边形都在所有缩放级别渲染,这是我想要的结果,但会牺牲一些保真度和地图图像分辨率。