我正在尝试使用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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
}
});
例如,请参阅:http://tombatossals.github.io/angular-leaflet-directive/#!/examples/tiles