如何使用 OpenLayers 从坐标获取正确的屏幕像素？

Question

这应该很简单，但我不确定在哪里可以找到我需要的信息。

当应用程序运行时单击白点时，

它将记录像

[750,216.66666666666666]

这样的坐标。

现在，将白点向左移动，直到它环绕并出现在右侧。

它将记录像

[-59.16853932584246,178.55640684382806]

这样的坐标。

X 坐标错误。

如果白点向右移动到大致相同的位置，

点击它会记录一个像

[1449.9848745225447,166.78267751332552]

这样的坐标，这就是我需要的。

我需要知道如何获取平移因子，以便将其应用于 X 坐标并获得正确的数字。

如何获得翻译因子？

const osm = new ol.source.OSM();

osm.setTileGridForProjection(
  "EPSG:4326",
  ol.tilegrid.createXYZ({ extent: [-180, -90, 180, 90] })
);

const tileLayer = new ol.layer.Tile({ source: osm });
const coordinate = [-97, 38];

const point = new ol.Feature({
  geometry: new ol.geom.Point(coordinate),
  properties: {}
});

const layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [point]
  }),

  style: (feature) => {
    const properties = feature.getProperties();
    let style;

    style = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({ color: "#FFF" }),
        stroke: new ol.style.Stroke({
          color: "#FFF",
          width: 2
        })
      })
    });

    return style;
  }
});

const map = new ol.Map({
  target: "map",
  layers: [tileLayer, layer],
  view: new ol.View({
    projection: "EPSG:4326",
    center: coordinate,
    zoom: 2
  }),
  controls: ol.control.defaults.defaults({ attribution: false, zoom: false })
});

map.on("click", (event) => {
  if (event.dragging) {
    return;
  }

  const pixel = map.getPixelFromCoordinate(coordinate);
  console.log(pixel);
});

ol.proj.get("EPSG:4326").setExtent([-180, -85, 180, 85]);

#map {
  height: 500px;
  width: 1500px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.2.1/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.2.1/dist/ol.min.js"></script>

<div id="map"></div>

Answer 1

计算您正在单击的包裹世界，然后根据世界宽度的数量调整特征坐标。

const osm = new ol.source.OSM();

osm.setTileGridForProjection(
  "EPSG:4326",
  ol.tilegrid.createXYZ({ extent: [-180, -90, 180, 90] })
);

const tileLayer = new ol.layer.Tile({ source: osm });
const coordinate = [-97, 38];

const point = new ol.Feature({
  geometry: new ol.geom.Point(coordinate),
  properties: {}
});

const layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [point]
  }),

  style: (feature) => {
    const properties = feature.getProperties();
    let style;

    style = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({ color: "#FFF" }),
        stroke: new ol.style.Stroke({
          color: "#FFF",
          width: 2
        })
      })
    });

    return style;
  }
});

const map = new ol.Map({
  target: "map",
  layers: [tileLayer, layer],
  view: new ol.View({
    projection: "EPSG:4326",
    center: coordinate,
    zoom: 2
  }),
  controls: ol.control.defaults.defaults({ attribution: false, zoom: false })
});

map.on("click", (event) => {
  if (event.dragging) {
    return;
  }

  const world = Math.floor((event.coordinate[0] + 180) / 360);
  const pixel = map.getPixelFromCoordinate(
    [coordinate[0] + 360 * world, coordinate[1]]
  );
  console.log(pixel);
});

ol.proj.get("EPSG:4326").setExtent([-180, -85, 180, 85]);

#map {
  height: 500px;
  width: 1500px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.2.1/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.2.1/dist/ol.min.js"></script>

<div id="map"></div>