Показать карту OpenLayers с помощью ng-view AngularJS

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

Затем я добавил обложку 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 
    });

источник

2015-11-26 Josh Brass

Если учесть при помощи директивы проверить эту

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>

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

источник

2015-11-26 11:31:42

Это делает работу - если вы можете объяснить, почему это работает и мой не то я пометить его как правильно :) –

благодарственного вы кстати! –

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

Показать карту OpenLayers с помощью ng-view AngularJS

ответ

Смежные вопросы