Access "prerender" event and create a "swipe component" with VueLayers

[WolfgangReip]

Hi guys,

In this exemple on OpenLayers https://openlayers.org/en/latest/examples/layer-swipe.html they are using the prerender event.

I've been trying to reproduce this example in VueLayers but I fail. Any idea how I could do it?

[ghettovoice]

Hello @rflowturing , current stable version of VueLayers is based on OpenLayers v5. So you should take example for v5.3.x version from here https://openlayers.org/en/v5.3.0/examples/layer-swipe.html

Upgrade to v6 is on my roadmap, but it's not fully complete yet...

[WolfgangReip]

Thank you very much for the reply!

Best Regards

Wolfgang

Le 12 mars 2020 à 14:10, Vladimir Vershinin notifications@github.com a écrit :

 Hello @ghettovoice , current stable version of VueLayers is based on OpenLayers v5. So you should take example for v5.3.x version from here https://openlayers.org/en/v5.3.0/examples/layer-swipe.html

Upgrade to v6 is on my roadmap, but it's not fully complete yet...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[WolfgangReip]

Hi Vladimir,

Trying to take example on the link you gave me, I still have a problem and I don't really find a solution. Currently here is how it looks:

[image: swipe.PNG]

In the OpenLayers example the events pre and postcompose are only on one of the two layers https://openlayers.org/en/v5.3.0/examples/layer-swipe.html, in VueLayers doc, these events are on the vl-map, so when I try on vl-map (as the picture above and the code below) it just clips the whole map, and not only one of the two layers like in the openlayers example. The goal is to only clip dynamically one of the two layers to have have that "swipe" effect and the other one always 100% width visible underneath just like here : https://openlayers.org/en/latest/examples/layer-swipe.html?q=swipe

I've been trying to apply the pre and postcompose on the vl-layer-tile component, but when I restore() the layer takes 100% of the width and is not clipped anymore. And it doesnt seem to work really.

Currently I am having a very basic vue environnement, just trying to make that effect work.

  <v-container fluid>
    <vl-map
      @precompose="clip"
      @postcompose="restore"
      ref="map"
      :defaultControls="controls"
      :load-tiles-while-animating="true"
      :load-tiles-while-interacting="true"
      data-projection="EPSG:4326"
      style="height: 400px"
    >
      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="
rotation"></vl-view>

      <vl-layer-tile id="OSM">
        <vl-source-osm></vl-source-osm>
      </vl-layer-tile>

      <vl-layer-tile ref="bingmaps">
        <vl-source-bingmaps :api-key="apiKey" :imagery-set="imagerySet"></
vl-source-bingmaps>
      </vl-layer-tile>
    </vl-map>

    <input type="range" v-model="swipeCursor" style="width: 100%" id=
"swipe-cursor" @input="render" />
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    zoom: 3,
    center: [-90, 50],
    rotation: 0,
    url:
      "
https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/
",
    layerName: "0",
    matrixSet: "EPSG:3857",
    format: "image/png",
    styleName: "default",
    controls: {
      zoom: false,
      attribution: false
    },
    apiKey:
"ArbsA9NX-AZmebC6VyXAnDqjXk6mo2wGCmeYM8EwyDaxKfQhUYyk0jtx6hX5fpMn",
    imagerySet: "AerialWithLabels",
    swipeCursor: 50,
    ctx: {}
  }),
  methods: {
    clip(event) {

      this.ctx = event.context;

      let width = this.ctx.canvas.width * (this.swipeCursor / 100);

      this.ctx.save();

      this.ctx.beginPath();
      this.ctx.rect(
        width,
        0,
        this.ctx.canvas.width - width,
        this.ctx.canvas.height
      );

      this.ctx.clip();
    },
    render() {
      this.$refs.map.render();
    },
    restore(event) {
      this.ctx = event.context;
      this.ctx.restore();
    }
  }
};
</script>

I am sorry to bother you with this and I'd like to say that you did an
amazing job and that if I was not a newbie in programing I would probably
have already found a solution.

Thanks for taking the time to read me.

Regards

Wolfgang

Le jeu. 12 mars 2020 à 14:10, Vladimir Vershinin <notifications@github.com>
a écrit :

> Hello @ghettovoice <https://github.com/ghettovoice> ,
> current stable version of VueLayers is based on OpenLayers v5.
> So you should take example for v5.3.x version from here
> https://openlayers.org/en/v5.3.0/examples/layer-swipe.html
>
> Upgrade to v6 is on my roadmap, but it's not fully complete yet...
>
> —
> You are receiving this because you authored the thread.
> Reply to this email directly, view it on GitHub
> <https://github.com/ghettovoice/vuelayers/issues/285#issuecomment-598176332>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AM4PAPQNQKFECAJP4E2E5L3RHDNMBANCNFSM4LGG7SMQ>
> .
>

[ghettovoice]

You should bind precompose/postcompose events on the layer object. But I found that VueLayers event binding have currently some problems, this is the reason why precompose/postcompose handler called not correctly and nothing is working. For a while I fix this, you can workaround this problem by using OpenLayers event API Take a look at the demo https://codesandbox.io/embed/vuelayers-layers-swipe-vjfue?fontsize=14&hidenavigation=1&theme=dark

[ghettovoice]

I have made new release where precompose/postcompose event now works as expected. So you can listen directly for them with Vue event syntax. Take a look at the updated demo

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.