add geometry selection functionality

Gooong · Jul 8, 2018 · d135255 · d135255
1 parent df49476
commit d135255
Showing 1 changed file with 41 additions and 24 deletions.
diff --git a/web/pgadmin/static/jsx/map_view/map_view_map.jsx b/web/pgadmin/static/jsx/map_view/map_view_map.jsx
@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import ReactResizeDetector from 'react-resize-detector';
 
 //require('ol/ol.css');
-var ol = require('ol/dist/ol');
+var ol = require('ol/dist/ol.js');
 
 // import Map from 'ol/Map.js';
 // import View from 'ol/View.js';
@@ -28,51 +28,68 @@ var ol = require('ol/dist/ol');
 export default class MapViewMap extends React.Component{
   constructor(props) {
     super(props);
+    this.initMap();
+    this.onResize = this.onResize.bind(this);
+  }
 
+  initMap(){
     this.backgroundLayer = new ol.layer.Tile({
       source: new ol.source.OSM(),
     });
-    this.dataLayer = new ol.layer.Vector();
+    this.dataLayer = new ol.layer.Vector({
+      renderMode: 'image',
+    });
     this.mapView = new ol.View();
+    let selectClick = new ol.interaction.Select({
+      condition:  ol.events.condition.click,
+    });
     this.olMap = new ol.Map({
       layers:[this.backgroundLayer, this.dataLayer],
       view: this.mapView,
     });
-
-    this.onResize = this.onResize.bind(this);
+    this.olMap.addInteraction(selectClick);
   }
 
   componentDidMount(){
     this.olMap.setTarget('ol-map');
   }
 
   componentDidUpdate(){
-    //alert(JSON.stringify(this.props.geometries[0]));
-
 
-    //render new data in map
-    const vectorSource = new ol.source.Vector({
-      forrmat:new ol.format.GeoJSON(),
-    });
+    let vectorSource = new ol.source.Vector();
     let format = new ol.format.GeoJSON();
-    let features = _.map(this.props.geometries, function (geometry) {
-      let geom = format.readFeature(geometry);
-      return geom;
+    let projection = new ol.proj.Projection({
+      code: 'EPSG:' + this.props.SRID,
+      units: 'm',
     });
-    vectorSource.addFeatures(features);
-    this.dataLayer.setSource(vectorSource);
 
-    this.renderSRID = this.props.SRID===0? 4326:this.props.SRID;
-    this.mapView = new ol.View({
-      projection:'EPSG:' + this.renderSRID,
-      center:[0,0],
-      zoom:2,
+    let features = _.map(this.props.geometries, function (geometry) {
+      return format.readFeature(geometry, {
+        dataProjection: projection,
+        featureProjection: projection,
+      });
     });
+    vectorSource.addFeatures(features);
 
-    this.olMap.setProperties({
-      layers: [this.dataLayer, this.backgroundLayer],
-      view: this.mapView,
-    });
+    if (features.length > 0){
+      this.dataLayer.setSource(vectorSource);
+
+      alert(this.props.SRID);
+      alert(features.length);
+      alert(vectorSource.getExtent());
+      if(this.renderSRID !== this.props.SRID){
+        this.renderSRID = this.props.SRID;
+        this.mapView = new ol.View({
+          projection: projection,
+          center:[0,0],
+        });
+      }
+      this.olMap.setProperties({
+        layers: [this.dataLayer, this.backgroundLayer ],
+        view: this.mapView,
+      });
+      this.mapView.fit(vectorSource.getExtent(),{duration:500, constrainResolution: false});
+    }
   }