OL 功能在缩小/缩小时移动答案

【问题标题】：OL features move on zoom out/inOL 功能在缩小/缩小时移动
【发布时间】：2021-05-05 11:54:52
【问题描述】：

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

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 (Official Build) (64-bit) 和 Firefox 88.0 (64-bit) 进行了测试顺便说一句，有些客户面临搬家问题。

*** 通过 Firefox，即使在客户端系统上也一切正常。

*** 我关注了this issue，但它与我的问题不符。

【问题讨论】：

遇到了同样的问题。我在将笔记本电脑显示分辨率从 100% 更改为 125% 时检测到它。然后我有浮动多边形。公平地说，我直到今天都没有修复它。 :(
您可以尝试在地图选项中指定一个固定的整数 pixelRatio，而不是让它使用设备值。

标签： vue.js openlayers quasar-framework

【解决方案1】：

谢谢@Mike，它有效！！

您可以尝试在地图选项中指定一个固定的整数 pixelRatio，而不是让它使用设备值。 – 迈克

我检查了documentation;在初始化 Map 时，有一个选项 pixelRatio，默认填充为 window.devicePixelRatio。我在奇怪的设备上检查了它，发现它在缩放 100% 时是像 1.0700000524520874 这样的值，但在我们的设备中它正是 1。我现在以这种方式初始化我的地图：

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

我用不同的变焦测试过，还可以。

【讨论】：