使用 ng-view AngularJS 显示 OpenLayers 地图

Question

我正在构建一个公开 OpenLayers 地图的 AngularJS 应用程序。我在浏览器中使用了 this 简单示例（实际上只是复制并粘贴到 HTML 文件中）运行并且 - 毫不奇怪 - 它起作用了。

然后我向它添加了 AngularJS 包装，以便我可以将它包含在部分声明中并通过 app.js 路由到（下面）并且 OpenLayers 库似乎无法正常工作任何更多。我没有在控制台中收到错误消息（运行在 IE11 上），但我也没有收到可见的地图。我已经尝试用地图替换控制器中的一些简单数据绑定并且它正在工作，并且我也在地图上方显示 sub-heading。

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.11.2/build/ol.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
</head>

<body ng-app="app" ng-controller="MainController">
    <h1>Map Viewer</h1>
    <div ng-view></div>
</body>

</html>

app.js

angular.module("app", ["ngRoute"])
    .config(function($routeProvider){
        $routeProvider
            .when("/main", {
                templateUrl: "main.html",
                controller: "MainController"
            })
            .otherwise({redirectTo: "/main"});
    });

main.html

<h2>My Map</h2>
<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.MapQuest({layer: 'sat'})
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });
</script>

main.ctrl.js

angular.module("app")
    .controller("MainController", function($scope){
        //Do something
    });

Answer 1

如果您考虑使用指令，请检查此

Plunker

编辑为了更简单的使用，我修改了它

angular.module("app")
.controller("MainController", function($scope){
    //Do something
})
.directive('mapDir', function () {
return {
    restrict: 'A',
    link: function ($scope) {
       var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([37.41, 8.82]),
            zoom: 4
          })
        });
    }
};
});

并查看

<h2>My Map</h2>
<div map-dir id="map" class="map"></div>

告诉我这是否是您要找的东西

使用 ng-view AngularJS 显示 OpenLayers 地图

Display OpenLayers map using ng-view AngularJS

angularjs

openlayers

ng-view