Question

我正在构建一个公开OpenLayers地图的AngularJS应用程序。我使用this简单的例子（字面意思只是复制并粘贴到HTML文件中）在浏览器中运行它 - 毫不奇怪 - 它有效。

然后我添加了AngularJS Wrapping，以便我可以将其包含在部分声明中并通过app.js（下面）路由到，并且OpenLayers库似乎不再起作用了。我没有在控制台中收到错误（在IE11上运行它），但我也没有得到可见的地图。我已经尝试用地图替换控制器中的一些简单数据绑定并且它正在工作，我也在地图上方显示了子标题。

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地图

1 个答案: