OpenLayers日晷投影使用及视图中心异常问题技术咨询

Hey there! Let's break down your questions step by step, starting with your initial gnomonic projection queries, then tackle that frustrating view center issue you're facing.

Initial Questions About Gnomonic Projection in OpenLayers & GeoServer #

• Does OpenLayers support gnomonic projection?
  Yes, but it doesn't include this projection out of the box. You’ll need to use proj4js to define it—which you’ve already started doing, that’s the right move!
• Can you implement it via ol/proj/Projection?
  Exactly. By registering your proj4 definition with OpenLayers using ol/proj/proj4.register(), you’re creating a custom projection that OpenLayers can fully work with. This is the standard approach for non-default projections.
• Do you need to republish data in GeoServer?
  Nope! As long as your GeoServer serves WMTS in a projection that can transform to/from your gnomonic projection (like EPSG:900913/3857 you’re using), you don’t need to reproject your data or publish new layers. OpenLayers handles on-the-fly transformation between the source projection and your custom view projection.

Fixing the View Center "Snap Back" Issue #

Looking at your code, the problem stems from a few mismatches between your projection setup and view configuration. Let’s fix them:

1. Set a valid extent for the gnomonic projection
   Gnomonic projections can’t cover the entire globe (they distort heavily far from the center), so using the full Web Mercator extent breaks the view behavior. Define a smaller, realistic extent instead:

gnom.setExtent([-10000000, -10000000, 10000000, 10000000]); // Adjust based on your map area

2. Explicitly link the view to your custom projection
   Your current view defaults to Web Mercator, which is why dragging snaps back to [0,0] in that CRS. Tell the view to use your gnomonic projection:

view: new View({
  projection: gnom, // Critical: associate view with your custom projection
  center: [0, 0],
  zoom: 5
})

3. Fix WMTS tile grid & wrap settings
   You’re hardcoding a Web Mercator tile grid but using it with a gnomonic projection. Let OpenLayers auto-detect the tile grid from WMTS capabilities instead, and disable wrapX (gnomonic projections don’t wrap around the globe):

let map_source = new WMTS({
  url: 'http://10.1.1.4:8080/geoserver/gwc/service/wmts',
  layer: "world_weitu:world_l8",
  matrixSet: 'EPSG:900913',
  format: 'image/png',
  projection: gnom,
  wrapX: false
})

4. Tweak your proj4 definition
   Your original definition uses EPSG:3857 as the ellps/datum, which is a projected CRS. Switch to WGS84 (a geodetic CRS) for more accurate transformations:

proj4.defs( "GNOM", "+proj=gnom +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs" )

Adjusted Full Code Snippet #

import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import Map from "ol/Map";
import View from "ol/View";
import proj4 from "proj4";
import { get as getProjection } from "ol/proj";
import { register } from "ol/proj/proj4";
import WMTS from 'ol/source/WMTS'

proj4.defs( "GNOM", "+proj=gnom +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs" )
register(proj4)

var gnom = getProjection("GNOM")
// Set valid extent for gnomonic projection
gnom.setExtent([-10000000, -10000000, 10000000, 10000000]);

let map_source = new WMTS({
  url: 'http://10.1.1.4:8080/geoserver/gwc/service/wmts',
  layer: "world_weitu:world_l8",
  matrixSet: 'EPSG:900913',
  format: 'image/png',
  projection: gnom,
  wrapX: false
})

var map = new Map({
  layers: [
    new TileLayer({ source: map_source })
  ],
  target: "map",
  view: new View({
    projection: gnom,
    center: [0, 0],
    zoom: 5
  })
});

These changes should fix the view snapping issue and let you drag/zoom normally with the gnomonic projection.

内容的提问来源于stack exchange，提问作者VanChun