Permalink
Browse files

Merge pull request #36 from bartvde/featurerenderer

add FeatureRenderer (r=@mpriour,@marcjansen), update function needs to be added in the future.
  • Loading branch information...
2 parents abb71cc + 2baddab commit 9a22da54163963ce4ae963b4a09816fb4fea2c65 Bart van den Eijnden committed Jun 20, 2012
@@ -212,6 +212,19 @@ example.utility = {
lines.push(ind + 'tpl : ' + extCreateCode + 'Ext.XTemplate\', ...),');
lines.push('};');
break;
+
+ case 'featurerenderer':
+ lines.push(comS + '// create a feature renderer and specify symbolType, ' + comE);
+ lines.push(comS + '// width and an array of symbolizers' + comE);
+ lines.push(varCode + ' renderer = ' + extCreateCode + 'GXM.FeatureRenderer\', {');
+ lines.push(ind + 'symbolType: ' + strS + '"Point"' + strE + ',');
+ lines.push(ind + 'width: 25, ');
+ lines.push(ind + 'symbolizers: [{');
+ lines.push(ind + ind + 'graphicName: ' + strS + '"circle"' + strE + ',');
+ lines.push(ind + ind + 'fillColor: ' + strS + '"red"' + strE);
+ lines.push(ind + '}]');
+ lines.push('});');
+ break;
default:
lines.push(comS + '// No documentation for "' + exampleKey + '"' + comE);
@@ -249,7 +262,7 @@ example.utility = {
});
this.overlay.showBy(this);
}
- }
+ };
return btn;
}
-};
+};
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+ <title>GXM: The GXM.FeatureRenderer-class</title>
+
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+
+ <!-- The CSS of Sencha Touch and GXM -->
+ <link rel="stylesheet" href="http://cdn.sencha.io/touch/sencha-touch-2.0.1/resources/css/sencha-touch.css" type="text/css">
+ <link rel="stylesheet" href="http://openlayers.org/api/2.11/theme/default/style.tidy.css" type="text/css">
+ <link rel="stylesheet" href="../resources/css/gxm.css" type="text/css">
+ <link rel="stylesheet" href="./examples.css" type="text/css">
+
+ <!-- Load Sencha Touch -->
+ <script type="text/javascript" src="http://cdn.sencha.io/touch/sencha-touch-2.0.1/sencha-touch-all-debug.js"></script>
+ <!-- Load OpenLayers -->
+ <!-- You should definitely consider using a custom single-file version of OpenLayers -->
+ <script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
+
+ <!-- This file loads all relevant files -->
+ <script type="text/javascript" src="../src/GXM.loader.js"></script>
+ <script type="text/javascript" src="./example-utility.js"></script>
+ <script type="text/javascript" src="./featurerenderer.js"></script>
+ </head>
+ <body>
+ </body>
+</html>
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2012 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ *
+ * See http://svn.geoext.org/sandbox/gxm/geoext/gxm/license.txt for the full
+ * text of the license.
+ */
+
+Ext.require([
+ 'GXM.FeatureRenderer'
+]);
+
+Ext.setup({
+ viewport : {
+ autoMaximize : true
+ },
+ onReady : function() {
+ var items = [];
+ var style = new OpenLayers.Style({
+ pointRadius: 7,
+ graphicName: 'circle'
+ }, {
+ rules: [
+ new OpenLayers.Rule({
+ name: "Unpaid",
+ symbolizer: {
+ fillColor: "red"
+ }
+ }),
+ new OpenLayers.Rule({
+ name: "Commercial",
+ symbolizer: {
+ fillColor: "blue"
+ }
+ }),
+ new OpenLayers.Rule({
+ name: "Foo",
+ symbolizer: {
+ fillColor: "olive"
+ }
+ })
+ ]
+ });
+
+ for (var i=0, ii=style.rules.length; i<ii; ++i) {
+ var rule = style.rules[i];
+ items.push({
+ xtype: 'container',
+ layout: 'hbox',
+ pack: 'start',
+ align: 'stretch',
+ items: [{
+ xtype: 'gxm_renderer',
+ symbolType: "Point",
+ width: 25,
+ symbolizers: [Ext.apply(Ext.apply({}, style.defaultStyle), rule.symbolizer)]
+ }, {
+ flex: 1,
+ xtype: 'label',
+ html: rule.name
+ }]
+ });
+ }
+
+ // A button to show relevant code parts
+ var btnSource = example.utility.getSourceCodeButton('featurerenderer');
+
+ items.push({
+ xtype : 'toolbar',
+ docked : 'bottom',
+ items : [
+ {xtype : 'spacer'},
+ btnSource
+ ]
+ });
+
+ // Create the viewport
+ viewport = Ext.create('Ext.Panel', {
+ fullscreen : true,
+ items : items
+ });
+
+ }
+});
View
@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2012 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ *
+ * See https://raw.github.com/geoext/GXM/master/license.txt for the full
+ * text of the license.
+ */
+
+/**
+ * @class GXM.FeatureRenderer
+ * Create a box component for rendering a vector feature.
+ * Update functionality is not yet supported.
+ */
+Ext.define("GXM.FeatureRenderer",{
+ extend: 'Ext.Component',
+ alias: 'widget.gxm_renderer',
+ config: {
+ symbolizers: [OpenLayers.Feature.Vector.style["default"]],
+ symbolType: "Polygon",
+ minWidth: 20,
+ minHeight: 20
+ },
+ initialize:function(){
+ var me = this;
+ this.autoEl = {
+ tag: "div",
+ "class": (this.imgCls ? this.imgCls : ""),
+ id: this.getId()
+ };
+ me.callParent(arguments);
+
+ Ext.applyIf(this, {
+ pointFeature: new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Point(0, 0)
+ ),
+ lineFeature: new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.LineString([
+ new OpenLayers.Geometry.Point(-8, -3),
+ new OpenLayers.Geometry.Point(-3, 3),
+ new OpenLayers.Geometry.Point(3, -3),
+ new OpenLayers.Geometry.Point(8, 3)
+ ])
+ ),
+ polygonFeature: new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Polygon([
+ new OpenLayers.Geometry.LinearRing([
+ new OpenLayers.Geometry.Point(-8, -4),
+ new OpenLayers.Geometry.Point(-6, -6),
+ new OpenLayers.Geometry.Point(6, -6),
+ new OpenLayers.Geometry.Point(8, -4),
+ new OpenLayers.Geometry.Point(8, 4),
+ new OpenLayers.Geometry.Point(6, 6),
+ new OpenLayers.Geometry.Point(-6, 6),
+ new OpenLayers.Geometry.Point(-8, 4)
+ ])
+ ])
+ ),
+ textFeature: new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Point(0, 0)
+ )
+ });
+ this.renderer = new OpenLayers.Renderer.Canvas(
+ this.element
+ );
+
+ this.renderer.map = {
+ getResolution: Ext.Function.bind(function() {
+ return this.resolution;
+ }, this)
+ };
+
+ this.feature = this[this.getSymbolType().toLowerCase() + "Feature"];
+ this.drawFeature();
+ },
+
+ drawFeature: function() {
+ this.renderer.clear();
+ this.setRendererDimensions();
+ var symbolizer, feature, geomType;
+ for (var i=0, len=this.getSymbolizers().length; i<len; ++i) {
+ symbolizer = this.getSymbolizers()[i];
+ feature = this.feature;
+ if (symbolizer instanceof OpenLayers.Symbolizer) {
+ symbolizer = symbolizer.clone();
+ if (OpenLayers.Symbolizer.Text &&
+ symbolizer instanceof OpenLayers.Symbolizer.Text &&
+ symbolizer.graphic === false) {
+ // hide the point geometry
+ symbolizer.fill = symbolizer.stroke = false;
+ }
+ if (!this.initialConfig.feature) {
+ geomType = symbolizer.CLASS_NAME.split(".").pop().toLowerCase();
+ feature = this[geomType + "Feature"];
+ }
+ } else {
+ // TODO: remove this when OpenLayers.Symbolizer is used everywhere
+ symbolizer = Ext.apply({}, symbolizer);
+ }
+ this.renderer.drawFeature(
+ feature.clone(),
+ symbolizer
+ );
+ }
+ },
+
+ setRendererDimensions: function() {
+ var gb = this.feature.geometry.getBounds();
+ var gw = gb.getWidth();
+ var gh = gb.getHeight();
+ /*
+ * Determine resolution based on the following rules:
+ * 1) always use value specified in config
+ * 2) if not specified, use max res based on width or height of element
+ * 3) if no width or height, assume a resolution of 1
+ */
+ var resolution = this.initialConfig.resolution;
+ if(!resolution) {
+ resolution = Math.max(gw / this.width || 0, gh / this.height || 0) || 1;
+ }
+ this.resolution = resolution;
+ // determine height and width of element
+ var width = Math.max(this.getWidth() || this.getMinWidth(), gw / resolution);
+ var height = Math.max(this.getHeight() || this.getMinHeight(), gh / resolution);
+ // determine bounds of renderer
+ var center = gb.getCenterPixel();
+ var bhalfw = width * resolution / 2;
+ var bhalfh = height * resolution / 2;
+ var bounds = new OpenLayers.Bounds(
+ center.x - bhalfw, center.y - bhalfh,
+ center.x + bhalfw, center.y + bhalfh
+ );
+ this.renderer.setSize(new OpenLayers.Size(Math.round(width), Math.round(height)));
+ this.renderer.setExtent(bounds, true);
+ }
+
+});
Oops, something went wrong.

0 comments on commit 9a22da5

Please sign in to comment.