OpenLayers3 和 AngularJS 中的静态图像旋转答案

【问题标题】：Static image rotation in OpenLayers3 and AngularJSOpenLayers3 和 AngularJS 中的静态图像旋转
【发布时间】：2017-04-07 13:14:54
【问题描述】：

我正在使用angular-openlayers-directive 创建自定义地图。尝试修改 this example ，使用静态图像而不是自定义图层中的地图。 Bug 它会出错。

我正在寻找将自定义图像旋转为地图的解决方案。你能帮忙吗？

【问题讨论】：

什么错误？你试图做出哪些改变？即使有赏金，您也不太可能根据目前提供的信息得到答案。
静态图像使用什么投影？地图正在加载吗？

标签： angularjs openlayers openlayers-3 angular-openlayers

【解决方案1】：

如果没有看到您的代码或不知道错误消息，很难具体说明问题所在，但这是修改为旋转静态图像的示例：

<!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

【讨论】：