Add the modify circle interaction. (#986)

Add the modify circle interaction
camptocamp · Apr 13, 2016 · 789ed82 · 789ed82
1 parent b00d722
commit 789ed82
Show file tree

Hide file tree

Showing 3 changed files with 641 additions and 0 deletions.
diff --git a/examples/modifycircle.html b/examples/modifycircle.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+  <head>
+    <title>Modify circle example</title>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="stylesheet" href="../node_modules/openlayers/css/ol.css" type="text/css">
+    <style>
+        #map {
+          width: 800px;
+          height: 400px;
+        }
+    </style>
+  </head>
+  <body ng-controller="MainController as ctrl">
+    <div id="map" ngeo-map="ctrl.map"></div>
+    <p id="desc">
+      This examples shows how to use the
+      <code>ngeo.interaction.ModifyCircle</code>. This interaction allows to
+      resize a circle-shaped polygon.
+    </p>
+    <script src="../node_modules/angular/angular.js"></script>
+    <script src="/@?main=modifycircle.js"></script>
+    <script src="default.js"></script>
+    <script src="../utils/watchwatchers.js"></script>
+    <script src="../node_modules/angular-gettext/dist/angular-gettext.js"></script>
+  </body>
+</html>
diff --git a/examples/modifycircle.js b/examples/modifycircle.js
@@ -0,0 +1,90 @@
+goog.provide('modifycircle');
+
+goog.require('ngeo.interaction.ModifyCircle');
+goog.require('ngeo.mapDirective');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+goog.require('ol.geom.Circle');
+
+
+/** @const **/
+var app = {};
+
+
+/** @type {!angular.Module} **/
+var module = angular.module('app', ['ngeo']);
+
+
+/**
+ * @constructor
+ * @ngInject
+ */
+app.MainController = function() {
+
+  /**
+   * @type {ol.Map}
+   * @export
+   */
+  this.map = new ol.Map({
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.MapQuest({layer: 'sat'})
+      })
+    ],
+    view: new ol.View({
+      center: [-10997148, 4569099],
+      zoom: 4
+    })
+  });
+
+  var map = this.map;
+
+  var circle = new ol.geom.Circle([-10691093, 4966327], 465000);
+
+  /**
+   * @type {ol.Collection.<ol.Feature>}
+   * @export
+   */
+  this.features = new ol.Collection();
+
+  this.features.push(new ol.Feature({
+    geometry: ol.geom.Polygon.fromCircle(circle),
+    color: '#000000',
+    label: 'Circle 1',
+    opacity: '0.5',
+    stroke: '2',
+    isCircle: true
+  }));
+
+  var vectorSource = new ol.source.Vector({
+    features: this.features
+  });
+  var vectorLayer = new ol.layer.Vector({
+    source: vectorSource
+  });
+
+  // Use vectorLayer.setMap(map) rather than map.addLayer(vectorLayer). This
+  // makes the vector layer "unmanaged", meaning that it is always on top.
+  vectorLayer.setMap(map);
+
+  /**
+   * @type {ngeo.interaction.ModifyCircle}
+   * @export
+   */
+  this.interaction = new ngeo.interaction.ModifyCircle(
+    /** @type {olx.interaction.ModifyOptions} */({
+      features: this.features
+    }));
+
+  var interaction = this.interaction;
+  interaction.setActive(true);
+  map.addInteraction(interaction);
+
+};
+
+
+module.controller('MainController', app.MainController);