OpenLayers3 및 AngularJS의 정적 이미지 회전

-2

맞춤형지도를 만들 때 angular-openlayers-directive을 사용하고 있습니다. this example을 수정하려고 시도했지만 맞춤 레이어의지도 대신 정적 이미지를 사용했습니다. 버그로 인해 오류가 발생합니다.OpenLayers3 및 AngularJS의 정적 이미지 회전

지도로서의 커스텀 이미지의 회전의 해결책을 찾고 있습니다. 이걸 좀 도와 주실 래요? 코드를 보거나 오류 메시지 여기가 문제가 무엇인지 구체적으로 말하기 어렵다, 그러나를 모른 채

출처

2017-04-07 tom moc

어떤 오류가 있습니까? 어떤 변화를 시도 했습니까? 현상금으로도 지금까지 제공된 정보로 답을 얻지 못할 것 같습니다. – Claies

정적 이미지에 어떤 프로젝션을 사용하고 있습니까? 지도가로드 중입니까? –

는 정적 이미지 회전 수정 한 예입니다 :

<!DOCTYPE html> 
 
<html ng-app="demoapp"> 
 

 
<head> 
 
    <script src="https://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.js"></script> 
 
    <script src="https://tombatossals.github.io/angular-openlayers-directive/bower_components/angular/angular.js"></script> 
 
    <script src="https://tombatossals.github.io/angular-openlayers-directive/bower_components/angular-sanitize/angular-sanitize.js"></script> 
 
    <script src="https://tombatossals.github.io/angular-openlayers-directive/dist/angular-openlayers-directive.js"></script> 
 
    <link rel="stylesheet" href="https://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.css" /> 
 
    <script> 
 
    var app = angular.module('demoapp', ['openlayers-directive']); 
 
    app.controller('DemoController', ['$scope', '$http', 'olData', function($scope, $http, olData) { 
 

 
     angular.extend($scope, { 
 
     degrees: 0, 
 
     center: { 
 
      coord: [900, 600], 
 
      zoom: 3 
 
     }, 
 
     defaults: { 
 
      view: { 
 
      projection: 'pixel', 
 
      extent: [0, 0, 1800, 1200], 
 
      rotation: 0 
 
      } 
 
     }, 
 
     static: { 
 
      source: { 
 
      type: "ImageStatic", 
 
      url: "http://blog.wallpops.com/wp-content/upLoads/2013/05/WPE0624.jpg", 
 
      imageSize: [1800, 1200] 
 
      } 
 
     }, 
 
     view: { 
 
      extent: [0, 0, 1800, 1200], 
 
      rotation: 0 
 
     } 
 

 
     }); 
 

 
     $scope.degreesToRadians = function() { 
 
     $scope.view.rotation = parseFloat($scope.degrees, 10).toFixed(2) * (Math.PI/180); 
 
     }; 
 

 
     $scope.$watch('view.rotation', function(value) { 
 
     $scope.degrees = ($scope.view.rotation * 180/Math.PI).toFixed(2); 
 
     }); 
 
    }]); 
 
    </script> 
 
</head> 
 

 
<body ng-controller="DemoController"> 
 
    <openlayers ol-center="center" ol-defaults="defaults" ol-view="view" custom-layers="true" height="400px"> 
 
    <ol-layer ol-layer-properties="static"></ol-layer> 
 
    </openlayers> 
 
    <h1>View rotation example</h1> 
 
    <p>You can interact with the view rotation of your map.</p> 
 

 
    <p> 
 
    <input type="range" min="-180" max="180" ng-change="degreesToRadians()" ng-model="degrees" /> Degrees: {{ degrees }}</p> 
 
    <pre ng-bind="view | json"></pre> 
 
</body> 
 

 
</html>

을 그리고 Plunker의 동일한 예 : http://plnkr.co/edit/zw7QUyFfWXqnNE9rkdjZ?p=preview

출처

2017-04-13 04:17:32

OpenLayers3 및 AngularJS의 정적 이미지 회전

답변

관련 문제