search

ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
682 stars 230 forks source link

how to keep style.Text normal when apply css rotate to .ol-layers #499

Closed scil closed 1 year ago

scil commented 2 years ago

I rotate the map by 

.map2>.ol-viewport{
  perspective: 200px  ;
  perspective-origin: right bottom;
  &> .ol-layers{
    transform: rotateX(10deg);
    transform:rotateX(5deg) translate(-330px,0px)
  }
}

the map is expected` to be warped.

Also the style.Text, which I do not expect. image

how can I make the text normal?

ghettovoice commented 2 years ago

Hello @scil , I think it is not possible because you rotate a whole layer canvas, styles are applied inside canvas context.

Maybe you can replace text styles with vl-overlay components. It is html container bound to some map coordinate and it is overlays a layer/map canvas. But probably you also need to adjust coordinates in a some way according to rotation/perspective.

There is also exists an implementation of perspective map in the ol-ext lib https://viglino.github.io/ol-ext/examples/map/map.perspective.html. However in the current state it can't be used as is due to the fact that their ol.PerspectiveMap need a target HTML element at the construction time, in the VueLayers ol.Map constructing without HTML element and then bound to this.$el in the Vue mounted hook. But their implementation may be useful if make it as a decorator to the ol.Map instance.