Merge pull request #715 from theduckylittle/feature/limit-buffer-feat…

…ures Limit the number of bufferable features
geomoose · Mar 18, 2022 · f9f6e3b · f9f6e3b
2 parents 8afefa0 + 0c9abed
commit f9f6e3b
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 14 deletions.
diff --git a/src/gm3/components/map/index.js b/src/gm3/components/map/index.js
@@ -880,7 +880,7 @@ class Map extends React.Component {
 
             // buffer those features.
             bufferedFeature =
-                util.projectFeatures(
+                [jsts.union(util.projectFeatures(
                     wgs84Features.map(feature => {
                         const buffered = jsts.bufferFeature(feature, buffer);
                         buffered.properties = {
@@ -890,7 +890,8 @@ class Map extends React.Component {
                     }),
                     'EPSG:4326',
                     'EPSG:3857'
-                );
+                )
+                ), ];
         }
 
         // the selection feature(s) are the original, as-drawn feature.

diff --git a/src/gm3/components/serviceManager.js b/src/gm3/components/serviceManager.js
@@ -35,6 +35,7 @@ import { getExtentForQuery } from '../util';
 import { DEFAULT_RESULTS_CONFIG } from '../defaults';
 
 import MeasureTool from './measure';
+import Modal from './modal';
 
 import ServiceForm from './serviceForm';
 
@@ -78,6 +79,7 @@ class ServiceManager extends React.Component {
             lastService: null,
             lastFeature: '',
             values: {},
+            showTooManyFeatures: false,
         };
 
         this.fieldValues = {};
@@ -145,6 +147,8 @@ class ServiceManager extends React.Component {
             }
         }
 
+        const bufferEnabled = feature_count <= this.props.config.bufferMaxFeatures;
+
         const info_header = (
             <div className='results-info'>
                 {resultsConfig.showFeatureCount && (
@@ -162,9 +166,17 @@ class ServiceManager extends React.Component {
                 )}
 
                 {resultsConfig.showBufferAll && (
-                    <div className='results-info-item buffer-all'>
+                    <div
+                        className='results-info-item buffer-all'
+                    >
                         <div className='label'>{this.props.t('buffer-all')}</div>
-                        <div className='value' onClick={() => { this.props.bufferAll(query); }}>
+                        <div className='value' onClick={() => {
+                            if (bufferEnabled) {
+                                this.props.bufferAll(query);
+                            } else {
+                                this.setState({showTooManyFeatures: true});
+                            }
+                        }}>
                             <span className='icon buffer'></span>
                         </div>
                     </div>
@@ -351,6 +363,16 @@ class ServiceManager extends React.Component {
             if(this.props.queries.order.length > 0) {
                 contents = (
                     <React.Fragment>
+                        <Modal
+                            open={this.state.showTooManyFeatures}
+                            options={[{value: 'okay', label: this.props.t('Close')}]}
+                            onClose={() => {
+                                this.setState({showTooManyFeatures: false});
+                            }}
+                            title={this.props.t('too-many-features-title')}
+                        >
+                            {this.props.t('too-many-features-description')}
+                        </Modal>
                         { this.props.queries.order.map(this.renderQuery) }
                     </React.Fragment>
                 );
@@ -368,7 +390,6 @@ class ServiceManager extends React.Component {
                         <div className='info-box'>
                             { this.props.t('start-service-help') }
                         </div>
-
                         <div className='clear-controls'>
                             <button
                                 disabled={ !enable_clear }
@@ -399,6 +420,10 @@ const mapState = state => ({
     map: state.map,
     selectionFeatures: state.mapSources.selection ? state.mapSources.selection.features : [],
     resultsConfig: {...DEFAULT_RESULTS_CONFIG, ...state.config.results},
+    config: {
+        bufferMaxFeatures: 100,
+        ...state.config.query,
+    },
 });
 
 function mapDispatch(dispatch, ownProps) {

diff --git a/src/gm3/jsts.js b/src/gm3/jsts.js
@@ -39,21 +39,24 @@ export function buffer(feature, meters) {
     return bufferFeature(feature, meters).geometry;
 }
 
-export function bufferFeature(feature, meters) {
-    // Start on null island.
-    let pos_pt = [0, 0];
-
+function getAnchorPoint(feature, empty = null) {
+    let anchorPoint = empty;
     const gtype = feature.geometry.type;
-
     if (gtype === 'Point') {
-        pos_pt = feature.geometry.coordinates;
+        anchorPoint = feature.geometry.coordinates;
     } else if(gtype === 'MultiPoint' || gtype === 'LineString') {
-        pos_pt = feature.geometry.coordinates[0];
+        anchorPoint = feature.geometry.coordinates[0];
     } else if(gtype === 'MultiLineString' || gtype === 'Polygon') {
-        pos_pt = feature.geometry.coordinates[0][0];
+        anchorPoint = feature.geometry.coordinates[0][0];
     } else if(gtype === 'MuliPolygon') {
-        pos_pt = feature.geometry.cooredinates[0][0][0];
+        anchorPoint = feature.geometry.cooredinates[0][0][0];
     }
+    return anchorPoint;
+}
+
+export function bufferFeature(feature, meters) {
+    // Start on null island.
+    const pos_pt = getAnchorPoint(feature, [0, 0]);
 
     // find the feature's location in UTM space.
     const utmZone = proj.get(getUtmZone(pos_pt));
@@ -114,3 +117,23 @@ export function bufferAndUnion(features, meters) {
 
     return geometry.geometry;
 }
+
+export function union(features) {
+    const distance = pt => Math.sqrt(pt[0] * pt[0] + pt[1] * pt[1]);
+    // sort the features by their bounding boxes.
+    const sortedFeatures = features.sort((a, b) => {
+        const ptA = getAnchorPoint(a);
+        const ptB = getAnchorPoint(b);
+        if (ptA === null) {
+            return 1;
+        } else if (ptB === null) {
+            return -1;
+        }
+        return distance(ptA) < distance(ptB) ? -1 : 1;
+    });
+    let unionFeature = {...sortedFeatures[0]};
+    for (let i = 1, ii = sortedFeatures.length; i < ii; i++) {
+        unionFeature = turf_union(unionFeature, sortedFeatures[i]);
+    }
+    return unionFeature;
+}
diff --git a/src/gm3/lang/en.json b/src/gm3/lang/en.json
@@ -85,6 +85,8 @@
   "search-catalog" : "Search catalog",
   "start-service-help" : "Nothing available to view. Please click a service to start in the toolbar.",
   "toggle-legend-tip" : "Toggle legend visibility.",
+  "too-many-features-title": "Too many features",
+  "too-many-features-description": "Too many features to buffer. Please, select a smaller number of features on the map.",
   "undo-changes" : "Undo Changes",
   "unfade-tip" : "Unfade layer",
   "units" : "Units",

diff --git a/src/less/results.less b/src/less/results.less
@@ -111,6 +111,14 @@
                 }
             }
 
+            &.disabled {
+                border-color: #eee;
+                color: #eee;
+                cursor: not-allowed;
+                .icon {
+                    cursor: not-allowed;
+                }
+            }
         }
     }
 }