角度传单指令产生许多 GET file://c.tile.openstreetmap.org/17/38591/4926

Angular Leaflet Directive yielding many GET file://c.tile.openstreetmap.org/17/38591/49266.png net::ERR_FILE_NOT_FOUND errors

本文关键字：tile openstreetmap org 4926 38591 file 单指令 GET 许多      更新时间：2023-09-26

我正在尝试使用Leaflet Angular指令。 我遵循了一些看似简单的步骤，但没有显示地图，并且我在控制台中收到一堆类似于以下内容的错误：

获取 file://c.tile.openstreetmap.org/17/38591/49266.png 网：：ERR_FILE_NOT_FOUND

这是我的控制器：

app.controller('MainController', [ '$scope', function($scope) {
    $scope.mapCenter = { lat: 40.741934, lng: -74.004897, zoom: 17 }
}]);

这是标记：

<div class="main" ng-controller="MainController">
    <div class="container-fluid" id="map-canvas">
        <leaflet center="mapCenter"></leaflet>
    </div>
</div>

如果您尚未修复问题，那是因为您从文件系统打开网页，而不是通过（可能是本地）主机/服务器，并且因为角度传单指令默认的切片层 URL 模板未指定协议。

因此，您的浏览器会重复使用用于打开页面的相同协议，即 file:// .但是，当然，您的文件系统上没有OSM磁贴，因此浏览器无法检索任何磁贴。

您可以通过服务器打开页面或指定切片图层的 URL 模板（包括http://或https://协议）轻松解决此问题。为此，您必须使用 tiles 属性扩展$scope，该属性是至少具有 url 属性的对象。

可能是这样的：

angular.extend($scope, {
    tiles: {
        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        options: {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
    }
});

例如，请参阅：http://tombatossals.github.io/angular-leaflet-directive/#!/examples/tiles

相关文章：