OpenLayers - Return 在地图视图上调用 setZoom() 后 getCoordinateFromPixel 的值保持不变
OpenLayers - Return values of getCoordinateFromPixel stay the same after calling setZoom() on map view
我有一个用例,我想确定某些坐标是否位于视口中可见的视图部分内。我们的方法是首先使用地图的 getCoordinateFromPixel 方法获取一些像素的坐标。这可行,但问题是我们还想以编程方式放大。我们注意到,在地图上调用 setZoom 之前和之后,使用完全相同的参数 returns 在地图上调用 getCoordinateFromPixel 完全相同。奇怪的是(?)我们还注意到,当我们在两次调用地图上的 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 毫秒后的闭包 运行 将向控制台打印与 4000 毫秒后的 运行 完全相同的内容,即使我们有放大得非常明显!
我想知道是否有人知道解决方法、修复方法或只是其中的原因。我已经尝试查看地图触发的事件,可能会在处理程序中重新执行 getCoordinateFromPixel,但我没有找到当我们(以编程方式)更改缩放比例时地图触发的事件。
如果需要,我很乐意提供更多详细信息。
非常感谢,
约书亚
如果您有范围和地图大小,您可以轻松计算像素的坐标,而无需依赖 getCoordinateFromPixel
由于某种原因不会立即更新(它已通过预合成事件更新)。 x 坐标略有不同(800 万范围内大约有 100 米),但还不够明显。
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
});
.
map.getView().on(['change:resolution','change:center'], function() {
map.once('precompose', function() {
console.log(JSON.stringify(map.getCoordinateFromPixel(pixel)));
});
});
我有一个用例,我想确定某些坐标是否位于视口中可见的视图部分内。我们的方法是首先使用地图的 getCoordinateFromPixel 方法获取一些像素的坐标。这可行,但问题是我们还想以编程方式放大。我们注意到,在地图上调用 setZoom 之前和之后,使用完全相同的参数 returns 在地图上调用 getCoordinateFromPixel 完全相同。奇怪的是(?)我们还注意到,当我们在两次调用地图上的 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 毫秒后的闭包 运行 将向控制台打印与 4000 毫秒后的 运行 完全相同的内容,即使我们有放大得非常明显!
我想知道是否有人知道解决方法、修复方法或只是其中的原因。我已经尝试查看地图触发的事件,可能会在处理程序中重新执行 getCoordinateFromPixel,但我没有找到当我们(以编程方式)更改缩放比例时地图触发的事件。
如果需要,我很乐意提供更多详细信息。
非常感谢,
约书亚
如果您有范围和地图大小,您可以轻松计算像素的坐标,而无需依赖 getCoordinateFromPixel
由于某种原因不会立即更新(它已通过预合成事件更新)。 x 坐标略有不同(800 万范围内大约有 100 米),但还不够明显。
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
});
.
map.getView().on(['change:resolution','change:center'], function() {
map.once('precompose', function() {
console.log(JSON.stringify(map.getCoordinateFromPixel(pixel)));
});
});