archive-gh-me/openglobus
1
0
Fork 0
mirror of https://github.com/openglobus/openglobus.git synced 2025-12-08 19:25:27 +00:00
Code Issues Projects Releases Wiki Activity

adjustable drawing control styling

Browse Source
This commit is contained in:
program-sam 2025-06-24 14:01:39 +02:00
parent 799947b21e
commit 0745df2825
5 changed files with 152 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
sandbox/drawingControl/drawingControl.html
View File

@ -1,54 +1,67 @@

<html>
<html>
<head>
<title>OpenStreetMap Base Layer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./drawingControl.js" type="module"></script>
<link rel="stylesheet" href="../../lib/@openglobus/og.css" type="text/css" />
<link rel="stylesheet" href="../../lib/og.css" type="text/css" />
</head>
<body>
<div id="earth" style="width:100%;height:100%"></div>
<script type="module" id="og-sandbox-script">
import {
XYZ,
Globe,
Extent,
LonLat,
GlobusRgbTerrain,
control
} from "../../lib/@openglobus/og.esm.js";
import {
XYZ,
Globe,
Extent,
LonLat,
GlobusRgbTerrain,
control
} from "../../lib/og.es.js";
let osm = new XYZ("osm", {
isBaseLayer: true,
url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png",
visibility: true,
attribution: 'Data @ OpenStreetMap contributors, ODbL',
maxNativeZoom: 19,
defaultTextures: [{ color: "#AAD3DF" }, { color: "#F2EFE9" }],
isSRGB: false,
shininess: 18,
specular: [0.00063, 0.00055, 0.00032],
ambient: [0.2, 0.2, 0.3],
diffuse: [0.9, 0.9, 0.7],
});
let osm = new XYZ("osm", {
isBaseLayer: true,
url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png",
visibility: true,
attribution: 'Data @ OpenStreetMap contributors, ODbL',
maxNativeZoom: 19,
defaultTextures: [{ color: "#AAD3DF" }, { color: "#F2EFE9" }],
isSRGB: false,
shininess: 18,
specular: [0.00063, 0.00055, 0.00032],
ambient: [0.2, 0.2, 0.3],
diffuse: [0.9, 0.9, 0.7],
});
var globus = new Globe({
target: "earth",
name: "Earth",
maxAltitude: 15000000,
terrain: new GlobusRgbTerrain(),
layers: [osm],
resourcesSrc: "../../external/og/lib/@openglobus/res",
fontsSrc: "../../external/og/lib/@openglobus/res/fonts"
});
var globus = new Globe({
target: "earth",
name: "Earth",
maxAltitude: 15000000,
terrain: new GlobusRgbTerrain(),
layers: [osm],
resourcesSrc: "../../external/og/lib/@openglobus/res",
fontsSrc: "../../external/og/lib/@openglobus/res/fonts"
});
globus.planet.viewExtent(new Extent(new LonLat(158.31010, 54.45445), new LonLat(158.55687, 54.56659)));
globus.planet.viewExtent(new Extent(new LonLat(158.31010, 54.45445), new LonLat(158.55687, 54.56659)));
globus.planet.addControl(new control.DrawingSwitcher());
</script>
globus.planet.addControl(new control.DrawingSwitcher({
corner_options: {
color: "#0000FF",
},
center_options: {
color: "#00FF00",
},
outline_options: {
color: "#FF0000",
},
fill_options: {
fillColor: "#00FFFF",
fillOpacity: 0.3,
},
}));
</script>
</body>
</html>

10
src/control/DrawingSwitcher.ts
View File

@ -1,7 +1,7 @@
import {ButtonGroup} from "../ui/ButtonGroup";
import {Control} from "./Control";
import {DrawingControl} from "./drawing/DrawingControl";
import {ToggleButton} from "../ui/ToggleButton";
import { ButtonGroup } from "../ui/ButtonGroup";
import { Control } from "./Control";
import { DrawingControl } from "./drawing/DrawingControl";
import { ToggleButton } from "../ui/ToggleButton";
const ICON_POLYGON_SVG = `<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
@ -49,7 +49,7 @@ export class DrawingSwitcher extends Control {
...options
});
this.drawingControl = new DrawingControl();
this.drawingControl = new DrawingControl(options);
}
public override oninit() {

35
src/control/drawing/DrawingControl.ts
View File

@ -1,22 +1,37 @@
import {Control, type IControlParams} from "../Control";
import {LineStringDrawingScene} from "./LineStringDrawingScene";
import {PolygonDrawingScene} from "./PolygonDrawingScene";
import { Control, type IControlParams } from "../Control";
import { LineStringDrawingScene } from "./LineStringDrawingScene";
import { PolygonDrawingScene } from "./PolygonDrawingScene";
export interface IDrawingControlParams extends IControlParams {
corner_options?: any;
center_options?: any;
outline_options?: any;
fill_options?: any;
}
class DrawingControl extends Control {
protected _drawingScene: PolygonDrawingScene;
constructor(options: IControlParams = {}) {
constructor(options: IDrawingControlParams = {}) {
super(options);
this._drawingScene = new LineStringDrawingScene({
name: `drawingScene:${this.__id}`
name: `drawingScene:${this.__id}`,
corner_options: options.corner_options || {},
center_options: options.center_options || {},
outline_options: options.outline_options || {},
fill_options: options.fill_options || {},
});
}
public activatePolygonDrawing() {
this.deactivate();
this._drawingScene = new PolygonDrawingScene({
name: `polygonDrawingScene:${this.__id}`
name: `polygonDrawingScene:${this.__id}`,
corner_options: this._drawingScene._corner_options,
center_options: this._drawingScene._center_options,
outline_options: this._drawingScene._outline_options,
fill_options: this._drawingScene._fill_options,
});
this.activate();
}
@ -24,7 +39,11 @@ class DrawingControl extends Control {
public activateLineStringDrawing() {
this.deactivate();
this._drawingScene = new LineStringDrawingScene({
name: `linestringDrawingScene:${this.__id}`
name: `linestringDrawingScene:${this.__id}`,
corner_options: this._drawingScene._corner_options,
center_options: this._drawingScene._center_options,
outline_options: this._drawingScene._outline_options,
fill_options: this._drawingScene._fill_options,
});
this.activate();
}
@ -42,4 +61,4 @@ class DrawingControl extends Control {
}
}
export {DrawingControl};
export { DrawingControl };

19
src/control/drawing/LineStringDrawingScene.ts
View File

@ -1,12 +1,9 @@
import {Entity} from "../../entity/Entity";
import {Vec2} from "../../math/Vec2";
import {Vec3} from "../../math/Vec3";
import { Entity } from "../../entity/Entity";
import { Vec2 } from "../../math/Vec2";
import { Vec3 } from "../../math/Vec3";
import {
CENTER_OPTIONS,
CORNER_OPTIONS,
NUM_SEGMENTS,
OUTLINE_ALT,
OUTLINE_OPTIONS,
PolygonDrawingScene,
type IPolygonDrawingSceneParams
} from "./PolygonDrawingScene";
@ -31,7 +28,7 @@ class LineStringDrawingScene extends PolygonDrawingScene {
let prevCorn = corners[segNum];
let corner = new Entity({
geoObject: CORNER_OPTIONS,
geoObject: this._corner_options,
});
corner.setCartesian3v(cart);
@ -59,7 +56,7 @@ class LineStringDrawingScene extends PolygonDrawingScene {
polyline: {
path3v: [prevPath],
isClosed: false,
...OUTLINE_OPTIONS
...this._outline_options
}
});
entity.polyline!.altitude = OUTLINE_ALT;
@ -68,7 +65,7 @@ class LineStringDrawingScene extends PolygonDrawingScene {
let prevCenterCart = vecPrev.scaleTo(distPrev * 0.5).addA(prevCart);
let center = new Entity({
geoObject: CENTER_OPTIONS,
geoObject: this._center_options,
});
center.setCartesian3v(prevCenterCart);
center.addTo(this._centerLayer);
@ -183,7 +180,7 @@ class LineStringDrawingScene extends PolygonDrawingScene {
polyline: {
path3v: [],
isClosed: false,
...OUTLINE_OPTIONS
...this._outline_options
}
}),
this._ghostCorner
@ -193,4 +190,4 @@ class LineStringDrawingScene extends PolygonDrawingScene {
}
}
export {LineStringDrawingScene};
export { LineStringDrawingScene };

113
src/control/drawing/PolygonDrawingScene.ts
View File

@ -1,17 +1,17 @@
import * as math from "../../math";
import {createEvents, type EventsHandler} from '../../Events';
import type {CoordinatesType} from "../../entity/Geometry";
import {Entity} from '../../entity/Entity';
import type {IMouseState} from "../../renderer/RendererEvents";
import {OldMouseNavigation} from "../OldMouseNavigation";
import {LonLat} from '../../LonLat';
import {Line3} from '../../math/Line3';
import {Object3d} from '../../Object3d';
import {Planet} from '../../scene/Planet';
import {RenderNode} from '../../scene/RenderNode';
import {Vec2} from '../../math/Vec2';
import {Vec3} from '../../math/Vec3';
import {Vector} from '../../layer/Vector';
import { createEvents, type EventsHandler } from '../../Events';
import type { CoordinatesType } from "../../entity/Geometry";
import { Entity } from '../../entity/Entity';
import type { IMouseState } from "../../renderer/RendererEvents";
import { OldMouseNavigation } from "../OldMouseNavigation";
import { LonLat } from '../../LonLat';
import { Line3 } from '../../math/Line3';
import { Object3d } from '../../Object3d';
import { Planet } from '../../scene/Planet';
import { RenderNode } from '../../scene/RenderNode';
import { Vec2 } from '../../math/Vec2';
import { Vec3 } from '../../math/Vec3';
import { Vector } from '../../layer/Vector';
type PolygonDrawingSceneEventsList = ["change", "startpoint"];
@ -19,6 +19,10 @@ const POLYGONDRAWINGSCENE_EVENTS: PolygonDrawingSceneEventsList = ["change", "st
export interface IPolygonDrawingSceneParams {
coordinates?: CoordinatesType[];
corner_options?: Object;
center_options?: Object;
outline_options?: Object;
fill_options?: Object;
name: string;
}
@ -26,35 +30,14 @@ const POINTER_OBJ3D = Object3d.createCylinder(1, 1, 2.0, 20, 1, true, false, 0,
export const NUM_SEGMENTS = 200;
export const OUTLINE_ALT = 0.3;
export const COORDINATES_COLOR = "rgb(350, 350, 0)";
export const CENTER_COLOR = "rgb(0, 350, 50)";
export const OUTLINE_COLOR = "rgb(0, 350, 50)";
export const OUTLINE_THICKNESS = 3.5;
export const CORNER_OPTIONS = {
scale: 0.5,
instanced: true,
tag: "corners",
color: COORDINATES_COLOR,
object3d: POINTER_OBJ3D
};
export const CENTER_OPTIONS = {
scale: 0.4,
instanced: true,
tag: "centers",
color: CENTER_COLOR,
object3d: POINTER_OBJ3D
};
export const OUTLINE_OPTIONS = {
thickness: OUTLINE_THICKNESS,
color: OUTLINE_COLOR
}
class PolygonDrawingScene extends RenderNode {
public events: EventsHandler<PolygonDrawingSceneEventsList>;
public _planet: Planet | null;
public _corner_options: Object;
public _center_options: Object;
public _outline_options: Object;
public _fill_options: Object;
protected _initCoordinates: CoordinatesType[];
protected _pickedCorner: Entity | null;
protected _pickedCenter: Entity | null;
@ -88,6 +71,38 @@ class PolygonDrawingScene extends RenderNode {
this._geometryLayer = new Vector();
//
// options for vectors
//
this._corner_options = {
scale: 0.5,
instanced: true,
tag: "corners",
color: "rgb(350, 350, 0)",
object3d: POINTER_OBJ3D,
...(options.corner_options || {})
};
this._center_options = {
scale: 0.4,
instanced: true,
tag: "centers",
color: "rgb(0, 350, 50)",
object3d: POINTER_OBJ3D,
...(options.center_options || {})
};
this._outline_options = {
thickness: 3.5,
color: "rgb(0, 350, 50)",
...(options.outline_options || {})
};
this._fill_options = {
fillColor: "rgba(0,146,247,0.2)",
...(options.fill_options || {})
};
//
// outline vectors
//
@ -112,7 +127,7 @@ class PolygonDrawingScene extends RenderNode {
polyline: {
path3v: [],
isClosed: false,
...OUTLINE_OPTIONS
...this._outline_options
}
})],
pickingEnabled: false,
@ -126,7 +141,7 @@ class PolygonDrawingScene extends RenderNode {
// Ghost cursor pointer
//
this._ghostCorner = new Entity({
geoObject: CORNER_OPTIONS
geoObject: this._corner_options
});
this._ghostOutlineLayer = new Vector("ghost-pointer", {
@ -193,9 +208,7 @@ class PolygonDrawingScene extends RenderNode {
'geometry': {
'type': e.geometryType,
'coordinates': [coords],
'style': {
'fillColor': "rgba(0,146,247,0.2)"
}
'style': this._fill_options
}
});
this._geometryLayer.clear();
@ -473,7 +486,7 @@ class PolygonDrawingScene extends RenderNode {
let prevCorn = corners[segNum];
let corner = new Entity({
geoObject: CORNER_OPTIONS,
geoObject: this._corner_options,
});
corner.setCartesian3v(cart);
@ -511,7 +524,7 @@ class PolygonDrawingScene extends RenderNode {
polyline: {
path3v: [prevPath],
isClosed: false,
...OUTLINE_OPTIONS
...this._outline_options
}
});
entity.polyline!.altitude = OUTLINE_ALT;
@ -524,7 +537,7 @@ class PolygonDrawingScene extends RenderNode {
firstCenterCart = vecFirst.scaleTo(distFirst * 0.5).addA(firstCart);
let center = new Entity({
geoObject: CENTER_OPTIONS,
geoObject: this._center_options,
});
center.setCartesian3v(prevCenterCart);
center.addTo(this._centerLayer);
@ -538,7 +551,7 @@ class PolygonDrawingScene extends RenderNode {
} else {
let center = new Entity({
geoObject: CENTER_OPTIONS,
geoObject: this._center_options,
});
center.addTo(this._centerLayer);
}
@ -710,13 +723,13 @@ class PolygonDrawingScene extends RenderNode {
polyline: {
path3v: [],
isClosed: false,
...OUTLINE_OPTIONS
...this._outline_options
}
}), new Entity({
polyline: {
path3v: [],
isClosed: false,
...OUTLINE_OPTIONS
...this._outline_options
}
}),
this._ghostCorner
@ -727,4 +740,4 @@ class PolygonDrawingScene extends RenderNode {
}
}
export {PolygonDrawingScene};
export { PolygonDrawingScene };