Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Also update measurements on mouse move #1350

Merged
merged 2 commits into from
Dec 13, 2016
Merged

Also update measurements on mouse move #1350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
520e815
Also update measurements on mouse move
manisandro Nov 22, 2016
a3a2f5c
Add MeasurementSupport updateOnMouseMove property
manisandro Dec 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 59 additions & 51 deletions web/client/components/map/leaflet/MeasurementSupport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,17 @@ const MeasurementSupport = React.createClass({
projection: React.PropTypes.string,
measurement: React.PropTypes.object,
changeMeasurementState: React.PropTypes.func,
messages: React.PropTypes.object
messages: React.PropTypes.object,
updateOnMouseMove: React.PropTypes.bool
},
contextTypes: {
messages: React.PropTypes.object
},
getDefaultProps() {
return {
updateOnMouseMove: false
};
},
componentWillReceiveProps(newProps) {
var drawingStrings = this.props.messages || (this.context.messages) ? this.context.messages.drawLocal : false;
if (drawingStrings) {
Expand Down Expand Up @@ -62,16 +68,52 @@ const MeasurementSupport = React.createClass({
render() {
return null;
},
mapClickHandler: function() {
var area;
var newMeasureState;
var bearingMarkers;
var bearingLatLng1;
var bearingLatLng2;
var coords1;
var coords2;
var bearing = 0;
updateMeasurementResults() {
if (!this.drawing || !this.drawControl) {
return;
}
let distance = 0;
let area = 0;
let bearing = 0;

let currentLatLng = this.drawControl._currentLatLng;
if (this.props.measurement.geomType === 'LineString' && this.drawControl._markers && this.drawControl._markers.length > 0) {
// calculate length
let previousLatLng = this.drawControl._markers[this.drawControl._markers.length - 1].getLatLng();
distance = this.drawControl._measurementRunningTotal + currentLatLng.distanceTo(previousLatLng);
} else if (this.props.measurement.geomType === 'Polygon' && this.drawControl._poly) {
// calculate area
let latLngs = [...this.drawControl._poly.getLatLngs(), currentLatLng];
area = L.GeometryUtil.geodesicArea(latLngs);
} else if (this.props.measurement.geomType === 'Bearing' && this.drawControl._markers && this.drawControl._markers.length > 0) {
// calculate bearing
let bearingMarkers = this.drawControl._markers;
let coords1 = [bearingMarkers[0].getLatLng().lng, bearingMarkers[0].getLatLng().lat];
let coords2;
if (bearingMarkers.length === 1) {
coords2 = [currentLatLng.lng, currentLatLng.lat];
} else if (bearingMarkers.length === 2) {
coords2 = [bearingMarkers[1].getLatLng().lng, bearingMarkers[1].getLatLng().lat];
// restrict line drawing to 2 vertices
this.drawControl._finishShape();
this.drawControl.disable();
this.drawing = false;
}
// calculate the azimuth as base for bearing information
bearing = CoordinatesUtils.calculateAzimuth(coords1, coords2, this.props.projection);
}

let newMeasureState = assign({}, this.props.measurement,
{
point: null, // Point is set in onDraw.created
len: distance,
area: area,
bearing: bearing
}
);
this.props.changeMeasurementState(newMeasureState);
},
mapClickHandler: function() {
if (!this.drawing && this.drawControl !== null) {
// re-enable draw control, since it is stopped after
// every finished sketch
Expand All @@ -80,47 +122,7 @@ const MeasurementSupport = React.createClass({
this.drawing = true;

} else {
// update measurement results for every new vertex drawn

// calculate area
if (this.props.measurement.geomType === 'Polygon') {
let latLngs = this.drawControl._poly.getLatLngs();
area = L.GeometryUtil.geodesicArea(latLngs);
}

// calculate bearing
if (this.props.measurement.geomType === 'Bearing') {
bearingMarkers = this.drawControl._markers;

if (bearingMarkers.length > 1) {
// restrict line drawing to 2 vertices
this.drawControl._finishShape();
this.drawControl.disable();
this.drawing = false;

bearingLatLng1 = bearingMarkers[0].getLatLng();
bearingLatLng2 = bearingMarkers[1].getLatLng();
coords1 = [bearingLatLng1.lng, bearingLatLng1.lat];
coords2 = [bearingLatLng2.lng, bearingLatLng2.lat];

// calculate the azimuth as base for bearing information
bearing = CoordinatesUtils.calculateAzimuth(
coords1, coords2, this.props.projection);
}
}

newMeasureState = {
pointMeasureEnabled: this.props.measurement.pointMeasureEnabled,
lineMeasureEnabled: this.props.measurement.lineMeasureEnabled,
areaMeasureEnabled: this.props.measurement.areaMeasureEnabled,
bearingMeasureEnabled: this.props.measurement.bearingMeasureEnabled,
geomType: this.props.measurement.geomType,
point: null, // handled in onDraw.created
len: this.props.measurement.geomType === 'LineString' ? this.drawControl._measurementRunningTotal : 0,
area: this.props.measurement.geomType === 'Polygon' ? area : 0,
bearing: bearing
};
this.props.changeMeasurementState(newMeasureState);
this.updateMeasurementResults();
}
},
addDrawInteraction: function(newProps) {
Expand All @@ -130,6 +132,9 @@ const MeasurementSupport = React.createClass({
this.props.map.on('draw:created', this.onDraw.created, this);
this.props.map.on('draw:drawstart', this.onDraw.drawStart, this);
this.props.map.on('click', this.mapClickHandler, this);
if (this.props.updateOnMouseMove) {
this.props.map.on('mousemove', this.updateMeasurementResults, this);
}

if (newProps.measurement.geomType === 'Point') {
this.drawControl = new L.Draw.Marker(this.props.map, {
Expand Down Expand Up @@ -170,6 +175,9 @@ const MeasurementSupport = React.createClass({
this.props.map.off('draw:created', this.onDraw.created, this);
this.props.map.off('draw:drawstart', this.onDraw.drawStart, this);
this.props.map.off('click', this.mapClickHandler, this);
if (this.props.updateOnMouseMove) {
this.props.map.off('mousemove', this.updateMeasurementResults, this);
}
}
}
});
Expand Down
56 changes: 34 additions & 22 deletions web/client/components/map/openlayers/MeasurementSupport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
*/

const React = require('react');
const assign = require('object-assign');
var ol = require('openlayers');
var CoordinatesUtils = require('../../../utils/CoordinatesUtils');
var wgs84Sphere = new ol.Sphere(6378137);
Expand All @@ -16,7 +17,13 @@ const MeasurementSupport = React.createClass({
map: React.PropTypes.object,
projection: React.PropTypes.string,
measurement: React.PropTypes.object,
changeMeasurementState: React.PropTypes.func
changeMeasurementState: React.PropTypes.func,
updateOnMouseMove: React.PropTypes.bool
},
getDefaultProps() {
return {
updateOnMouseMove: false
};
},
componentWillReceiveProps(newProps) {

Expand Down Expand Up @@ -99,8 +106,10 @@ const MeasurementSupport = React.createClass({
})
});

// update measurement results for every new vertex drawn
this.props.map.on('click', this.updateMeasurementResults, this);
if (this.props.updateOnMouseMove) {
this.props.map.on('pointermove', this.updateMeasurementResults, this);
}

draw.on('drawstart', function(evt) {
// preserv the sketch feature of the draw controller
Expand All @@ -121,36 +130,39 @@ const MeasurementSupport = React.createClass({
this.props.map.removeLayer(this.measureLayer);
this.sketchFeature = null;
this.props.map.un('click', this.updateMeasurementResults, this);
if (this.props.updateOnMouseMove) {
this.props.map.un('pointermove', this.updateMeasurementResults, this);
}
}
},
updateMeasurementResults() {
var bearing = 0;
var sketchCoords = this.sketchFeature.getGeometry().getCoordinates();
var newMeasureState;
if (!this.sketchFeature) {
return;
}
let bearing = 0;
let sketchCoords = this.sketchFeature.getGeometry().getCoordinates();

if (this.props.measurement.geomType === 'Bearing' &&
sketchCoords.length > 2) {
this.drawInteraction.finishDrawing();
sketchCoords.length > 1) {
// calculate the azimuth as base for bearing information
bearing = CoordinatesUtils.calculateAzimuth(
sketchCoords[0], sketchCoords[1], this.props.projection);
if (sketchCoords.length > 2) {
this.drawInteraction.finishDrawing();
}
}

newMeasureState = {
pointMeasureEnabled: this.props.measurement.pointMeasureEnabled,
lineMeasureEnabled: this.props.measurement.lineMeasureEnabled,
areaMeasureEnabled: this.props.measurement.areaMeasureEnabled,
bearingMeasureEnabled: this.props.measurement.bearingMeasureEnabled,
geomType: this.props.measurement.geomType,
point: this.props.measurement.geomType === 'Point' ?
this.getPointCoordinate(sketchCoords) : null,
len: this.props.measurement.geomType === 'LineString' ?
this.calculateGeodesicDistance(sketchCoords) : 0,
area: this.props.measurement.geomType === 'Polygon' ?
this.calculateGeodesicArea(this.sketchFeature.getGeometry().getLinearRing(0).getCoordinates()) : 0,
bearing: this.props.measurement.geomType === 'Bearing' ? bearing : 0
};

let newMeasureState = assign({}, this.props.measurement,
{
point: this.props.measurement.geomType === 'Point' ?
this.getPointCoordinate(sketchCoords) : null,
len: this.props.measurement.geomType === 'LineString' ?
this.calculateGeodesicDistance(sketchCoords) : 0,
area: this.props.measurement.geomType === 'Polygon' ?
this.calculateGeodesicArea(this.sketchFeature.getGeometry().getLinearRing(0).getCoordinates()) : 0,
bearing: this.props.measurement.geomType === 'Bearing' ? bearing : 0
}
);
this.props.changeMeasurementState(newMeasureState);
},
reprojectedCoordinates: function(coordinates) {
Expand Down