В настоящее время я разрабатываю приложение, которое реализует несколько уровней масштабирования. Я отрисовываю линии / геометрические фигуры в сетке, где на каждом уровне масштабирования есть сетка, а на каждом более высоком уровне масштабирования размеры ячеек сетки уменьшаются вдвое. То есть в zoomLevel = 0 есть одна плитка, тогда как в zoomlevel = 1 их 4 (так как исходный размер ячейки уменьшился вдвое, поэтому мы можем разместить 4 плитки). Это предотвращает необходимость рендеринга всего (чего нет на экране сразу). Однако я столкнулся с проблемой рендеринга данных с большими значениями координат (координатами веб-меркатора), и на высоких уровнях масштабирования возникает ощутимая борьба за рендеринг данных с моими текущими формулами с использованием HTML5 canvas:
let canvasX = mid + (x * screenRatio);
let canvasY = mid - (y * screenRatio);
Где mid = max(canvas.width, canvas.height)/2 и screenRatio = max(canvas.width, canvas.height)/widthOfWebMercator. Затем я обрабатываю масштабирование и панорамирование, используя обычный метод контекста canvas, однако этот метод приводит к "колебаниям" координат при высоких уровнях масштабирования.
Кто-нибудь может предложить какой-нибудь лучший способ найти координаты холста из координат веб-меркатора при различных уровнях масштабирования, при котором контекст холста постоянно не увеличивается (в масштабе)? Принимая во внимание, что мне нужно знать, какие плитки отображаются в данный момент. В настоящее время я вижу текущие тайлы с помощью следующего кода:
let screenSquare = max(canvas.width, canvas.height);
let scaledTile = currentTileSize * ctx.getTransform().a;
let startCol = Math.floor((currentTransform.e*-1)/scaledTile);
let endCol = startCol + Math.ceil(screenSquare/scaledTile);
let startRow = Math.floor((currentTransform.f*-1)/scaledTile);
let endRow = startRow + Math.ceil(screenSquare/scaledTile);
Где currentTileSize - это размер тайла с заданным уровнем увеличения, тогда как scaledTile - это размер тайла относительно текущего увеличения.