Android端Google Map多边形fillColor填充背景色失效问题
问题根因
这是Android端和iOS端Google Maps SDK对多边形环绕规则的默认处理逻辑差异导致的,和fillColor属性本身无关。
你提供的坐标组本身格式合法、能正常绘制轮廓,但顶点为顺时针排列:Android端Google Maps SDK默认遵循严格的多边形环绕规范——简单多边形外边框需要为逆时针排列,顺时针排列的闭合路径会被判定为“挖洞区域”,如果没有配套的逆时针外边框,就不会触发填充;而iOS端SDK内置了自动修正规整逻辑,不校验顶点环绕方向,只要是闭合路径就会正常填充,因此出现单端填充失效的现象。
待验证的问题坐标组如下:[[139.6961904465721,35.67366716851985],[139.69825038309554,35.67066895010819],[139.69267138834456,35.66923952726723],[139.69262847300033,35.6729873497998],[139.6961904465721,35.67366716851985]]
排查解决步骤
- 先排除无关属性干扰:不需要反复调整
fillOpacity、zIndex、strokeWidth这类属性,这类配置异常会导致所有多边形渲染异常,不会出现单多边形、单端失效的问题。 - 快速验证修复:保留首尾闭合点不动,把中间的顶点顺序倒转,将整体环绕方向改为逆时针,修正后的坐标组如下,替换后Android端即可正常显示填充色:
[[139.6961904465721,35.67366716851985],[139.69262847300033,35.6729873497998],[139.69267138834456,35.66923952726723],[139.69825038309554,35.67066895010819],[139.6961904465721,35.67366716851985]] - 增加跨端兼容预处理逻辑,从根源避免同类问题:
- 所有传入地图SDK的多边形坐标,先校验首尾点是否一致,不一致则自动将第一个点追加到数组末尾,保证路径闭合
- 统一计算多边形顶点的环绕方向,所有简单多边形的外边框都转为逆时针顺序再传入渲染
- 如果是带洞的复杂多边形,保证内部挖洞区域的顶点顺序为顺时针,和外边框方向相反
补充提示:如果调整顶点顺序后仍然存在填充异常,可进一步校验坐标是否存在自相交——Android端SDK对自相交多边形的填充计算和iOS端也存在差异,自相交程度较大时也可能出现填充缺失,遇到这类情况直接对自相交多边形做拓扑拆分即可。
内容的提问来源于stack exchange,提问作者Nam-gyu Jeon
相关产品推荐
相关产品推荐

