[Mapbender-commits] r8864 - in trunk/mapbender: http/plugins lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Thu May 15 00:57:54 PDT 2014
Author: hwbllmnn
Date: 2014-05-15 00:57:54 -0700 (Thu, 15 May 2014)
New Revision: 8864
Modified:
trunk/mapbender/http/plugins/mb_digitize_widget.php
trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
Log:
added experimental new renderer for kml/geojson features
Modified: trunk/mapbender/http/plugins/mb_digitize_widget.php
===================================================================
--- trunk/mapbender/http/plugins/mb_digitize_widget.php 2014-05-14 13:51:01 UTC (rev 8863)
+++ trunk/mapbender/http/plugins/mb_digitize_widget.php 2014-05-15 07:57:54 UTC (rev 8864)
@@ -268,6 +268,23 @@
};
};
+ var renderStylePreview = function(feature, target) {
+ var canvas = Raphael(target, 32, 32);
+ switch(feature.geometry.type.toLowerCase()) {
+ case 'point':
+ canvas.image(markerSymbol, 0, 0, 32, 32);
+ break;
+ case 'linestring':
+ var line = 'M 10 20 L 20 10';
+ canvas.path(line).attr(feature.properties);
+ break;
+ case 'polygon':
+ var poly = 'M 10 10 L 10 20 20 20 20 10 Z';
+ canvas.path(poly).attr(feature.properties);
+ break;
+ };
+ };
+
var editObject = function($link, menu) {
return function() {
$link.addClass('kmltree-selected').siblings().removeClass('kmltree-selected');
Modified: trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
===================================================================
--- trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2014-05-14 13:51:01 UTC (rev 8863)
+++ trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2014-05-15 07:57:54 UTC (rev 8864)
@@ -39,6 +39,9 @@
_popup : null,
_create: function(){
var self = this, o = this.options;
+ this.element.mapbender().events.afterMapRequest.register(function () {
+ self.render();
+ });
this.element.bind('click', function(e) {
var map = self.element.mapbender();
var pos = map.getMousePosition(e);
@@ -61,8 +64,8 @@
matchedIds.push(k);
}
} else {
- var box = itm.geomArray.list[k].getBBox();
- if(box[0].x < clickPoint.x && box[1].x > clickPoint.x && box[0].y < clickPoint.y && box[1].y > clickPoint.y) {
+ var box = this.getBbox(itm.data.features[k]);
+ if(box[0] < clickPoint.x && box[2] > clickPoint.x && box[1] < clickPoint.y && box[3] > clickPoint.y) {
matched.push(v);
matchedIds.push(k);
}
@@ -203,7 +206,8 @@
});*/
self.element.bind('kml:loaded',function(event,obj){
if(o.autoOpen){
- self._display(obj);
+ self.render();
+ //self._display(obj);
}
});
self.element.bind('kml:error',function(event,message){
@@ -229,6 +233,7 @@
if(kmls) {
this.kmlOrder = JSON.parse(kmls);
}
+ this.render();
// }catch(e){
// console.log(e)
// }
@@ -245,27 +250,32 @@
var map = $('#mapframe1').mapbender();
var item = this._kmls[url];
- var bbox = item.geomArray.list[idx].getBBox();
+ var bbox = this.getBbox(item.data.features[idx]);
- var bufferFloat = 100;
- var buffer = new Point(bufferFloat,bufferFloat);
- bbox[0] = bbox[0].minus(buffer);
- bbox[1] = bbox[1].plus(buffer);
-
map.calculateExtent(
- new Mapbender.Extent(bbox[0], bbox[1])
+ new Mapbender.Extent(bbox[0], bbox[1], bbox[2], bbox[3])
);
map.setMapRequest();
},
+ zoomToLayer: function(url) {
+ var bbox = this.getLayerBbox(url);
+ var map = $('#mapframe1').mapbender();
+
+ map.calculateExtent(new Mapbender.Extent(bbox[0], bbox[1], bbox[2], bbox[3]));
+ map.setMapRequest();
+ },
+
showFeature: function(url, idx) {
- this._kmls[url].highlightArray[idx].paint();
+ // this._kmls[url].highlightArray[idx].paint();
this._kmls[url].data.features[idx].display = true;
+ this.render();
},
hideFeature: function(url, idx) {
- this._kmls[url].highlightArray[idx].hide();
+ // this._kmls[url].highlightArray[idx].hide();
this._kmls[url].data.features[idx].display = false;
+ this.render();
},
setQueriedLayer: function(url) {
@@ -328,7 +338,7 @@
$map.setMapRequest();
},
- _load : function(url){
+ _load: function(url){
var self = this, o = this.options;
var epsg = $(self.element).mapbender().epsg;
epsg = epsg.split(":")[1];
@@ -361,6 +371,7 @@
self.element.trigger('kml:error',data.errorMessage);
}else{
self._kmls[o.url] = {type:"geojson",data:data,url:o.url,display: o.autoDisplay};
+ self.zoomToLayer(o.url);
self.element.trigger('kml:loaded',{type:"geojson",data:data,url:o.url,display: o.autoDisplay});
}
},
@@ -449,93 +460,234 @@
},
_convertFromJson: function(mapitem) {
- var geojson = mapitem.data;
- var self = this;
- var $map = $(self.element).mapbender();
- var markers = [];
- var title = "";
+ // var geojson = mapitem.data;
+ // var self = this;
+ // var $map = $(self.element).mapbender();
+ // var markers = [];
+ // var title = "";
// we always transform _from_ 4326 KML use this as their default
// var projSrc = new Proj4js.Proj('EPSG:4326');
// var projDest = new Proj4js.Proj($map.epsg);
- var markeroptions = {width: "19px", height: "34px"};
- var g = null;
+ // var markeroptions = {width: "19px", height: "34px"};
+ // var g = null;
- for(var i in mapitem.highlightArray){
- var h = mapitem.highlightArray[i].hide;
- if(h) h();
- }
+ // for(var i in mapitem.highlightArray){
+ // var h = mapitem.highlightArray[i].hide;
+ // if(h) h();
+ // }
- mapitem.geomArray = new GeometryArray();
- mapitem.highlightArray = [];
- mapitem.geomArray.importGeoJSON(geojson);
+ // mapitem.geomArray = new GeometryArray();
+ // mapitem.highlightArray = [];
+ // mapitem.geomArray.importGeoJSON(geojson);
//get bbox for array
- var bbox = mapitem.geomArray.getBBox();
- var bufferFloat = parseFloat(0.1);
- var buffer = new Point(bufferFloat,bufferFloat);
- bbox[0] = bbox[0].minus(buffer);
- bbox[1] = bbox[1].plus(buffer);
- //
- for(i =0; i < mapitem.geomArray.count(); i++){
- var elemid = "mapframe1_" + parseInt(Math.random()*100000, 10);
- var h = new Highlight([self.element.attr('id')], elemid,{
- "position":"absolute",
- "top": "0px",
- "left": "0px",
- "z-index": "80" },1);
+ // var bbox = mapitem.geomArray.getBBox();
+ // var bufferFloat = parseFloat(0.1);
+ // var buffer = new Point(bufferFloat,bufferFloat);
+ // bbox[0] = bbox[0].minus(buffer);
+ // bbox[1] = bbox[1].plus(buffer);
+ // //
+ // for(i =0; i < mapitem.geomArray.count(); i++){
+ // var elemid = "mapframe1_" + parseInt(Math.random()*100000, 10);
+ // var h = new Highlight([self.element.attr('id')], elemid,{
+ // "position":"absolute",
+ // "top": "0px",
+ // "left": "0px",
+ // "z-index": "80" },1);
- $('#mapframe1').children('*[id*="' + elemid + '"]').attr('data-idx', i)
- .attr('data-url', mapitem.url);
+ // $('#mapframe1').children('*[id*="' + elemid + '"]').attr('data-idx', i)
+ // .attr('data-url', mapitem.url);
- g = mapitem.geomArray.get(i);
- icon = g.e.getElementValueByName("Mapbender:icon");
- //title = g.e.getElementValueByName("title");
- name = g.e.getElementValueByName("name");
+ // g = mapitem.geomArray.get(i);
+ // icon = g.e.getElementValueByName("Mapbender:icon");
+ // //title = g.e.getElementValueByName("title");
+ // name = g.e.getElementValueByName("name");
- if(name != "false" && name !== false){
- title = name; // use for tooltip
+ // if(name != "false" && name !== false){
+ // title = name; // use for tooltip
+ // }
+ // if(icon == "false" || icon === false){
+ // g.e.setElement("Mapbender:iconOffsetX", -10);
+ // g.e.setElement("Mapbender:iconOffsetY", -34);
+ // g.e.setElement("Mapbender:icon","../img/marker/red.png");
+ // }
+
+ // h.add(g);
+ // mapitem.highlightArray.push(h);
+ // title = "";
+ // name = "";
+ // }
+ // if(mapitem.display){
+ // for(var j in mapitem.highlightArray){
+ // if(mapitem.data.features[j].display !== false) {
+ // mapitem.highlightArray[j].paint();
+ // }
+ // }
+ // }else{
+ // for(var j in mapitem.highlightArray){
+ // mapitem.highlightArray[j].hide();
+ // }
+ // }
+
+ // self.element.mapbender().events.afterMapRequest.register(function () {
+ // self.render();
+ // // if(mapitem.display){
+ // // for(var i in mapitem.highlightArray){
+ // // if(mapitem.data.features[i].display !== false) {
+ // // mapitem.highlightArray[i].paint();
+ // // }
+ // // }
+ // // }else{
+ // // for(var i in mapitem.highlightArray){
+ // // mapitem.highlightArray[i].hide();
+ // // }
+ // // }
+ // });
+ // set new bbox for mapframe
+ // if(!mapitem.loadedOnStartup) {
+ // $map.calculateExtent(
+ // new Mapbender.Extent(bbox[0], bbox[1])
+ // );
+ // }
+ },
+
+ getLayerBbox: function(url) {
+ var self = this;
+ var itm = this._kmls[url];
+ var bbox = this.getBbox(itm.data.features[0]);
+ $.each(itm.data.features, function(_, v) {
+ var newbox = self.getBbox(v);
+ bbox[0] = Math.min(bbox[0], newbox[0]);
+ bbox[1] = Math.min(bbox[1], newbox[1]);
+ bbox[2] = Math.max(bbox[2], newbox[2]);
+ bbox[3] = Math.max(bbox[3], newbox[3]);
+ });
+ return bbox;
+ },
+
+ getBbox: function(feature) {
+ switch(feature.geometry.type.toLowerCase()) {
+ case 'point':
+ var map = $(this.element).mapbender();
+ var res = map.getScale() / mb_resolution / 100;
+ var minx = feature.geometry.coordinates[0] - 20 * res;
+ var miny = feature.geometry.coordinates[1] - 20 * res;
+ return [minx, miny, minx + 40 * res, miny + 40 * res];
+
+ case 'linestring':
+ var coords = feature.geometry.coordinates;
+ minx = coords[0][0];
+ miny = coords[0][1];
+ var maxx = minx;
+ var maxy = miny;
+ $.each(coords, function(_, v) {
+ minx = Math.min(minx, v[0]);
+ miny = Math.min(miny, v[1]);
+ maxx = Math.max(maxx, v[0]);
+ maxy = Math.max(maxy, v[1]);
+ });
+ return [minx, miny, maxx, maxy];
+
+ case 'polygon':
+ coords = feature.geometry.coordinates;
+ minx = coords[0][0][0];
+ miny = coords[0][0][1];
+ $.each(coords, function(_, v) {
+ $.each(v, function(_, v2) {
+ minx = Math.min(minx, v2[0]);
+ miny = Math.min(miny, v2[1]);
+ maxx = Math.max(maxx, v2[0]);
+ maxy = Math.max(maxy, v2[1]);
+ });
+ });
+ return [minx, miny, maxx, maxy];
+ }
+ return undefined;
+ },
+
+ renderPoint: function(canvas, feature) {
+ var pt = {x: feature.geometry.coordinates[0],
+ y: feature.geometry.coordinates[1]};
+ if(isNaN(pt.x) || isNaN(pt.y)) return;
+ pt = $('#mapframe1').mapbender().convertRealToPixel(pt);
+ if(feature.properties['Mapbender:icon']) {
+ var img = canvas.image(feature.properties['Mapbender:icon'], pt.x, pt.y, 32, 32).node;
+ if(img.setAttributeNS) {
+ img.setAttributeNS(null, "preserveAspectRatio" , "xMidYMid meet" );
}
- if(icon == "false" || icon === false){
- g.e.setElement("Mapbender:iconOffsetX", -10);
- g.e.setElement("Mapbender:iconOffsetY", -34);
- g.e.setElement("Mapbender:icon","../img/marker/red.png");
+ } else {
+ canvas.circle(pt.x, pt.y, 32).attr(feature.attributes);
+ }
+ },
+
+ renderLine: function(canvas, feature) {
+ var map = $('#mapframe1').mapbender();
+ var self = this;
+ var path;
+ $.each(feature.geometry.coordinates, function(_, v) {
+ var pt = map.convertRealToPixel({x: v[0], y: v[1]});
+ if(isNaN(pt.x) || isNaN(pt.y)) return;
+ if(!path) {
+ path = 'M' + pt.x + ' ' + pt.y;
+ } else {
+ path += 'L' + pt.x + ' ' + pt.y;
}
+ });
- h.add(g);
- mapitem.highlightArray.push(h);
- title = "";
- name = "";
- }
- if(mapitem.display){
- for(var j in mapitem.highlightArray){
- if(mapitem.data.features[j].display !== false) {
- mapitem.highlightArray[j].paint();
- }
+ canvas.path(path).attr(feature.properties);
+ },
+
+ renderPolygon: function(canvas, feature) {
+ var map = $('#mapframe1').mapbender();
+ var self = this;
+ var path;
+ $.each(feature.geometry.coordinates[0], function(_, v) {
+ var pt = map.convertRealToPixel({x: v[0], y: v[1]});
+ if(isNaN(pt.x) || isNaN(pt.y)) return;
+ if(!path) {
+ path = 'M' + pt.x + ' ' + pt.y;
+ } else {
+ path += 'L' + pt.x + ' ' + pt.y;
}
- }else{
- for(var j in mapitem.highlightArray){
- mapitem.highlightArray[j].hide();
+ });
+ canvas.path(path + 'Z').attr(feature.properties);
+ },
+
+ renderFeature: function(canvas) {
+ var self = this;
+ return function(_, feature) {
+ if(feature.display === false) {
+ return;
}
+ switch(feature.geometry.type.toLowerCase()) {
+ case 'point':
+ self.renderPoint(canvas, feature);
+ break;
+ case 'linestring':
+ var line = 'M';
+ self.renderLine(canvas, feature);
+ break;
+ case 'polygon':
+ self.renderPolygon(canvas, feature);
+ break;
+ };
}
+ },
- self.element.mapbender().events.afterMapRequest.register(function () {
- if(mapitem.display){
- for(var i in mapitem.highlightArray){
- if(mapitem.data.features[i].display !== false) {
- mapitem.highlightArray[i].paint();
- }
- }
- }else{
- for(var i in mapitem.highlightArray){
- mapitem.highlightArray[i].hide();
- }
+ render: function() {
+ var target = $('#kml-rendering-pane');
+ var map = $('#mapframe1').mapbender();
+ var self = this;
+ if(target.length == 0) {
+ $('#mapframe1').append('<div id="kml-rendering-pane" style="position: absolute; top: 0px; left: 0px; z-index: 80;"></div>');
+ }
+ target = $('#kml-rendering-pane').html('').get(0);
+ var canvas = Raphael(target, map.getWidth(), map.getHeight());
+ $.each(this.kmlOrder, function(_, url) {
+ var item = self._kmls[url];
+ if(item && item.display) {
+ $.each(item.data.features, $.proxy(self, self.renderFeature(canvas)));
}
});
- // set new bbox for mapframe
- if(!mapitem.loadedOnStartup) {
- $map.calculateExtent(
- new Mapbender.Extent(bbox[0], bbox[1])
- );
- }
},
_display : function(mapitem){
@@ -547,17 +699,14 @@
}
}
-
};
-
var displayKML = $.extend({},displayFeatures, {
_endpointURL: "../php/kml2transformedgeojson.php",
_eventNamespace : "kml"
});
$.widget('ui.kml',displayKML);
-
var displayGeoJSON = $.extend({},displayFeatures,{
_endpointURL: "",
_load: function(){
More information about the Mapbender_commits
mailing list