diff --git a/examples/mini-map.html b/examples/mini-map.html
new file mode 100644
index 000000000..adda942ce
--- /dev/null
+++ b/examples/mini-map.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ olcesium vectors example
+
+
+
+
+
+
+ ************ add description ******************
+
+
+
diff --git a/examples/mini-map.js b/examples/mini-map.js
new file mode 100644
index 000000000..a894b822f
--- /dev/null
+++ b/examples/mini-map.js
@@ -0,0 +1,115 @@
+/**
+ * @module examples.vectors
+ */
+import OLCesium from 'olcs/OLCesium.ts';
+import olView from 'ol/View.js';
+import {defaults as olControlDefaults} from 'ol/control.js';
+import olSourceOSM from 'ol/source/OSM.js';
+import olLayerTile from 'ol/layer/Tile.js';
+import olStyleText from 'ol/style/Text.js';
+import olStyleIcon from 'ol/style/Icon.js';
+import olStyleStyle from 'ol/style/Style.js';
+import olGeomPoint from 'ol/geom/Point.js';
+import olFeature from 'ol/Feature.js';
+import olStyleStroke from 'ol/style/Stroke.js';
+import {defaults as interactionDefaults} from 'ol/interaction.js';
+import olStyleFill from 'ol/style/Fill.js';
+import olMap from 'ol/Map.js';
+import olSourceVector from 'ol/source/Vector.js';
+import olLayerVector from 'ol/layer/Vector.js';
+import {rotateAroundAxis, pickBottomPoint} from 'olcs/core.ts';
+import {OLCS_ION_TOKEN} from './_common.js';
+
+
+const icon1Feature = new olFeature({
+ geometry: new olGeomPoint([700000, 200000])
+});
+icon1Feature.setStyle(new olStyleStyle({
+ image: new olStyleIcon(/** @type {olx.style.IconOptions} */ ({
+ anchor: [0.5, 1],
+ src: 'data/icon.png',
+ })),
+ text: new olStyleText({
+ stroke: new olStyleStroke({
+ color: 'black',
+ width: 3
+ }),
+ fill: new olStyleFill({
+ color: 'white'
+ })
+ })
+}));
+
+const vectorSource = new olSourceVector({
+ features: [
+ icon1Feature,
+ ]
+});
+
+const vectorLayer = new olLayerVector({
+ source: vectorSource
+});
+
+const miniMap = new olMap({
+ interactions: interactionDefaults(),
+ layers: [
+ new olLayerTile({
+ source: new olSourceOSM()
+ }),
+ vectorLayer
+ ],
+ target: 'map2d',
+ controls: olControlDefaults({
+ attributionOptions: {
+ collapsible: false
+ }
+ }),
+ view: new olView({
+ center: [850000, 200000],
+ zoom: 7
+ })
+});
+
+const map = new olMap({
+ interactions: interactionDefaults(),
+ layers: [
+ new olLayerTile({
+ source: new olSourceOSM()
+ }),
+ ],
+ target: 'map2d',
+ controls: olControlDefaults({
+ attributionOptions: {
+ collapsible: false
+ }
+ }),
+ view: new olView({
+ center: [850000, 200000],
+ zoom: 7
+ })
+});
+
+
+Cesium.Ion.defaultAccessToken = OLCS_ION_TOKEN;
+const ol3d = new OLCesium({map});
+const scene = ol3d.getCesiumScene();
+Cesium.createWorldTerrainAsync().then(tp => scene.terrainProvider = tp);
+ol3d.setEnabled(true);
+
+window['ol3d'] = ol3d;
+window['scene'] = scene;
+ol3d.pegmanIcon = icon1Feature;
+ol3d.miniMap = miniMap;
+
+ol3d.enableAutoRenderLoop();
+
+
+// Tilt camera
+const camera = scene.camera;
+const pivot = pickBottomPoint(scene);
+if (pivot) {
+ const options = {};
+ const transform = Cesium.Matrix4.fromTranslation(pivot);
+ const axis = camera.right;
+ rotateAroundAxis(camera, -Math.PI / 4, axis, transform, options);
+}
diff --git a/examples/tracking.html b/examples/tracking.html
index b845bee9d..ab5680b49 100644
--- a/examples/tracking.html
+++ b/examples/tracking.html
@@ -10,7 +10,7 @@
-
+
An OpenLayers point moves randomly. It is tracked in 3D.
diff --git a/src/olcs/OLCesium.ts b/src/olcs/OLCesium.ts
index c29cd39df..1864dde5d 100644
--- a/src/olcs/OLCesium.ts
+++ b/src/olcs/OLCesium.ts
@@ -123,6 +123,8 @@ export default class OLCesium {
private needTrackedEntityUpdate_ = false;
private boundingSphereScratch_: BoundingSphere = new Cesium.BoundingSphere();
private synchronizers_: SynchronizerType[];
+ private pegmanIcon: Feature | null = null;
+ private miniMap: Map | null = null;
constructor(options: OLCesiumOptions) {
this.map_ = options.map;
@@ -208,7 +210,7 @@ export default class OLCesium {
this.scene_.camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
- this.camera_ = new olcsCamera(this.scene_, this.map_);
+ this.camera_ = new olcsCamera(this.scene_, this.map_, this.miniMap);
this.globe_ = new Cesium.Globe(Cesium.Ellipsoid.WGS84);
this.globe_.baseColor = Cesium.Color.WHITE;
@@ -317,6 +319,10 @@ export default class OLCesium {
}
}
+ this.pegmanIcon.getGeometry().setCoordinates(this.camera_.getPosition());
+ this.miniMap.getView().setCenter(this.camera_.getPosition());
+ this.miniMap.getView().setZoom(this.map_.getView().getZoom());
+
this.scene_.render(julianDate);
this.camera_.checkCameraChange();