带有MEANjs的角叶指令中的geojson
我试图从角传单指令中复制这示例，但使用在MEAN.JS中实现的角MVC框架。角传单指令接受并显示我在控制器中指定的正确的tiles、center和maxBounds，但是无法呈现任何geojson，即使我将geojson直接粘贴到控制器中而不是用$http.get调用它。
我将更新更多的具体例子，因为我使他们在我的一边。
这工作：
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../lib/angular/angular.js"></script>
<script src="../lib/leaflet/dist/leaflet.js"></script>
<script src="../lib/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
<link rel="stylesheet" href="../lib/leaflet/dist/leaflet.css" />
</head>
<body ng-controller="GeoJSONController">
<leaflet lf-center="wisconsin" geojson="geojson" defaults="defaults" tiles="tiles" width="100%" height="480px"></leaflet>
<h1>Simple GeoJSON example</h1>
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller("GeoJSONController", ['$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
angular.extend($scope, {
wisconsin: {
lat: 44.63,
lng: -90.02,
zoom: 6
},
defaults: {
scrollWheelZoom: false
},
tiles: {
Name: 'Stamen Toner Lite',
url: 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}',
options: {
ext: 'png',
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}
},
geojson: {
'data': {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[-94.00, 48.00],
[-94.00, 42.00],
[-85.00, 42.00],
[-85.00, 48.00],
[-94.00, 48.00]
]
]
}
}]
},
'style': {
'fillColor': '#ff0000',
'fillOpacity': 0.5,
'color': '#000000',
'opacity': 0.2
}
}
});
}]);
</script>
</body>
</html>UPDATE在使用MEAN.js的原始实例时，不知何故无法重新生成问题。我想这意味着问题在别处。如果是这样的话，我会删除这个问题。
UPDATE 2情节变复杂了:我只是在我的问题项目中覆盖了我的/public//map目录，用我的工作示例中的一个从原始的MEAN.js实例(它在我的原始项目中工作，而不是我的问题项目)编写的目录。
回答 1
Stack Overflow用户
发布于 2015-12-11 19:31:56
当您没有在$http实现中包含实际的代码时，很难猜出哪里出了问题。我注意到的一件事是，您在定义GeoJSON集合时使用了单引号。如果您尝试以JSON的形式加载它，它将失败，因为JSON属性名称和值应该被双引号包围。除此之外，您的代码可以很好地处理一个简单的$http调用：
$http.get('collection.geojson').then(function (response) {
angular.extend($scope, {
geojson: {
data: response.data,
style: {
'fillColor': '#ff0000',
'fillOpacity': 0.5,
'color': '#000000',
'opacity': 0.2
}
}
});
});
angular.extend($scope, {
wisconsin: {
lat: 44.63,
lng: -90.02,
zoom: 6
},
defaults: {
scrollWheelZoom: false
},
tiles: {
Name: 'Stamen Toner Lite',
url: 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}',
options: {
ext: 'png',
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}
}
});柱塞实例：http://plnkr.co/edit/OoqwpNLaUhiXLm26mMtB?p=preview
https://stackoverflow.com/questions/34230087
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号