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

10
src/control/DrawingSwitcher.ts
View File

@ -1,7 +1,7 @@
import {ButtonGroup} from "../ui/ButtonGroup"; import { ButtonGroup } from "../ui/ButtonGroup";
import {Control} from "./Control"; import { Control } from "./Control";
import {DrawingControl} from "./drawing/DrawingControl"; import { DrawingControl } from "./drawing/DrawingControl";
import {ToggleButton} from "../ui/ToggleButton"; import { ToggleButton } from "../ui/ToggleButton";
const ICON_POLYGON_SVG = `<?xml version="1.0" encoding="utf-8"?> 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) --> <!-- 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 ...options
}); });
this.drawingControl = new DrawingControl(); this.drawingControl = new DrawingControl(options);
} }
public override oninit() { public override oninit() {

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

@ -1,22 +1,37 @@
import {Control, type IControlParams} from "../Control"; import { Control, type IControlParams } from "../Control";
import {LineStringDrawingScene} from "./LineStringDrawingScene"; import { LineStringDrawingScene } from "./LineStringDrawingScene";
import {PolygonDrawingScene} from "./PolygonDrawingScene"; 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 { class DrawingControl extends Control {
protected _drawingScene: PolygonDrawingScene; protected _drawingScene: PolygonDrawingScene;
constructor(options: IControlParams = {}) { constructor(options: IDrawingControlParams = {}) {
super(options); super(options);
this._drawingScene = new LineStringDrawingScene({ 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() { public activatePolygonDrawing() {
this.deactivate(); this.deactivate();
this._drawingScene = new PolygonDrawingScene({ 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(); this.activate();
} }
@ -24,7 +39,11 @@ class DrawingControl extends Control {
public activateLineStringDrawing() { public activateLineStringDrawing() {
this.deactivate(); this.deactivate();
this._drawingScene = new LineStringDrawingScene({ 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(); 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 { Entity } from "../../entity/Entity";
import {Vec2} from "../../math/Vec2"; import { Vec2 } from "../../math/Vec2";
import {Vec3} from "../../math/Vec3"; import { Vec3 } from "../../math/Vec3";
import { import {
CENTER_OPTIONS,
CORNER_OPTIONS,
NUM_SEGMENTS, NUM_SEGMENTS,
OUTLINE_ALT, OUTLINE_ALT,
OUTLINE_OPTIONS,
PolygonDrawingScene, PolygonDrawingScene,
type IPolygonDrawingSceneParams type IPolygonDrawingSceneParams
} from "./PolygonDrawingScene"; } from "./PolygonDrawingScene";
@ -31,7 +28,7 @@ class LineStringDrawingScene extends PolygonDrawingScene {
let prevCorn = corners[segNum]; let prevCorn = corners[segNum];
let corner = new Entity({ let corner = new Entity({
geoObject: CORNER_OPTIONS, geoObject: this._corner_options,
}); });
corner.setCartesian3v(cart); corner.setCartesian3v(cart);
@ -59,7 +56,7 @@ class LineStringDrawingScene extends PolygonDrawingScene {
polyline: { polyline: {
path3v: [prevPath], path3v: [prevPath],
isClosed: false, isClosed: false,
...OUTLINE_OPTIONS ...this._outline_options
} }
}); });
entity.polyline!.altitude = OUTLINE_ALT; entity.polyline!.altitude = OUTLINE_ALT;
@ -68,7 +65,7 @@ class LineStringDrawingScene extends PolygonDrawingScene {
let prevCenterCart = vecPrev.scaleTo(distPrev * 0.5).addA(prevCart); let prevCenterCart = vecPrev.scaleTo(distPrev * 0.5).addA(prevCart);
let center = new Entity({ let center = new Entity({
geoObject: CENTER_OPTIONS, geoObject: this._center_options,
}); });
center.setCartesian3v(prevCenterCart); center.setCartesian3v(prevCenterCart);
center.addTo(this._centerLayer); center.addTo(this._centerLayer);
@ -183,7 +180,7 @@ class LineStringDrawingScene extends PolygonDrawingScene {
polyline: { polyline: {
path3v: [], path3v: [],
isClosed: false, isClosed: false,
...OUTLINE_OPTIONS ...this._outline_options
} }
}), }),
this._ghostCorner 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 * as math from "../../math";
import {createEvents, type EventsHandler} from '../../Events'; import { createEvents, type EventsHandler } from '../../Events';
import type {CoordinatesType} from "../../entity/Geometry"; import type { CoordinatesType } from "../../entity/Geometry";
import {Entity} from '../../entity/Entity'; import { Entity } from '../../entity/Entity';
import type {IMouseState} from "../../renderer/RendererEvents"; import type { IMouseState } from "../../renderer/RendererEvents";
import {OldMouseNavigation} from "../OldMouseNavigation"; import { OldMouseNavigation } from "../OldMouseNavigation";
import {LonLat} from '../../LonLat'; import { LonLat } from '../../LonLat';
import {Line3} from '../../math/Line3'; import { Line3 } from '../../math/Line3';
import {Object3d} from '../../Object3d'; import { Object3d } from '../../Object3d';
import {Planet} from '../../scene/Planet'; import { Planet } from '../../scene/Planet';
import {RenderNode} from '../../scene/RenderNode'; import { RenderNode } from '../../scene/RenderNode';
import {Vec2} from '../../math/Vec2'; import { Vec2 } from '../../math/Vec2';
import {Vec3} from '../../math/Vec3'; import { Vec3 } from '../../math/Vec3';
import {Vector} from '../../layer/Vector'; import { Vector } from '../../layer/Vector';
type PolygonDrawingSceneEventsList = ["change", "startpoint"]; type PolygonDrawingSceneEventsList = ["change", "startpoint"];
@ -19,6 +19,10 @@ const POLYGONDRAWINGSCENE_EVENTS: PolygonDrawingSceneEventsList = ["change", "st
export interface IPolygonDrawingSceneParams { export interface IPolygonDrawingSceneParams {
coordinates?: CoordinatesType[]; coordinates?: CoordinatesType[];
corner_options?: Object;
center_options?: Object;
outline_options?: Object;
fill_options?: Object;
name: string; 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 NUM_SEGMENTS = 200;
export const OUTLINE_ALT = 0.3; 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 { class PolygonDrawingScene extends RenderNode {
public events: EventsHandler<PolygonDrawingSceneEventsList>; public events: EventsHandler<PolygonDrawingSceneEventsList>;
public _planet: Planet | null; public _planet: Planet | null;
public _corner_options: Object;
public _center_options: Object;
public _outline_options: Object;
public _fill_options: Object;
protected _initCoordinates: CoordinatesType[]; protected _initCoordinates: CoordinatesType[];
protected _pickedCorner: Entity | null; protected _pickedCorner: Entity | null;
protected _pickedCenter: Entity | null; protected _pickedCenter: Entity | null;
@ -88,6 +71,38 @@ class PolygonDrawingScene extends RenderNode {
this._geometryLayer = new Vector(); 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 // outline vectors
// //
@ -112,7 +127,7 @@ class PolygonDrawingScene extends RenderNode {
polyline: { polyline: {
path3v: [], path3v: [],
isClosed: false, isClosed: false,
...OUTLINE_OPTIONS ...this._outline_options
} }
})], })],
pickingEnabled: false, pickingEnabled: false,
@ -126,7 +141,7 @@ class PolygonDrawingScene extends RenderNode {
// Ghost cursor pointer // Ghost cursor pointer
// //
this._ghostCorner = new Entity({ this._ghostCorner = new Entity({
geoObject: CORNER_OPTIONS geoObject: this._corner_options
}); });
this._ghostOutlineLayer = new Vector("ghost-pointer", { this._ghostOutlineLayer = new Vector("ghost-pointer", {
@ -193,9 +208,7 @@ class PolygonDrawingScene extends RenderNode {
'geometry': { 'geometry': {
'type': e.geometryType, 'type': e.geometryType,
'coordinates': [coords], 'coordinates': [coords],
'style': { 'style': this._fill_options
'fillColor': "rgba(0,146,247,0.2)"
}
} }
}); });
this._geometryLayer.clear(); this._geometryLayer.clear();
@ -473,7 +486,7 @@ class PolygonDrawingScene extends RenderNode {
let prevCorn = corners[segNum]; let prevCorn = corners[segNum];
let corner = new Entity({ let corner = new Entity({
geoObject: CORNER_OPTIONS, geoObject: this._corner_options,
}); });
corner.setCartesian3v(cart); corner.setCartesian3v(cart);
@ -511,7 +524,7 @@ class PolygonDrawingScene extends RenderNode {
polyline: { polyline: {
path3v: [prevPath], path3v: [prevPath],
isClosed: false, isClosed: false,
...OUTLINE_OPTIONS ...this._outline_options
} }
}); });
entity.polyline!.altitude = OUTLINE_ALT; entity.polyline!.altitude = OUTLINE_ALT;
@ -524,7 +537,7 @@ class PolygonDrawingScene extends RenderNode {
firstCenterCart = vecFirst.scaleTo(distFirst * 0.5).addA(firstCart); firstCenterCart = vecFirst.scaleTo(distFirst * 0.5).addA(firstCart);
let center = new Entity({ let center = new Entity({
geoObject: CENTER_OPTIONS, geoObject: this._center_options,
}); });
center.setCartesian3v(prevCenterCart); center.setCartesian3v(prevCenterCart);
center.addTo(this._centerLayer); center.addTo(this._centerLayer);
@ -538,7 +551,7 @@ class PolygonDrawingScene extends RenderNode {
} else { } else {
let center = new Entity({ let center = new Entity({
geoObject: CENTER_OPTIONS, geoObject: this._center_options,
}); });
center.addTo(this._centerLayer); center.addTo(this._centerLayer);
} }
@ -710,13 +723,13 @@ class PolygonDrawingScene extends RenderNode {
polyline: { polyline: {
path3v: [], path3v: [],
isClosed: false, isClosed: false,
...OUTLINE_OPTIONS ...this._outline_options
} }
}), new Entity({ }), new Entity({
polyline: { polyline: {
path3v: [], path3v: [],
isClosed: false, isClosed: false,
...OUTLINE_OPTIONS ...this._outline_options
} }
}), }),
this._ghostCorner this._ghostCorner
@ -727,4 +740,4 @@ class PolygonDrawingScene extends RenderNode {
} }
} }
export {PolygonDrawingScene}; export { PolygonDrawingScene };