Skip to content

Commit

Permalink
fix(cesium-draw): draw by primitive or geojson (#80)
Browse files Browse the repository at this point in the history 
* feat(cesium-draw): draw by primitive or geojson BBOX

* fix(typing): fixed

* feat(cesium-draw): point enum + story

* fix(cesium-draw): draw cursor indication

* fix(map-centalize): center tuple should be handled on usage level

* fix(layer-options): layer options interfacing

* fix(draw): cancel polygon draw cursor resotre

* chore(prettier): executed

* fix(pr-comments): fix

* chore(prettier): pritified

* fix(pr-comments): asaf comments treated

* chore(prettier): pretified

Co-authored-by: ALEXANDER LEVINSON <[email protected]>
  • Loading branch information
@alebinson
alebinson and ALEXANDER LEVINSON authored Dec 13, 2020
1 parent e9bfd76 commit d85c123
Show file tree
Hide file tree
Showing 9 changed files with 228 additions and 67 deletions.
60 changes: 58 additions & 2 deletions packages/react-components/src/lib/cesium-map/data-sources/drawings.data-source.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import { DrawType } from '../../models';
import { BboxCorner, DrawType } from '../../models';
import { CesiumSceneMode } from '../map.types';
import { CesiumMap } from '../map';
import {
CesiumDrawingsDataSource,
Expand Down Expand Up @@ -43,6 +44,7 @@ export const Drawings: Story = (args) => {
type: DrawType.UNKNOWN,
},
]);
const [center] = useState<[number, number]>([34.9578094, 32.8178637]);

const createDrawPrimitive = (type: DrawType): IDrawingObject => {
return {
Expand Down Expand Up @@ -84,8 +86,62 @@ export const Drawings: Story = (args) => {
>
Box
</button>
<button
style={{ position: 'fixed', top: '80px', left: '20px', zIndex: 1 }}
onClick={(): void => {
setIsDrawing(false);
setDrawPrimitive({
type: DrawType.UNKNOWN,
// eslint-disable-next-line @typescript-eslint/no-empty-function
handler: (drawing: IDrawingEvent) => {},
});
}}
>
Stop Draw
</button>
<button
style={{ position: 'fixed', top: '140px', left: '20px', zIndex: 1 }}
onClick={(): void => {
setIsDrawing(false);
setDrawEntities([
{
coordinates: undefined,
name: `${DrawType.BOX.toString()}_KUKU`,
id: 'KUKU',
type: DrawType.BOX,
geojson: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
type: BboxCorner.BOTTOM_LEFT,
},
geometry: {
type: 'Point',
coordinates: [34.88, 32.72],
},
},
{
type: 'Feature',
properties: {
type: BboxCorner.TOP_RIGHT,
},
geometry: {
type: 'Point',
coordinates: [35.02, 32.87],
},
},
],
},
},
]);
}}
>
Draw rectangle by coordinates
</button>
<div style={mapDivStyle}>
<CesiumMap>
<CesiumMap center={center} sceneMode={CesiumSceneMode.SCENE2D} zoom={9}>
<CesiumDrawingsDataSource
drawings={drawEntities}
material={CesiumColor.YELLOW.withAlpha(0.5)}
Expand Down
131 changes: 74 additions & 57 deletions packages/react-components/src/lib/cesium-map/data-sources/drawings.data-source.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Cartesian3, Color, Rectangle, Viewer, PolygonHierarchy } from 'cesium';
import { GeoJSON } from 'geojson';
import { FeatureCollection, GeoJSON } from 'geojson';
import { CustomDataSourceProps } from 'resium/dist/types/src/CustomDataSource/CustomDataSource';

import { DrawType } from '../../models';
Expand All @@ -10,18 +10,20 @@ import { CesiumPolygonGraphics } from '../entities/graphics/polygon.graphics';
import { CesiumRectangleGraphics } from '../entities/graphics/rectangle.graphics';
import { useCesiumMap } from '../map';
import { DrawHelper } from '../tools/draw/drawHelper';
import { geoJSONToPrimitive } from '../tools/geojson/geojson-to-primitive';
import { rectangleToGeoJSON, polygonToGeoJSON } from '../tools/geojson';
import { CesiumCustomDataSource } from './custom.data-source';

export class CesiumColor extends Color {}

export type PrimitiveCoordinates = Cartesian3[] | Rectangle;
export type PrimitiveCoordinates = Cartesian3[] | Rectangle | undefined;

export interface IDrawing {
coordinates: PrimitiveCoordinates;
name: string;
id: string;
type: DrawType;
geojson?: GeoJSON;
}

export interface IDrawingEvent {
Expand Down Expand Up @@ -55,79 +57,94 @@ export const CesiumDrawingsDataSource: React.FC<RCesiumDrawingDataSourceProps> =
}, [mapViewer]);

useEffect(() => {
if (drawState.drawing && drawHelper) {
switch (drawState.type) {
case DrawType.POLYGON:
// eslint-disable-next-line
(drawHelper as any).startDrawingPolygon({
callback: (positions: PrimitiveCoordinates) => {
//// MAKE polygon editable example
// var polygon = new DrawHelper.PolygonPrimitive({
// positions: positions,
// width: 5,
// geodesic: true
// });
// mapViewer.scene.primitives.add(polygon);
// polygon.setStrokeStyle(Color.AQUA,1);
// polygon.setEditable();
// polygon.addListener('onEdited', function(event) {
// console.log('Polygone edited, ' + event.positions.length + ' points');
// });
drawState.handler({
primitive: positions,
type: DrawType.POLYGON,
geojson: polygonToGeoJSON(positions as Cartesian3[]),
});
},
});
break;
case DrawType.BOX:
// eslint-disable-next-line
(drawHelper as any).startDrawingExtent({
callback: (positions: PrimitiveCoordinates) => {
//// MAKE box editable example
// var extentPrimitive = new DrawHelper.ExtentPrimitive({
// extent: positions,
// material: Cesium.Material.fromType(Cesium.Material.StripeType)
// });
// mapViewer.scene.primitives.add(extentPrimitive);
// extentPrimitive.setStrokeStyle(Color.AQUA,1);
// extentPrimitive.setEditable();
// extentPrimitive.addListener('onEdited', function(event) {
// console.log('Extent edited: extent is (N: ' + event.extent.north.toFixed(3) + ', E: ' + event.extent.east.toFixed(3) + ', S: ' + event.extent.south.toFixed(3) + ', W: ' + event.extent.west.toFixed(3) + ')');
// });
drawState.handler({
primitive: positions,
type: DrawType.BOX,
geojson: rectangleToGeoJSON(positions as Rectangle),
});
},
});
break;
default:
break;
if (drawHelper) {
// eslint-disable-next-line
const drawHelperInstance = drawHelper as any;
if (drawState.drawing) {
switch (drawState.type) {
case DrawType.POLYGON:
// eslint-disable-next-line
drawHelperInstance.startDrawingPolygon({
callback: (positions: PrimitiveCoordinates) => {
//// MAKE polygon editable example
// var polygon = new DrawHelper.PolygonPrimitive({
// positions: positions,
// width: 5,
// geodesic: true
// });
// mapViewer.scene.primitives.add(polygon);
// polygon.setStrokeStyle(Color.AQUA,1);
// polygon.setEditable();
// polygon.addListener('onEdited', function(event) {
// console.log('Polygone edited, ' + event.positions.length + ' points');
// });
drawState.handler({
primitive: positions,
type: DrawType.POLYGON,
geojson: polygonToGeoJSON(positions as Cartesian3[]),
});
},
});
break;
case DrawType.BOX:
// eslint-disable-next-line
drawHelperInstance.startDrawingExtent({
callback: (positions: PrimitiveCoordinates) => {
//// MAKE box editable example
// var extentPrimitive = new DrawHelper.ExtentPrimitive({
// extent: positions,
// material: Cesium.Material.fromType(Cesium.Material.StripeType)
// });
// mapViewer.scene.primitives.add(extentPrimitive);
// extentPrimitive.setStrokeStyle(Color.AQUA,1);
// extentPrimitive.setEditable();
// extentPrimitive.addListener('onEdited', function(event) {
// console.log('Extent edited: extent is (N: ' + event.extent.north.toFixed(3) + ', E: ' + event.extent.east.toFixed(3) + ', S: ' + event.extent.south.toFixed(3) + ', W: ' + event.extent.west.toFixed(3) + ')');
// });
drawState.handler({
primitive: positions,
type: DrawType.BOX,
geojson: rectangleToGeoJSON(positions as Rectangle),
});
},
});
break;
default:
throw new Error(
`[CESIUM DRAW]: ${drawState.type} unrecognized primitive to draw.`
);
break;
}
} else {
// eslint-disable-next-line
drawHelperInstance.stopDrawing();
}
}
}, [drawState, drawHelper]);

const renderGraphicsComponent = (
drawEntity: IDrawing
): React.ReactElement => {
const coordinates =
drawEntity.coordinates !== undefined
? drawEntity.coordinates
: geoJSONToPrimitive(
drawEntity.type,
drawEntity.geojson as FeatureCollection
);
switch (drawEntity.type) {
case DrawType.BOX:
return (
<CesiumRectangleGraphics
coordinates={drawEntity.coordinates as Rectangle}
coordinates={coordinates as Rectangle}
material={material}
outlineColor={outlineColor}
/>
);
case DrawType.POLYGON:
return (
<CesiumPolygonGraphics
hierarchy={
new PolygonHierarchy(drawEntity.coordinates as Cartesian3[])
}
hierarchy={new PolygonHierarchy(coordinates as Cartesian3[])}
material={material}
outlineColor={outlineColor}
/>
Expand Down
5 changes: 4 additions & 1 deletion packages/react-components/src/lib/cesium-map/layers/wms.layer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import React from 'react';
import { WebMapServiceImageryProvider } from 'cesium';
import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';

export interface RCesiumWMSLayerOptions
extends WebMapServiceImageryProvider.ConstructorOptions {}

export interface RCesiumWMSLayerProps
extends Partial<RCesiumImageryLayerProps> {
options: WebMapServiceImageryProvider.ConstructorOptions;
options: RCesiumWMSLayerOptions;
}

export const CesiumWMSLayer: React.FC<RCesiumWMSLayerProps> = (props) => {
Expand Down
5 changes: 4 additions & 1 deletion packages/react-components/src/lib/cesium-map/layers/wmts.layer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import React from 'react';
import { WebMapTileServiceImageryProvider } from 'cesium';
import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';

export interface RCesiumWMTSLayerOptions
extends WebMapTileServiceImageryProvider.ConstructorOptions {}

export interface RCesiumWMTSLayerProps
extends Partial<RCesiumImageryLayerProps> {
options: WebMapTileServiceImageryProvider.ConstructorOptions;
options: RCesiumWMTSLayerOptions;
}

export const CesiumWMTSLayer: React.FC<RCesiumWMTSLayerProps> = (props) => {
Expand Down
3 changes: 3 additions & 0 deletions packages/react-components/src/lib/cesium-map/layers/xyz.layer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import React from 'react';
import { UrlTemplateImageryProvider } from 'cesium';
import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';

export interface RCesiumXYZLayerOptions
extends UrlTemplateImageryProvider.ConstructorOptions {}

export interface RCesiumXYZLayerProps
extends Partial<RCesiumImageryLayerProps> {
options: UrlTemplateImageryProvider.ConstructorOptions;
Expand Down
5 changes: 3 additions & 2 deletions packages/react-components/src/lib/cesium-map/map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
}, [props.showScale]);

useEffect(() => {
const { zoom, center } = props;
const zoom = props.zoom;
const center = props.center;
if (mapViewRef && isNumber(zoom) && isArray(center)) {
void mapViewRef.camera.flyTo({
destination: Cartesian3.fromDegrees(
Expand All @@ -90,7 +91,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
duration: 0,
});
}
}, [props, mapViewRef]);
}, [props.zoom, props.center, mapViewRef]);

return (
<Viewer full ref={ref} {...viewerProps}>
Expand Down
Loading

0 comments on commit d85c123

Please sign in to comment.