Question

我正在尝试将BingMaps图层添加到已初始化的地图。我遇到了一个我无法理解的错误。你有什么想法吗？我正在使用OpenLayers 5.3.1。

TypeError: r is null[Weitere Informationen] map.js:1:677385
    •   a http://localhost:8080/map/map.js:1 
    •   inverse http://localhost:8080/map/map.js:1 
    •   I http://localhost:8080/map/map.js:1 
    •   transformInv_ http://localhost:8080/map/map.js:1 
    •   u http://localhost:8080/map/map.js:1 
    •   t http://localhost:8080/map/map.js:1 
    •   getTile http://localhost:8080/map/map.js:1 
    •   manageTilePyramid http://localhost:8080/map/map.js:1 
    •   prepareFrame http://localhost:8080/map/map.js:1 
    •   renderFrame http://localhost:8080/map/map.js:1 
    •   renderFrame_ http://localhost:8080/map/map.js:1 
    •   animationDelay_ http://localhost:8080/map/map.js:1 
    •   <anonym> self-hosted:974

我的打字稿看起来像这样：

import Map from 'ol/Map';
import OlTileLayer from 'ol/layer/Tile';
import BingMaps from 'ol/source/BingMaps';

@injectable()
export class MapWrapper {
    private _map: Map;

    public getMap() {
        return this._map;
    }

    set map(value: Map) {
        this._map = value;
    }

    public createBingLayer(bingKey: string, style : string) : OlTileLayer {
        return new OlTileLayer({
            visible: true,
            preload: Infinity,
            source: new BingMaps({
                key: bingKey,
                imagerySet: style
            })
        });
    }
}

HTML中的javascript就是这样：

    function addBingMap() {
      var realMap = map.mapWrapper.getMap();
      var bingLayer = map.mapHolder.createBingLayer("someAPIKey", "Road");
      //realMap.getLayers().insertAt(0, bingLayer);
      realMap.addLayer(bingLayer);
    }

更新

我发现我看到的错误是由BingMaps磁贴重新投影到EPSG：32632引起的，我的所有其他层都在使用。该错误在proj4 Transformer（）方法中引发。我为ol创建了一个故障单，因为我认为它至少应该引发有意义的错误消息，即使在无法将BingMaps（网络墨卡托投影）与使用其他投影的图层混合的情况下。

Answer 1

我无法重现该错误，但由于Bing源在准备好使用之前会异步验证API密钥，因此您可以尝试

function addBingMap() {
  var realMap = map.mapWrapper.getMap();
  var bingLayer = map.mapHolder.createBingLayer("someAPIKey", "Road");
  var onKey = bingLayer.getSource().on("change", function() {
    if (bingLayer.getSource().getState() == "ready") {
      ol.Observable.unByKey(onKey);
      realMap.addLayer(bingLayer);
    }
  });
}

在无法完成的转换（例如从极点转换为网络墨卡托）的情况下，可以忽略以下错误：

    var forward = ol.proj.getTransform(projection1, projection2);
    var inverse = ol.proj.getTransform(projection2, projection1);

    ol.proj.addCoordinateTransforms(
        projection1,
        projection2,
        function(coordinate) {
            try {
                return forward(coordinate)
            } catch (e) {
                return [undefined, undefined];
            }
        },
        function(coordinate) {
            try {
                return inverse(coordinate)
            } catch (e) {
                return [undefined, undefined];
            }
        }
    );

有效的直接转换失败的地方，但可以使用中间投影使其起作用：

    var forward1 = ol.proj.getTransform(projection1, intermediate);
    var forward2 = ol.proj.getTransform(intermediate, projection2);
    var inverse1 = ol.proj.getTransform(projection2, intermediate);
    var inverse2 = ol.proj.getTransform(intermediate, projection1);

    ol.proj.addCoordinateTransforms(
        projection1,
        projection2,
        function(coordinate) {
            try {
                return forward2(forward1(coordinate));
            } catch (e) {
                return [undefined, undefined];
            }
        },
        function(coordinate) {
            try {
                return inverse2(inverse1(coordinate));
            } catch (e) {
                return [undefined, undefined];
            }
        }
    );

无法动态添加BingMaps图层

1 个答案: