[OpenLayers-Commits] r11940 - in sandbox/tschaub/editing: examples
lib lib/OpenLayers/Geometry lib/OpenLayers/Layer
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Mon May 2 19:12:18 EDT 2011
Author: tschaub
Date: 2011-05-02 16:12:17 -0700 (Mon, 02 May 2011)
New Revision: 11940
Added:
sandbox/tschaub/editing/examples/point-grid.html
sandbox/tschaub/editing/examples/point-grid.js
sandbox/tschaub/editing/examples/snap-grid.html
sandbox/tschaub/editing/examples/snap-grid.js
sandbox/tschaub/editing/lib/OpenLayers/Layer/PointGrid.js
Modified:
sandbox/tschaub/editing/lib/OpenLayers.js
sandbox/tschaub/editing/lib/OpenLayers/Geometry/Polygon.js
Log:
Snapping to a grid.
Added: sandbox/tschaub/editing/examples/point-grid.html
===================================================================
--- sandbox/tschaub/editing/examples/point-grid.html (rev 0)
+++ sandbox/tschaub/editing/examples/point-grid.html 2011-05-02 23:12:17 UTC (rev 11940)
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <title>OpenLayers Point Grid Example</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <style type="text/css">
+ .olControlAttribution {
+ left: 5px;
+ bottom: 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1 id="title">Point Grid Example</h1>
+
+ <div id="tags">
+ point grid
+ </div>
+
+ <div id="shortdesc">Use a PointGrid layer to display a grid of regularly spaced points</div>
+
+ <div id="map" class="smallmap"></div>
+
+ Grid rotation:
+ <select name="rotation" id="rotation">
+ <option value="-45">-45</option>
+ <option value="-30">-30</option>
+ <option value="-15">-15</option>
+ <option value="0">0</option>
+ <option value="15">15</option>
+ <option value="30">30</option>
+ <option value="45">45</option>
+ </select>
+
+
+ Grid spacing:
+ <select name="spacing" id="spacing">
+ <option value="10">10</option>
+ <option value="15">15</option>
+ <option value="20">20</option>
+ <option value="25">25</option>
+ <option value="30">30</option>
+ </select>
+
+
+ Max points:
+ <select name="max" id="max">
+ <option value="150">150</option>
+ <option value="250">250</option>
+ <option value="350">350</option>
+ </select>
+
+ <script src="../lib/OpenLayers.js"></script>
+ <script src="point-grid.js"></script>
+ </body>
+</html>
Added: sandbox/tschaub/editing/examples/point-grid.js
===================================================================
--- sandbox/tschaub/editing/examples/point-grid.js (rev 0)
+++ sandbox/tschaub/editing/examples/point-grid.js 2011-05-02 23:12:17 UTC (rev 11940)
@@ -0,0 +1,28 @@
+var points = new OpenLayers.Layer.PointGrid({
+ isBaseLayer: true, dx: 20, dy: 20
+});
+
+var map = new OpenLayers.Map({
+ div: "map",
+ layers: [points],
+ center: new OpenLayers.LonLat(0, 0),
+ zoom: 1
+});
+
+var rotation = document.getElementById("rotation");
+rotation.value = String(points.rotation);
+rotation.onchange = function() {
+ points.setRotation(Number(rotation.value));
+}
+
+var spacing = document.getElementById("spacing");
+spacing.value = String(points.dx);
+spacing.onchange = function() {
+ points.setSpacing(Number(spacing.value));
+}
+
+var max = document.getElementById("max");
+max.value = String(points.maxFeatures);
+max.onchange = function() {
+ points.setMaxFeatures(Number(max.value));
+}
Added: sandbox/tschaub/editing/examples/snap-grid.html
===================================================================
--- sandbox/tschaub/editing/examples/snap-grid.html (rev 0)
+++ sandbox/tschaub/editing/examples/snap-grid.html 2011-05-02 23:12:17 UTC (rev 11940)
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <title>OpenLayers Snap Grid Example</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <style type="text/css">
+ .olControlAttribution {
+ left: 5px;
+ bottom: 5px;
+ }
+ .olControlEditingToolbar .olControlModifyFeatureItemInactive {
+ background-position: -1px -1px;
+ }
+ .olControlEditingToolbar .olControlModifyFeatureItemActive {
+ background-position: -1px -24px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1 id="title">Snap Grid Example</h1>
+
+ <div id="tags">
+ snap grid
+ </div>
+
+ <div id="shortdesc">Use a PointGrid layer and a Snapping control to snap to a grid of regularly spaced points</div>
+
+ <div id="map" class="smallmap"></div>
+
+ Grid rotation:
+ <select name="rotation" id="rotation">
+ <option value="-45">-45</option>
+ <option value="-30">-30</option>
+ <option value="-15">-15</option>
+ <option value="0">0</option>
+ <option value="15">15</option>
+ <option value="30">30</option>
+ <option value="45">45</option>
+ </select>
+
+
+ Grid spacing:
+ <select name="spacing" id="spacing">
+ <option value="150">150</option>
+ <option value="300">300</option>
+ <option value="600">600</option>
+ <option value="1200">1200</option>
+ <option value="2400">2400</option>
+ </select>
+
+
+ Max points:
+ <select name="max" id="max">
+ <option value="150">150</option>
+ <option value="250">250</option>
+ <option value="350">350</option>
+ </select>
+
+ <script src="../lib/OpenLayers.js"></script>
+ <script src="snap-grid.js"></script>
+ </body>
+</html>
Added: sandbox/tschaub/editing/examples/snap-grid.js
===================================================================
--- sandbox/tschaub/editing/examples/snap-grid.js (rev 0)
+++ sandbox/tschaub/editing/examples/snap-grid.js 2011-05-02 23:12:17 UTC (rev 11940)
@@ -0,0 +1,81 @@
+var points = new OpenLayers.Layer.PointGrid({
+ name: "Snap Grid",
+ dx: 600, dy: 600,
+ styleMap: new OpenLayers.StyleMap({
+ pointRadius: 1,
+ strokeColor: "#3333ff",
+ strokeWidth: 1,
+ fillOpacity: 1,
+ fillColor: "#ffffff",
+ graphicName: "square"
+ })
+});
+
+var lines = new OpenLayers.Layer.Vector("Lines", {
+ styleMap: new OpenLayers.StyleMap({
+ pointRadius: 3,
+ strokeColor: "#ff3300",
+ strokeWidth: 3,
+ fillOpacity: 0
+ })
+});
+
+var map = new OpenLayers.Map({
+ div: "map",
+ layers: [new OpenLayers.Layer.OSM(), points, lines],
+ controls: [
+ new OpenLayers.Control.Navigation(),
+ new OpenLayers.Control.LayerSwitcher(),
+ new OpenLayers.Control.Attribution()
+ ],
+ restrictedExtent: new OpenLayers.Bounds(
+ 1035374, 7448940, 1074510, 7468508
+ ),
+ center: new OpenLayers.LonLat(1054942, 7458724),
+ zoom: 13
+});
+
+// configure the snapping agent
+var snap = new OpenLayers.Control.Snapping({
+ layer: lines,
+ targets: [{
+ layer: points,
+ tolerance: 15
+ }]
+});
+snap.activate();
+
+// add some editing tools to a panel
+var panel = new OpenLayers.Control.Panel({
+ displayClass: "olControlEditingToolbar"
+});
+var draw = new OpenLayers.Control.DrawFeature(
+ lines, OpenLayers.Handler.Path,
+ {displayClass: "olControlDrawFeaturePath", title: "Draw Features"}
+);
+modify = new OpenLayers.Control.ModifyFeature(
+ lines, {displayClass: "olControlModifyFeature", title: "Modify Features"}
+);
+panel.addControls([
+ new OpenLayers.Control.Navigation({title: "Navigate"}),
+ modify, draw
+]);
+map.addControl(panel);
+
+var rotation = document.getElementById("rotation");
+rotation.value = String(points.rotation);
+rotation.onchange = function() {
+ points.setRotation(Number(rotation.value));
+}
+
+var spacing = document.getElementById("spacing");
+spacing.value = String(points.dx);
+spacing.onchange = function() {
+ points.setSpacing(Number(spacing.value));
+}
+
+var max = document.getElementById("max");
+max.value = String(points.maxFeatures);
+max.onchange = function() {
+ points.setMaxFeatures(Number(max.value));
+}
Modified: sandbox/tschaub/editing/lib/OpenLayers/Geometry/Polygon.js
===================================================================
--- sandbox/tschaub/editing/lib/OpenLayers/Geometry/Polygon.js 2011-05-02 23:08:56 UTC (rev 11939)
+++ sandbox/tschaub/editing/lib/OpenLayers/Geometry/Polygon.js 2011-05-02 23:12:17 UTC (rev 11940)
@@ -257,3 +257,15 @@
var ring = new OpenLayers.Geometry.LinearRing(points);
return new OpenLayers.Geometry.Polygon([ring]);
};
+
+OpenLayers.Geometry.Polygon.fromBounds = function(bounds) {
+ var Point = OpenLayers.Geometry.Point;
+ return new OpenLayers.Geometry.Polygon([
+ new OpenLayers.Geometry.LinearRing([
+ new Point(bounds.left, bounds.top),
+ new Point(bounds.right, bounds.top),
+ new Point(bounds.right, bounds.bottom),
+ new Point(bounds.left, bounds.bottom)
+ ])
+ ]);
+};
Added: sandbox/tschaub/editing/lib/OpenLayers/Layer/PointGrid.js
===================================================================
--- sandbox/tschaub/editing/lib/OpenLayers/Layer/PointGrid.js (rev 0)
+++ sandbox/tschaub/editing/lib/OpenLayers/Layer/PointGrid.js 2011-05-02 23:12:17 UTC (rev 11940)
@@ -0,0 +1,164 @@
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the Clear BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Layer/Vector.js
+ * @requires OpenLayers/Geometry/Polygon.js
+ */
+
+/**
+ * Class: OpenLayers.Layer.PointGrid
+ *
+ * Inherits from:
+ * - <OpenLayers.Layer.Vector>
+ */
+OpenLayers.Layer.PointGrid = OpenLayers.Class(OpenLayers.Layer.Vector, {
+
+ /**
+ * Property: gridBounds
+ */
+ gridBounds: null,
+
+ dx: null,
+ dy: null,
+ ratio: 1.5,
+ maxFeatures: 250,
+ rotation: 0,
+
+ initialize: function(options) {
+ options = options || {};
+ OpenLayers.Layer.Vector.prototype.initialize.apply(this, [options.name, options]);
+ },
+
+ /**
+ * Method: setMap
+ * The layer has been added to the map.
+ *
+ * Parameters:
+ * map - {<OpenLayers.Map>}
+ */
+ setMap: function(map) {
+ OpenLayers.Layer.Vector.prototype.setMap.apply(this, arguments);
+ map.events.register("moveend", this, this.onMoveEnd);
+ },
+
+ /**
+ * Method: removeMap
+ * The layer has been removed from the map.
+ *
+ * Parameters:
+ * map - {<OpenLayers.Map>}
+ */
+ removeMap: function(map) {
+ map.events.unregister("moveend", this, this.onMoveEnd);
+ OpenLayers.Layer.Vector.prototype.removeMap.apply(this, arguments);
+ },
+
+ setRatio: function(ratio) {
+ this.ratio = ratio;
+ this.updateGrid(true);
+ },
+
+ setMaxFeatures: function(maxFeatures) {
+ this.maxFeatures = maxFeatures;
+ this.updateGrid(true);
+ },
+
+ setSpacing: function(dx, dy) {
+ this.dx = dx;
+ this.dy = dy || dx;
+ this.updateGrid(true);
+ },
+
+ setOrigin: function(origin) {
+ this.origin = origin;
+ this.updateGrid(true);
+ },
+
+ getOrigin: function() {
+ if (!this.origin) {
+ this.origin = this.map.getExtent().getCenterLonLat();
+ }
+ return this.origin;
+ },
+
+ setRotation: function(rotation) {
+ this.rotation = rotation;
+ this.updateGrid(true);
+ },
+
+ onMoveEnd: function() {
+ this.updateGrid();
+ },
+
+ getViewBounds: function() {
+ var bounds = this.map.getExtent();
+ if (this.rotation) {
+ var origin = this.getOrigin();
+ var rotationOrigin = new OpenLayers.Geometry.Point(origin.lon, origin.lat);
+ var rect = OpenLayers.Geometry.Polygon.fromBounds(bounds);
+ rect.rotate(-this.rotation, rotationOrigin);
+ bounds = rect.getBounds();
+ }
+ return bounds;
+ },
+
+ updateGrid: function(force) {
+ if (force || this.invalidBounds()) {
+ var viewBounds = this.getViewBounds();
+ var origin = this.getOrigin();
+ var rotationOrigin = new OpenLayers.Geometry.Point(origin.lon, origin.lat);
+ var viewBoundsWidth = viewBounds.getWidth();
+ var viewBoundsHeight = viewBounds.getHeight();
+ var aspectRatio = viewBoundsWidth / viewBoundsHeight;
+ var maxHeight = Math.sqrt(this.dx * this.dy * this.maxFeatures / aspectRatio);
+ var maxWidth = maxHeight * aspectRatio;
+ var gridWidth = Math.min(viewBoundsWidth * this.ratio, maxWidth);
+ var gridHeight = Math.min(viewBoundsHeight * this.ratio, maxHeight);
+ var center = viewBounds.getCenterLonLat();
+ this.gridBounds = new OpenLayers.Bounds(
+ center.lon - (gridWidth / 2),
+ center.lat - (gridHeight / 2),
+ center.lon + (gridWidth / 2),
+ center.lat + (gridHeight / 2)
+ );
+ var rows = Math.floor(gridHeight / this.dy);
+ var cols = Math.floor(gridWidth / this.dx);
+ var gridLeft = origin.lon + (this.dx * Math.ceil((this.gridBounds.left - origin.lon) / this.dx));
+ var gridBottom = origin.lat + (this.dy * Math.ceil((this.gridBounds.bottom - origin.lat) / this.dy));
+ var features = new Array(rows * cols);
+ var x, y, point;
+ for (var i=0; i<cols; ++i) {
+ x = gridLeft + (i * this.dx);
+ for (var j=0; j<rows; ++j) {
+ y = gridBottom + (j * this.dy);
+ point = new OpenLayers.Geometry.Point(x, y);
+ if (this.rotation) {
+ point.rotate(this.rotation, rotationOrigin);
+ }
+ features[(i*rows)+j] = new OpenLayers.Feature.Vector(point);
+ }
+ }
+ this.destroyFeatures(this.features, {silent: true});
+ this.addFeatures(features, {silent: true});
+ }
+ },
+
+ /**
+ * Method: invalidBounds
+ * Determine whether the previously generated point grid is invalid.
+ * This occurs when the map bounds extends beyond the previously
+ * generated grid bounds.
+ *
+ * Returns:
+ * {Boolean}
+ */
+ invalidBounds: function() {
+ return !this.gridBounds || !this.gridBounds.containsBounds(this.getViewBounds());
+ },
+
+ CLASS_NAME: "OpenLayers.Layer.PointGrid"
+
+});
Modified: sandbox/tschaub/editing/lib/OpenLayers.js
===================================================================
--- sandbox/tschaub/editing/lib/OpenLayers.js 2011-05-02 23:08:56 UTC (rev 11939)
+++ sandbox/tschaub/editing/lib/OpenLayers.js 2011-05-02 23:12:17 UTC (rev 11940)
@@ -230,6 +230,7 @@
"OpenLayers/Renderer/Canvas.js",
"OpenLayers/Renderer/VML.js",
"OpenLayers/Layer/Vector.js",
+ "OpenLayers/Layer/PointGrid.js",
"OpenLayers/Layer/Vector/RootContainer.js",
"OpenLayers/Strategy.js",
"OpenLayers/Strategy/Filter.js",
More information about the Commits
mailing list