Question

我的目标是显示具有复杂视觉样式的自定义区域边框叠加层，而svg似乎是理想的选择。但是仅在进行一些初步的可行性测试时，当我使用GroundOverlay类向地图添加约20个时，便遇到了极端性能问题。当平移或缩放时，我的台式机拥有不错的GPU，在Chrome，Firefox和Edge上无法自拔，有时甚至只是在屏幕上显示静态地图视图而闲置时，却使用了CPU和gpu，在Firefox的情况下，甚至最大化了16演出的RAM（ff内存泄漏？）。由于SO不允许svg附加，这就是我正在使用的svg示例的来源（这是加利福尼亚州的边界，具有半透明的渐变填充）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="959" height="593">
<title>California</title>
<defs>
	<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>
  <style type="text/css">
    .state {fill:url(#grad1);}
  </style>
</defs>
<g id="outlines" class="state">  
  <path id="CA" d="M122.7 385.9l-19.7-2.7-10-1.5-.5-1.8v-9.4l-.3-3.2-2.6-4.2-.8-2.3-3.9-4.2-2.9-4.7-2.7-.2-3.2-.8-.3-1 1.5-.6-.6-3.2-1.5-2.1-4.8-.8-3.9-2.1-1.1-2.3-2.6-4.8-2.9-3.1H57l-3.9-2.1-4.5-1.8-4.2-.5-2.4-2.7.5-1.9 1.8-7.1.8-1.9v-2.4l-1.6-1-.5-2.9-1.5-2.6-3.4-5.8-1.3-3.1-1.5-4.7-1.6-5.3-3.2-4.4-.5-2.9.8-3.9h1.1l2.1-1.6 1.1-3.6-1-2.7-2.7-.5-1.9-2.6-2.1-3.7-.2-8.2.6-1.9.6-2.3.5-2.4-5.7-6.3V236l.3-.5.3-3.2-1.3-4-2.3-4.8-2.7-4.5-1.8-3.9 1-3.7.6-5.8 1.8-3.1.3-6.5-1.1-3.6-1.6-4.2L14 184l.8-3.2 1.5-4.2 1.8-.8.3-1.1 3.1-2.6 5.2-11.8.2-7.4 1.69-4.9 38.69 11.8 25.6 6.6-8 31.3-8.67 33.1L88.84 250 131 312.3l17.1 26.1-.4 3.1 2.8 5.2 1.1 5.4 1 1.5.7.6-.2 1.4-1.4 1-3.4 1.6-1.9 2.1-1.7 3.9-.5 4.7-2.6 2.5-2.3 1.1-.1 6.2-.6 1.9 1 1.7 3 .3-.4 1.6-1.4 2-3.9.6zM48.8 337l1.3 1.5-.2 1.3-3.2-.1-.6-1.2-.6-1.5zm1.9 0l1.2-.6 3.6 2.1 3.1 1.2-.9.6-4.5-.2-1.6-1.6zm20.7 19.8l1.8 2.3.8 1 1.5.6.6-1.5-1-1.8-2.7-2-1.1.2v1.2zm-1.4 8.7l1.8 3.2 1.2 1.9-1.5.2-1.3-1.2s-.7-1.5-.7-1.9v-2.2z"/>
</g>
</svg>

我正在使用

在原本为空的自定义地图中显示它和大约20个类似图片

svgoverlay1 = new google.maps.GroundOverlay(myurl, mybounds, {clickable: false}));
svgoverlay1.setMap(map);

只是想知道是否有人在地图上调整这样的多个svg的显示效果。是否有GroundOverlay的替代方法，该方法更高效且更适合于此？为此，我的svg本身是否可以通过某种方式得到更好的优化？我当时认为，就svg而言，这是遵循优化的最佳实践（路径点，总点数有限等没有巨大的浮动）。

使用Google Maps API显示SVG叠加层的优化建议

0 个答案: