OpenLayers-在地图视图上调用setZoom()后,getCoordinateFromPixel的返回值保持不变

时间:2019-04-16 15:34:52

标签: javascript typescript gis openlayers openlayers-5

我有一个用例,我想确定某些坐标是否位于视口中可见的视图区域内。我们的方法是首先使用地图的getCoordinateFromPixel方法获取一些像素的坐标。这行得通,但是问题是我们还希望以编程方式放大。我们注意到,在地图上使用完全相同的参数调用getCoordinateFromPixel会在地图视图上调用setZoom之前和之后返回完全相同的结果。奇怪的是(?),我们还注意到,当我们在地图上对getCoordinateFromPixel的两次调用之间手动放大时,结果确实发生了变化。

以以下脚本为例:

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Feature from 'ol/Feature';

let markerView = new View({
    center: [5000, 1000],
    zoom: 2,
});

let map = new Map({
  target: 'map-container',
  layers: [
    new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
        url: './data/countries.json'
      }),
    })
  ],
  view: markerView
});

window.setTimeout(() => {
    console.log(JSON.stringify(map.getCoordinateFromPixel([0, 0])));
    map.getView().setZoom(5);
}, 2000);
window.setTimeout(() => {
    console.log(JSON.stringify(map.getCoordinateFromPixel([0, 0])));
}, 4000);

在OpenLayers项目中执行此操作时,即使我们进行了非常大的放大,在2000 ms之后运行的闭包也会在控制台上显示与4000 ms之后运行的闭包完全相同的内容!

我想知道是否有人知道解决方法,修复程序或仅仅是原因。我曾尝试查看可能触发地图的事件以在处理程序中重新执行getCoordinateFromPixel,但是当我们(以编程方式)更改缩放比例时,我并未找到触发地图的事件。

如果需要,我很乐意提供更多详细信息。

非常感谢

约书亚

1 个答案:

答案 0 :(得分:1)

如果您具有范围和地图大小,则可以轻松计算像素的坐标,而无需依靠getCoordinateFromPixel,由于某种原因,map.getView().on(['change:resolution','change:center'], function() { var size = map.getSize(); var extent = this.calculateExtent(size); var coordinate = [ extent[0] + (extent[2]-extent[0]) * pixel[0]/size[0], extent[1] + (extent[3]-extent[1]) * (size[1]-pixel[1])/size[1] ]; console.log(JSON.stringify(extent)); console.log(JSON.stringify(coordinate)); // as expected console.log(JSON.stringify(map.getCoordinateFromPixel(pixel))); // hasn't been updated }); 不会立即更新(已通过precompose事件更新了)。 x坐标相差很小(在800万范围内约有100米),但还不足以使其有意义。

map.getView().on(['change:resolution','change:center'], function() {
  map.once('precompose', function() {
    console.log(JSON.stringify(map.getCoordinateFromPixel(pixel)));
  });
});

rleid