рекомендации по оптимизации для отображения оверлеев SVG с Google Maps API - PullRequest
Новая
       10

рекомендации по оптимизации для отображения оверлеев SVG с Google Maps API

0 голосов
/ 21 января 2019

Я стремлюсь отображать пользовательские наложения границ регионов со сложным визуальным стилем, и svg кажется идеальным выбором. Но, просто выполняя начальное тестирование ТЭО, я сталкиваюсь с серьезными проблемами с производительностью, когда к карте добавлено около 20 с использованием класса GroundOverlay. Мой рабочий стол с приличным графическим процессором ставится на колени в Chrome, Firefox и Edge при панорамировании или масштабировании, а иногда даже при простое с отображением статической карты на экране, с всплеском использования процессора и gpu и, в случае Firefox, даже с максимальной скоростью 16 гигабайт оперативной памяти (утечка памяти?). Так как 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 могла бы быть лучше оптимизирована для этой цели? Я думал, что с точки зрения svgs это следовало рекомендациям по оптимизации (без гигантских перемещений в виде точек пути, ограниченного количества общих точек и т. Д.).

...