Skip to content

Commit

Permalink
Fix #1314 Support to print vector layer (#1317)
Browse files Browse the repository at this point in the history 
* Fix #1314 Support to print vector layer (leaflet)

 - Support vector style for leaflet layers
 - Conversion to OL2 style format
 - add reprojectGeoJson utility method to CoordinateUtils

Missing:
 - Print preview support
 - Markers

* Add default marker and preview for vector print

 - Now you can print also markers
 - Now the preview shows the vector layer

**note**: a little bug have to be solved. The preview map do not
show features on first rendering. This can be avoided loading them
in the VectorLayer on startup, but this will cause duplicated
vectors data.

* fixed preview issues for same named layer

* ForceUpdate when layer's created. Optimized leaflet layer rendering

* rounded reprojection coordinates tests

* add tests for feature and vector layers
  • Loading branch information
@offtherailz
offtherailz committed Dec 6, 2016
1 parent 73ef926 commit f703b6f
Show file tree
Hide file tree
Showing 10 changed files with 493 additions and 8 deletions.
2 changes: 1 addition & 1 deletion web/client/components/map/leaflet/Feature.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ var geometryToLayer = function(geojson, options) {
return new L.FeatureGroup(layers);
case 'GeometryCollection':
for (i = 0, len = geometry.geometries.length; i < len; i++) {
layer = this.geometryToLayer({
layer = geometryToLayer({
geometry: geometry.geometries[i],
type: 'Feature',
properties: geojson.properties
Expand Down
22 changes: 22 additions & 0 deletions web/client/components/map/leaflet/Layer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
var React = require('react');
var Layers = require('../../../utils/leaflet/Layers');
var assign = require('object-assign');
var {isEqual} = require('lodash');

const LeafletLayer = React.createClass({
propTypes: {
Expand Down Expand Up @@ -45,6 +46,26 @@ const LeafletLayer = React.createClass({
}
this.updateLayer(newProps, this.props);
},
shouldComponentUpdate(newProps) {
// the reduce returns true when a prop is changed
// optimizing when options are equal ignorning loading key
return !(["map", "type", "srs", "position", "zoomOffset", "onInvalid", "onClick", "options"].reduce( (prev, p) => {
switch (p) {
case "map":
case "type":
case "srs":
case "position":
case "zoomOffset":
case "onInvalid":
case "onClick":
return prev && this.props[p] === newProps[p];
case "options":
return prev && (this.props[p] === newProps[p] || isEqual({...this.props[p], loading: false}, {...newProps[p], loading: false}));
default:
return prev;
}
}, true));
},
componentWillUnmount() {
if (this.layer && this.props.map) {
this.removeLayer();
Expand Down Expand Up @@ -105,6 +126,7 @@ const LeafletLayer = React.createClass({
this.layer.layerName = options.name;
this.layer.layerId = options.id;
}
this.forceUpdate();
}
},
updateLayer(newProps, oldProps) {
Expand Down
115 changes: 115 additions & 0 deletions web/client/components/map/leaflet/__tests__/Layer-test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ var React = require('react/addons');
var ReactDOM = require('react-dom');
var L = require('leaflet');
var LeafLetLayer = require('../Layer.jsx');
var Feature = require('../Feature.jsx');
var expect = require('expect');

require('../../../../utils/leaflet/Layers');
Expand All @@ -18,6 +19,7 @@ require('../plugins/WMSLayer');
require('../plugins/GoogleLayer');
require('../plugins/BingLayer');
require('../plugins/MapQuest');
require('../plugins/VectorLayer');

describe('Leaflet layer', () => {
let map;
Expand Down Expand Up @@ -177,6 +179,119 @@ describe('Leaflet layer', () => {
expect(urls.length).toBe(1);
});

it('creates a vector layer for leaflet map', () => {
var options = {
"type": "wms",
"visibility": true,
"name": "vector_sample",
"group": "sample",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
]
},
"properties": {
"prop0": "value0",
"prop1": 0.0
}
},
{ "type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
[100.0, 1.0], [100.0, 0.0] ]
]
},
"properties": {
"prop0": "value0",
"prop1": {"this": "that"}
}
},
{ "type": "Feature",
"geometry": { "type": "MultiPoint",
"coordinates": [ [100.0, 0.0], [101.0, 1.0] ]
},
"properties": {
"prop0": "value0",
"prop1": {"this": "that"}
}
},
{ "type": "Feature",
"geometry": { "type": "MultiLineString",
"coordinates": [
[ [100.0, 0.0], [101.0, 1.0] ],
[ [102.0, 2.0], [103.0, 3.0] ]
]
},
"properties": {
"prop0": "value0",
"prop1": {"this": "that"}
}
},
{ "type": "Feature",
"geometry": { "type": "MultiPolygon",
"coordinates": [
[[[102.0, 2.0], [103.0, 2.0], [103.0, 3.0], [102.0, 3.0], [102.0, 2.0]]],
[[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]],
[[100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8], [100.2, 0.2]]]
]
},
"properties": {
"prop0": "value0",
"prop1": {"this": "that"}
}
},
{ "type": "Feature",
"geometry": { "type": "GeometryCollection",
"geometries": [
{ "type": "Point",
"coordinates": [100.0, 0.0]
},
{ "type": "LineString",
"coordinates": [ [101.0, 0.0], [102.0, 1.0] ]
}
]
},
"properties": {
"prop0": "value0",
"prop1": {"this": "that"}
}
}
]
};
// create layers
var layer = ReactDOM.render(
(<LeafLetLayer type="vector"
options={options} map={map}>
{options.features.map((feature) => (<Feature
key={feature.id}
type={feature.type}
geometry={feature.geometry}
msId={feature.id}
featuresCrs={ 'EPSG:4326' }
/>))}</LeafLetLayer>), document.getElementById("container"));
expect(layer).toExist();
let l2 = ReactDOM.render(
(<LeafLetLayer type="vector"
options={options} map={map}>
{options.features.map((feature) => (<Feature
key={feature.id}
type={feature.type}
geometry={feature.geometry}
msId={feature.id}
featuresCrs={ 'EPSG:4326' }
/>))}</LeafLetLayer>), document.getElementById("container"));
expect(l2).toExist();
});

it('creates a wms layer for leaflet map with custom tileSize', () => {
var options = {
"type": "wms",
Expand Down
1 change: 1 addition & 0 deletions web/client/components/map/openlayers/Layer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const OpenlayersLayer = React.createClass({
if (this.layer && !this.layer.detached) {
this.addLayer(options);
}
this.forceUpdate();
}
},
updateLayer(newProps, oldProps) {
Expand Down
25 changes: 23 additions & 2 deletions web/client/components/print/MapPreview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const {Button, Glyphicon} = require('react-bootstrap');

let PMap;
let Layer;
let Feature;

const MapPreview = React.createClass({
propTypes: {
Expand Down Expand Up @@ -54,6 +55,7 @@ const MapPreview = React.createClass({
PMap = require('../map/' + this.props.mapType + '/Map');
Layer = require('../map/' + this.props.mapType + '/Layer');
require('../map/' + this.props.mapType + '/plugins/index');
Feature = require('../map/' + this.props.mapType + '/index').Feature;
},
getRatio() {
if (this.props.width && this.props.layoutSize && this.props.resolutions) {
Expand All @@ -77,6 +79,22 @@ const MapPreview = React.createClass({
})
});
},
renderLayerContent(layer) {
if (layer.features && layer.type === "vector") {
return layer.features.map( (feature) => {
return (
<Feature
key={feature.id}
type={feature.type}
geometry={feature.geometry}
msId={feature.id}
featuresCrs={ layer.featuresCrs || 'EPSG:4326' }
style={ feature.style || layer.style || null }/>
);
});
}
return null;
},
render() {
const style = assign({}, this.props.style, {
width: this.props.width + "px",
Expand All @@ -102,8 +120,11 @@ const MapPreview = React.createClass({
mapOptions={mapOptions}
>
{this.props.layers.map((layer, index) =>
<Layer key={layer.name} position={index} type={layer.type}
options={assign({}, this.adjustResolution(layer), {srs: projection})}/>
<Layer key={layer.id || layer.name} position={index} type={layer.type}
options={assign({}, this.adjustResolution(layer), {srs: projection})}>
{this.renderLayerContent(layer)}
</Layer>

)}
</PMap>
{this.props.enableScalebox ? <ScaleBox id="mappreview-scalebox"
Expand Down
92 changes: 88 additions & 4 deletions web/client/utils/CoordinatesUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,49 @@
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
var Proj4js = require('proj4');
var assign = require('object-assign');
var {isArray, flattenDeep, chunk} = require('lodash');
const Proj4js = require('proj4');
const proj4 = Proj4js;
const assign = require('object-assign');
const {isArray, flattenDeep, chunk, cloneDeep} = require('lodash');
// Checks if `list` looks like a `[x, y]`.
function isXY(list) {
return list.length >= 2 &&
typeof list[0] === 'number' &&
typeof list[1] === 'number';
}
function traverseCoords(coordinates, callback) {
if (isXY(coordinates)) return callback(coordinates);
return coordinates.map(function(coord) { return traverseCoords(coord, callback); });
}

var CoordinatesUtils = {
function traverseGeoJson(geojson, leafCallback, nodeCallback) {
if (geojson === null) return geojson;

let r = cloneDeep(geojson);

if (geojson.type === 'Feature') {
r.geometry = traverseGeoJson(geojson.geometry, leafCallback, nodeCallback);
} else if (geojson.type === 'FeatureCollection') {
r.features = r.features.map(function(gj) { return traverseGeoJson(gj, leafCallback, nodeCallback); });
} else if (geojson.type === 'GeometryCollection') {
r.geometries = r.geometries.map(function(gj) { return traverseGeoJson(gj, leafCallback, nodeCallback); });
} else {
if (leafCallback) leafCallback(r);
}

if (nodeCallback) nodeCallback(r);

return r;
}

function determineCrs(crs) {
if (typeof crs === 'string' || crs instanceof String) {
return Proj4js.defs(crs) ? new Proj4js.Proj(crs) : null;
}
return crs;
}

const CoordinatesUtils = {
getUnits: function(projection) {
const proj = new Proj4js.Proj(projection);
return proj.units || 'degrees';
Expand All @@ -27,6 +65,52 @@ var CoordinatesUtils = {
}
return null;
},
/**
* Reprojects a geojson from a crs into another
*/
reprojectGeoJson: function(geojson, fromParam = "EPSG:4326", toParam = "EPSG:4326") {
let from = fromParam;
let to = toParam;
if (typeof from === 'string') {
from = determineCrs(from);
}
if (typeof to === 'string') {
to = determineCrs(to);
}
let transform = proj4(from, to);

return traverseGeoJson(geojson, (gj) => {
// No easy way to put correct CRS info into the GeoJSON,
// and definitely wrong to keep the old, so delete it.
if (gj.crs) {
delete gj.crs;
}
gj.coordinates = traverseCoords(gj.coordinates, (xy) => {
return transform.forward(xy);
});
}, (gj) => {
if (gj.bbox) {
// A bbox can't easily be reprojected, just reprojecting
// the min/max coords definitely will not work since
// the transform is not linear (in the general case).
// Workaround is to just re-compute the bbox after the
// transform.
gj.bbox = (() => {
let min = [Number.MAX_VALUE, Number.MAX_VALUE];
let max = [-Number.MAX_VALUE, -Number.MAX_VALUE];
traverseGeoJson(gj, function(_gj) {
traverseCoords(_gj.coordinates, function(xy) {
min[0] = Math.min(min[0], xy[0]);
min[1] = Math.min(min[1], xy[1]);
max[0] = Math.max(max[0], xy[0]);
max[1] = Math.max(max[1], xy[1]);
});
});
return [min[0], min[1], max[0], max[1]];
})();
}
});
},
normalizePoint: function(point) {
return {
x: point.x || 0.0,
Expand Down
Loading

0 comments on commit f703b6f

Please sign in to comment.