Как рисовать на источнике ImageCanvas в OpenLayers v6? - PullRequest
Новая
       13

Как рисовать на источнике ImageCanvas в OpenLayers v6?

0 голосов
/ 06 марта 2020

Я использую ImageLayer с источником ImageCanvas для рисования полигонов поверх моей карты. Это обрабатывается функцией drawCanvas(). Пока все хорошо. 

this.imageLayer = new ImageLayer({
  source: new ImageCanvas({
    canvasFunction: this.drawCanvas,
      projection: 'EPSG:3857',
    }),
});

this.olmap.addLayer(this.imageLayer);

Однако я хочу, чтобы пользователь также мог рисовать на холсте. Для этого я устанавливаю this.canvas = document.createElement('canvas'); в конструкторе класса React и использую его в функции drawCanvas(). Пока все еще хорошо.

Чтобы разрешить взаимодействие пользователя с холстом, я установил eventListeners так, чтобы он вызывал функцию, которая dr aws, просто как: 

const ctx = this.canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 15, 15);

Это не показывает на холсте, кроме случаев, когда я уменьшаю (ctrl -). Это заставляет меня поверить, что я справляюсь с этим неправильно. Какой рекомендуемый порядок действий здесь?

Прямоугольники, отображаемые на холсте после увеличения

...