CODEWITHSUNDEEP
vue.jsopenlayersquasar-framework
Raeisi
Raeisi

Reputation: 2171

OL features move on zoom out/in

I'm using "ol": "^6.5.0", package in a Vue2 SPA. Everything goes well but in some client systems, features that have drawn on the map start moving away on zooming out/in.

this.vectorSource = new VectorSource();
this.vectorLayer = new VectorLayer({
  source: this.vectorSource,
  style,
});
this.tilLayer = new TileLayer({
  source: new OSM(),
  opacity: 0.9,
});
this.map = new Map({
  layers: [],
  // layers: [this.tileLayer, this.vectorLayer],
  target: this.mapID,
  controls: defaultControls({
    attribution: false,
    zoom: true,
    rotate: true,
  }),
});
this.vectorLayer.setMap(this.map);
// this.vectorLayer.setMaxZoom(24);
// this.vectorLayer.setMinZoom(17.5);
this.tilLayer.setMap(this.map);
this.tilLayer.setZIndex(0);
if (this.drawType) {
  this.draw = new Draw({
    source: this.vectorSource,
    type: this.drawType,
  });
  this.draw.on('drawstart', () => {
    this.vectorSource.clear();
  });
  this.draw.on('drawend', ({ feature }) => {
    const coords = feature.getGeometry().getCoordinates();
    this.$emit('drawn', coords[0]);
  });
  this.map.addInteraction(this.draw);
}
this.map.on('click', this.mapClicked);
this.map.on('pointermove', this.pointerMove);

Show WKT func:

showWKT(wktShapes = this.wktListCache, { updateView = this.updateView } = {}) {
  if (!Array.isArray(wktShapes)) {
    return;
  }
  this.wktListCache = [...wktShapes];
  if (!this.map) {
    // Map is not init yet
    return;
  }
  this.vectorSource.clear();
  // Draw WKTs
  let viewFeature;
  wktShapes.forEach(wkt => {
    const formatWKT = new WKT();
    const wktFeature = formatWKT.readFeature(wkt.location || wkt, {
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857',
    });
    wktFeature.set('tooltip', wkt.tooltip);
    if (wkt.style) {
      wktFeature.setStyle(wkt.style);
    }
    this.vectorSource.addFeature(wktFeature);
    viewFeature = wktFeature;
  });
  // Set zoom and position
  if (updateView && viewFeature) {
    const extend = viewFeature.getGeometry().getExtent().slice(0);
    this.map.getView().fit(extend, {
      size: this.map.getSize(),
      maxZoom: this.zoom,
      // padding: [20, 20, 20, 20],
    });
  }
},

In our company's system, OL works properly. I've tested by Chrome Version 90.0.4430.93 (Official Build) (64-bit) and Firefox 88.0 (64-bit) By the way, some clients face the moving problem.

*** By Firefox everything is great even on client systems.

*** I followed this issue, but it doesn't match my problem.

enter image description here

Upvotes: 3

Views: 605

Answers (1)

Raeisi
Raeisi

Reputation: 2171

Thank you @Mike, it works!!

You could try specifying a fixed integer pixelRatio in the map options instead of letting it use the device value. – Mike

I checked the documentation; in initializing Map there is an option pixelRatio that by default fill by window.devicePixelRatio. I checked it on weird devices and noticed that it's some value like 1.0700000524520874 in zoom 100%, but it is exactly 1 in ours. I initializing my map this way, now:

this.map = new Map({
  layers: [],
  // layers: [this.tileLayer, this.vectorLayer],
  target: this.mapID,
  pixelRatio: 1,
  controls: defaultControls({
    attribution: false,
    zoom: true,
    rotate: true,
  }),
});

I tested it in different zooms, it's okay.

Upvotes: 1

Related Questions