Интерфейс Mapbox менее производительный в Angular по сравнению с ванильным Javascript - PullRequest
Новая
       89

Интерфейс Mapbox менее производительный в Angular по сравнению с ванильным Javascript

0 голосов
/ 23 сентября 2019

Я создал карту с помощью Mapbox GL JS 1.3.1 и добавил маркеры.Мой вариант использования требует очень быстрого обновления маркеров на карте.Я создал пример приложения для воспроизведения проблемы в Codepen и Stackblitz.

Codepen DEMO 

// HTML
<div id='map'></div>

<div class="fpsCounter">
  <p class="current-fps">FPS: 0</p>
  <p class="min-max-fps">Min: 0 Max: 0</p>
</div>




// CSS
body { margin:0; padding:0; font-family: arial; }
#map { position:absolute; top:0; bottom:0; width:100%; }

.marker {
  background-image: url('http://pngimg.com/uploads/bee/bee_PNG74680.png');
/*   background-image: url('https://cdn1.iconfinder.com/data/icons/cloud-14/32/pin_custom_location_locate_google-512.png'); */
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.fpsCounter {
  z-index: 20;
  .current-fps {
    position: absolute;
    right: 20px;
    top: 0px;
    font-size: 24px;
    color: #333;
  }
  .min-max-fps {
    position: absolute;
    right: 20px;
    top: 42px;
    font-size: 14px;
    color: #333;
  }
}



// JS
markersCount = 60;
markersArr = [];


fps = 0;
min_fps = 0;
max_fps = 0;
counter = 0;
timestamp = 0;

currentRef = document.querySelector(".current-fps");
minmaxRef = document.querySelector(".min-max-fps");


mapboxgl.accessToken = 'pk.eyJ1IjoiYW5rZXNoLXRpd2FyaSIsImEiOiJjanJobm9tbjIxZ2hxNDNvZzR4dGFtdG1xIn0.77c3JpCpexJJnF3nXZWwwA';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-96, 37.8],
  zoom: 1
});

var dynaGeoJSON = {
  type: 'FeatureCollection',
  features: []  
}
for(let i=0; i<markersCount; i++) {
  dynaGeoJSON.features.push({
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [
        Math.round(Math.random()*360),
        Math.round(Math.random()*180 - 90)
      ]
    },
    properties: {
      title: 'Mapbox',
      description: 'Washington, D.C.'
    }
  })
}

var geojson = dynaGeoJSON;

// add markers to map
geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  let m = new mapboxgl.Marker(el);
  markersArr.push(m);

  m.setLngLat(marker.geometry.coordinates)
    .addTo(map);
});

setTimeout(_ => {
  animateMarker();
}, 2000);

function animateMarker() {
  geojson.features.forEach(function(marker, index) {

    marker.geometry.coordinates = getNewCoordinates(marker.geometry.coordinates);

    markersArr[index].setLngLat(marker.geometry.coordinates);
  });

  requestAnimationFrame(_ => {
    animateMarker();
  })
}

function getNewCoordinates(coordinates) {
  let [lng, lat] = coordinates;

  lng += (Math.random()*1 - 0.5);
  lat += (Math.random()*1 - 0.5); 

  lat = Math.min(90, Math.max(-90, lat));

  return [lng, lat];
}

/* -------- */
setupFPS();

function setupFPS() {
  let d = +new Date();


  if(d - timestamp > 1000) {
    fps = counter;
    min_fps = min_fps === 0 ? fps : Math.min(min_fps, fps);
    max_fps = Math.max(max_fps, fps);

        currentRef.innerText = "FPS: " + counter;
    minmaxRef.innerText = "Min: " + min_fps + "  Max: " + max_fps;

    counter = 0;
    timestamp = d;

  } else {
    counter++;
  }

  requestAnimationFrame(_ => {
    setupFPS();
  })
}

Stackblitz DEMO

Из примера видно, что демонстрация Codepen поддерживает 30-60 FPS даже при панорамировании и масштабировании, однако угловая демонстрация пытается создать> 10 FPS даже в режиме ожидания,

...