Отображение карты OpenLayers с использованием представления AngularJS

Question

Отображение карты OpenLayers с использованием представления AngularJS

0

Я создаю приложение AngularJS, которое предоставляет карту OpenLayers. Я использовал этот простой пример (буквально просто скопировав и вставив в файл HTML) запустил его в браузере и - неудивительно, - он сработал.

Затем я добавил обложку AngularJS, чтобы я мог включить ее в частичный объявленный и перенаправленный через 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
    });

Josh Brass 26 нояб. 2015, в 12:54

Источник

Теги:

angularjs

openlayers

ng-view

1 ответ

Ещё вопросы

Jose Rocha · Accepted Answer · 2015-11-26T09-45-00.000Z

Если вы рассматриваете в использовании директивы, проверьте это

Plunker

EDIT Я изменил его для более простого использования

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>

Скажите, если бы это было то, что вы ищете

Это работает - если вы можете объяснить, почему это сработало, а мое - нет, я отмечу это как правильное :)
Это не полное объяснение, но в основном это потому, что нагрузки и рендеринг не синхронизированы. Так как вы используете представление с углом, вам нужно разрешить углу иметь дело с инициализацией карты. Я надеюсь, что какой-то другой человек может объяснить вам более подробно. И я рад, что смог вам помочь. Не нужно отмечать как правильное, просто поставьте голосование, чтобы я мог помочь другим людям, которые сталкиваются с той же проблемой.