时间戳

首页 > 解决方案 > 加载 WMS 层时 Mapbox GL JS HTML webmap 出错

html - 加载 WMS 层时 Mapbox GL JS HTML webmap 出错

问题描述


我发现了一些关于类似问题的帖子，虽然这些都是关于 Android 平台的，所以希望有人能提供帮助。
我是一名初学者（不是 Web 开发人员），尝试使用 Mapbox GL JS (CDN) 创建 HTML Web 地图，并覆盖 WMS 图层。我的 web 地图以基本样式正确显示，但是，现在我在浏览器中打开 HTML 文件时添加了 WMS 图层代码，页面无法加载。我已经设法让 WMS 服务器根据特定的边界框 (CRS EPSG:3857) 从浏览器查询中返回地图图像，所以我很确定 WMS 查询是正确的。我怀疑添加 WMS 源/层（我称之为“FMfP_FZ2”）的代码中存在错误。
我尝试用成功的浏览器 WMS 查询中的实际 EPSG:3857 坐标替换 {bbox-epsg-3857}，但这并不能解决问题。我也尝试将类型更改为图像。
最终，我会将 HTML 页面添加到我的 wordpress 网站，然后使用交互式工具、数据集创建/编辑和图像捕获来增强它，因此我不只是使用 Mapbox Studio
提前感谢您的帮助！
斯图尔特

可以在此处下载包含代码的文本文件，或者参见下面的片段（访问令牌和样式 URL 已删除）：

<html>
  <head>
    <title>Title here</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = 'accesstokenhere'; //Access token
      var map = new mapboxgl.Map({
          container: 'map', // container ID
          style: 'stylehere', // style URL
          center: [-1.082, 53.958], // starting position [lng, lat]
          zoom: 9 // starting zoom
      });

      map.on('load', function () {
      map.addSource('FMfP_FZ2', {
      'type': 'raster',
      'tiles': [
      "https://environment.data.gov.uk/spatialdata/flood-map-for-planning-rivers-and-sea-flood-zone-2/wms?Request=GetMap&Service=WMS&version=1.3.0&layers=Flood_Map_for_Planning_Rivers_and_Sea_Flood_Zone_2&Format=image/png&CRS=EPSG:3857&bbox={bbox-epsg-3857}&width=500&height=500"
      ],
      'tilesize':500
      });
      map.addLayer(
      {
      'id': 'FMfP_FZ2_Layer',
      'type': 'raster',
      'source': 'FMfP_FZ2',
      );
      });
    </script>
  </body>
</html>

还可以选择使用 GetFeature 和 WFS 覆盖的此 URL：https ://environment.data.gov.uk/spatialdata/flood-map-for-planning-rivers-and-sea-flood-zone-2/wfs

标签： htmlmapbox-gl-jswms

解决方案

如果将代码放在 codepen.io 上会更容易调试，包括访问令牌和样式 URL。（如果您担心，您可以随时删除它们并轮换访问令牌）。

您的代码看起来不错，但我注意到：

  • 应该tileSize不是tilesize。
  • 我猜 500 不是有效的tileSize，你应该尝试 256 或 512。

推荐阅读