Newer
Older
{"version":3,"file":"SelectArea.js","sourceRoot":"","sources":["../../src/reactComponents/SelectArea.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\n\r\nimport React = require(\"react\");\r\n\r\nimport LayerBaseVectorGeoJson from '../layers/LayerBaseVectorGeoJson';\r\nimport {proj4326, proj3857} from '../olHelpers/projections'\r\nimport makeGuid from '../util/makeGuid';\r\nimport getMap from './helpers/get_map';\r\nimport Map from 'ol/Map'\r\nimport Draw from 'ol/interaction/Draw';\r\nimport Style from 'ol/style/Style';\r\nimport Stroke from 'ol/style/Stroke';\r\nimport Fill from 'ol/style/Fill';\r\nimport Polygon from 'ol/geom/Polygon';\r\nimport Feature from 'ol/Feature';\r\n\r\nexport interface iSelectArea{\r\n map: Map | (() => Map);\r\n callback: (coords: Array<number[]>) => any\r\n}\r\n\r\nexport class SelectArea extends React.Component<iSelectArea, {}> {\r\n map: Map;\r\n callback: (coords: Array<number[]>) => any;\r\n areaOverlay: LayerBaseVectorGeoJson;\r\n draw: Draw;\r\n selectId: string;\r\n cancelId: string;\r\n selectButton: HTMLButtonElement;\r\n cancelButton: HTMLButtonElement;\r\n\r\n\r\n constructor(props: iSelectArea, context: Object) {\r\n super(props, context);\r\n\r\n this.selectId = makeGuid();\r\n this.cancelId = makeGuid();\r\n\r\n this.callback = this.props.callback;\r\n\r\n this.areaOverlay = new LayerBaseVectorGeoJson('',\r\n {\r\n style: new Style({\r\n fill: new Fill({\r\n color: 'rgba(255, 0, 237, 0.1)'\r\n }),\r\n stroke: new Stroke({\r\n color: 'rgb(255, 0, 237)',\r\n width: 2\r\n })\r\n }),\r\n transform: {dataProjection: proj4326, featureProjection: proj3857}\r\n });\r\n\r\n this.draw = new Draw({\r\n source: this.areaOverlay.source,\r\n type: 'Polygon'\r\n });\r\n\r\n // this.draw.on('drawend', (evt: {feature: {getGeometry: () => Polygon}}) => {\r\n this.draw.on('drawend', (evt) => {\r\n this.selectButton.style.display = '';\r\n this.cancelButton.style.display = 'none';\r\n\r\n\r\n\r\n let geom = (evt['feature'] as Feature).getGeometry() as Polygon;\r\n let geomClone = geom.clone();\r\n\r\n geomClone.transform('EPSG:3857', 'EPSG:4326');\r\n\r\n setTimeout(() => {\r\n this.map.removeInteraction(this.draw);\r\n }, 100);\r\n\r\n let outCoords = [];\r\n let ccc = geomClone.getCoordinates()[0];\r\n\r\n for (let cc of ccc) {\r\n outCoords.push([Math.round(cc[0] * 1000000) / 1000000, Math.round(cc[1] * 1000000) / 1000000]);\r\n }\r\n\r\n this.callback(outCoords);\r\n });\r\n }\r\n\r\n\r\n componentDidMount() {\r\n this.selectButton = document.getElementById(this.selectId) as HTMLButtonElement;\r\n this.cancelButton = document.getElementById(this.cancelId) as HTMLButtonElement;\r\n getMap(this.props.map, this.areaOverlay.olLayer).then((m) => {this.map = m})\r\n }\r\n\r\n\r\n setArea() {\r\n if (!this.map) {\r\n return;\r\n }\r\n\r\n this.selectButton.style.display = 'none';\r\n this.cancelButton.style.display = '';\r\n\r\n this.areaOverlay.source.clear();\r\n this.map.addInteraction(this.draw);\r\n this.callback(null);\r\n }\r\n\r\n cancel() {\r\n if (!this.map) {\r\n return;\r\n }\r\n this.selectButton.style.display = '';\r\n this.cancelButton.style.display = 'none';\r\n\r\n this.areaOverlay.source.clear();\r\n this.map.removeInteraction(this.draw);\r\n\r\n this.callback(null);\r\n }\r\n\r\n render() {\r\n return <div className=\"ol-select-area\" style={{margin: '10px'}}>\r\n <button id={this.selectId} onClick={() => {\r\n this.setArea()\r\n }}>Select Area\r\n </button>\r\n <button id={this.cancelId} onClick={() => {\r\n this.cancel()\r\n }} style={{display: 'none'}}>Cancel\r\n </button>\r\n </div>\r\n }\r\n}\r\n"]}