vue.js - OL 功能在缩小/放大时移动

Question

我在 Vue2 SPA 中使用 "ol": "^6.5.0", 包。一切顺利，但在某些客户端系统中，绘制在 map 上的要素在缩小/放大时开始移动。

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);

显示 WKT 函数:

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],
    });
  }
},

在我们公司的系统中，OL可以正常运行。我已经通过 Chrome 版本 90.0.4430.93(官方构建)(64 位)和 Firefox 88.0(64 位)进行了测试顺便说一句，有些客户面临搬家的问题。

*** 通过 Firefox，即使在客户端系统上，一切也都很棒。

*** 我关注了this issue , 但它不符合我的问题。

Answer 1

谢谢@Mike，它成功了!!

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

我检查了 documentation ;在初始化 map 时，有一个选项 pixelRatio，默认情况下由 window.devicePixelRatio 填充。我在奇怪的设备上检查了它，发现它在缩放 100% 时的值类似于 1.0700000524520874，但在我们的设备中恰好是 1。我现在以这种方式初始化我的 map :

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

我在不同的缩放下测试了它，没问题。