使用 openlayer 在 OSM 中添加层时遇到问题

Question

我正在尝试使用 OL 在 OSM 地图上加载图层。我拥有的服务需要身份验证 header，我已经编写了代码，但不知何故无法正常工作。这是我的代码

function customLoader(tile, src) {
        var client = new XMLHttpRequest();
        client.open('GET', src);
        client.setRequestHeader("Ocp-Apim-Subscription-Key","XXXXXXXXXXXXXX");
        client.onload = function() {
          tile.getImage().src = src;
        };
        client.send();
      }
      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
          extent: [-425988.3826589292,6390953.66876267,161047.99457094132,6677439.650775372],
          source: new ol.source.TileWMS({
            url: 'https://url.com/WMSServer',
            tileLoadFunction: customLoader,
            params: {'LAYERS': '21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0', 'TILED': true},
            serverType: 'WMSServer',
            transition: 0
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-4.095013, 56.550473],
          zoom: 4
        })
      });

我不确定我做错了什么。

Answer 1

我也无法使用 base64 方法。最好使用 https://openlayers.org/en/latest/apidoc/module-ol_Tile.html#~LoadFunction 中的对象 url 方法（但请注意，对象 url 如果不撤销可能会导致内存泄漏）

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM({
              url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
              maxZoom: 17,
              tileLoadFunction: function (tile, src) {
                var xhr = new XMLHttpRequest();
                xhr.responseType = 'blob';
                xhr.addEventListener('load', function (evt) {
                  var data = this.response;
                  if (data !== undefined) {
                    var url = URL.createObjectURL(data);
                    tile.getImage().addEventListener('load', function () {
                      URL.revokeObjectURL(url);
                    });
                    tile.getImage().src = url;
                  } else {
                    tile.setState(3);
                  }
                });
                xhr.addEventListener('error', function () {
                  tile.setState(3);
                });
                xhr.open('GET', src);
                xhr.send();
              }
            })
          })
        ],
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
    </script>
  </body>
</html>

使用 openlayer 在 OSM 中添加层时遇到问题

Trouble in adding an layer in OSM using openlayer

javascript

jquery

openlayers

openstreetmap