Подтвердить что ты не робот

Функция Open Layers 3 заполняет Canvas не привязана к функции

Я работал с openlayers 3 и создал заполнение с помощью canvasPattern. Заполнение работает, проблема в том, что он работает не так, как ожидалось.

Я ожидаю, что заливка будет перемещаться с геометрией, которую она заполняет, но, как вы увидите в этом примере:

http://fiddle.jshell.net/luigibosca/Lwrbuxfd/14/

если вы перемещаете карту вокруг, вы заметите, что заливка абсолютно позиционируется, а не по отношению к геометрии, которую она заполняет.

  • Я использую неправильное заполнение?
  • Кто-нибудь знает, как получить заполнение для перемещения с геометрией?

Заранее благодарим за помощь!

4b9b3361

ОТВЕТЫ

Ответ 1

Насколько я могу судить, нет способа сделать происхождение шаблона заливки после карты или геометрии, поскольку она подкрашивается или перемещается при использовании ее с векторными слоями. Openlayers просто использует шаблон как заполнение без его перевода, поэтому он всегда будет статически расположен относительно холста.

Однако PR # 5854 представляет пример, где он работает. Он пока не отображается на странице примеров, но может быть просмотрен на http://jsfiddle.net/61b7szjn/.

Разница между этим и вашим примером заключается в том, что он использует источник ImageVector (что делает его слоем изображения). Это сделает его работу, например, в пример:

var imageVectorLayer = new ol.layer.Image({
    source: new ol.source.ImageVector({
      source: vectorSource,
    style: styleFunction
  }),
})

Использование слоев изображения для векторных данных может оказаться неприемлемым для всех ситуаций, поэтому добавление поддержки для перевода шаблона заполнения похоже на большой материал PR.

Изменить:

При дальнейшем тестировании кажется, что решения ImageVector не являются гарантированным исправлением. Шаблон обычно следует по мере панорамирования, но иногда он непредсказуем переходит к разным смещениям. Я предполагаю, что это связано с тем, как обрезается обработанный холст источника:

введите описание изображения здесь введите описание изображения здесь