如何在Google Maps上正确覆盖WMS图块？在Google Maps上叠加时，WMS瓷砖会移动

发布于 2025-02-01 15:51:26 字数 4147 浏览 5 评论 0原文

我开始使用GIS。

我正在尝试在GeoServer上发布地理标记语言（GML）文件。其加载到形状

为此，我使用 ogr2ogr tool ogr2ogr -f“ esri shapefile” adur.shp adur.gml.gml

我在GeoServer上发布了转换后的ShapeFile并将中，并将其加载到我作为WMS层的应用。这是以下代码shippet

<!DOCTYPE html>
<html>

<head>
  <title>WMS and Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    const EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];

    const xyzToBounds = (x, y, z) => {
      let tileSize = (EXTENT[1] * 2) / Math.pow(2, z);
      let minx = EXTENT[0] + x * tileSize;
      let maxx = EXTENT[0] + (x + 1) * tileSize;
      // remember y origin starts at top
      let miny = EXTENT[1] - (y + 1) * tileSize;
      let maxy = EXTENT[1] - y * tileSize;
      return [minx, miny, maxx, maxy];
    }

    const getWMSTileUrl = (coordinates, zoom) => {
      return (
        "http://wms.prod.qgiscloud.com/abhilash/cloud" +
        "?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.0" +
        "&LAYERS=adur" +
        "&FORMAT=image%2Fpng" +
        "&SRS=EPSG:3857&WIDTH=256&HEIGHT=256&TRANSPARENT=TRUE" +
        "&BBOX=" +
        xyzToBounds(coordinates.x, coordinates.y, zoom).join(","))
    };

    function initMap() {
      let map = new google.maps.Map(document.getElementById("map"), {
        zoom: 19,
        center: {
          lat: 50.83238,
          lng: -0.330478
        },
        tilt: 0,
        mapTypeId: window.google.maps.MapTypeId.HYBRID
      });

      let layer = new google.maps.ImageMapType({
        getTileUrl: getWMSTileUrl,
        minZoom: 0,
        maxZoom: 19,
        opacity: 1.0
      });
      layer.addListener("tilesloaded", () => {
        console.log("Layers loaded")
      });
      map.overlayMapTypes.push(layer);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
  </script>
</body>

</html>

我注意到边界无法正确对齐。我看到边界有所转变。

注意： 请注意，我在演示中使用了QGIS Cloud的WMS链接，而不是我本地GeoServer的WMS url

我将相同的形状文件导入QGIS来检查是否有任何错误使用转换后的shapefile。但是边界在这里正确对齐。我正在附上下面的两个屏幕截图以进行比较。您会看到在第一个图像中未正确对齐边界。这里有一些转变。

我正在附加GML并转换后的形状文件

此屏幕截图来自我的应用程序，该应用程序未正确对齐。

此屏幕截图来自QGIS，其中边界正确对齐

更新：

几次尝试后，我在QGIS中添加了两次相同的WMS层。

一个带有 epsg的：4326 -WGS 84 crs

，另一个带有EPSG：27700 OSGB36/英国国家网格 -CRS

这就是结果。具有EPSG的WMS层：27700 CRS完美对齐。

但是我在应用程序中无法对GeoServer /无法做同样的事情。 GeoServer上的CRS已经在EPSG中：27700。

原文

I am getting started with GIS.

I am trying to publish a Geography Markup Language (GML) file on geoserver. For this I converted it to a shape file using ogr2ogr tool

ogr2ogr -f "ESRI Shapefile" adur.shp adur.gml

I published the converted Shapefile on geoserver and loaded it in my application as a WMS layer. Here is the jsfiddle link for the below code snippet https://jsfiddle.net/3kmwpsu2/

<!DOCTYPE html>
<html>

<head>
  <title>WMS and Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    const EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];

    const xyzToBounds = (x, y, z) => {
      let tileSize = (EXTENT[1] * 2) / Math.pow(2, z);
      let minx = EXTENT[0] + x * tileSize;
      let maxx = EXTENT[0] + (x + 1) * tileSize;
      // remember y origin starts at top
      let miny = EXTENT[1] - (y + 1) * tileSize;
      let maxy = EXTENT[1] - y * tileSize;
      return [minx, miny, maxx, maxy];
    }

    const getWMSTileUrl = (coordinates, zoom) => {
      return (
        "http://wms.prod.qgiscloud.com/abhilash/cloud" +
        "?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.0" +
        "&LAYERS=adur" +
        "&FORMAT=image%2Fpng" +
        "&SRS=EPSG:3857&WIDTH=256&HEIGHT=256&TRANSPARENT=TRUE" +
        "&BBOX=" +
        xyzToBounds(coordinates.x, coordinates.y, zoom).join(","))
    };

    function initMap() {
      let map = new google.maps.Map(document.getElementById("map"), {
        zoom: 19,
        center: {
          lat: 50.83238,
          lng: -0.330478
        },
        tilt: 0,
        mapTypeId: window.google.maps.MapTypeId.HYBRID
      });

      let layer = new google.maps.ImageMapType({
        getTileUrl: getWMSTileUrl,
        minZoom: 0,
        maxZoom: 19,
        opacity: 1.0
      });
      layer.addListener("tilesloaded", () => {
        console.log("Layers loaded")
      });
      map.overlayMapTypes.push(layer);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
  </script>
</body>

</html>

I noticed that the boundaries are not aligned properly. I see some shift in the boundaries.

Note : Please note that I used QGIS cloud's WMS link in the demo instead of my local geoserver's WMS URL

I imported the same shape file into QGIS to check if there is anything wrong with the converted Shapefile. But the borders are aligned properly here. I am attaching both the screenshots below for comparison. You can see that the borders are not aligned properly in the first image. There is some shift here.

I am attaching the GML and converted Shape files here for your reference.

This screenshot is from my application where the borders are not aligned properly.