openlayers · pedroslvieira · Feb 13, 2024
diff --git a/examples/mini-map.html b/examples/mini-map.html
@@ -0,0 +1,17 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="robots" content="index, all" />
+ <title>olcesium vectors example</title>
+ <link rel="stylesheet" href="../node_modules/ol/ol.css" type="text/css"></link>
+ <style>.cesium-credit-textContainer { display: inline-block; font-size: 50%; line-height: 100%;}</style>
+ </head>
+ <body>
+ <div id="map2d" style="width:600px;height:400px;float:left;"></div>
+ <div id="map3d" style="width:600px;height:400px;float:left;position:relative;"></div>
+ <div>************ add description ******************</div>
+ <script src="inject_ol_cesium.js"></script>
+ </body>
+</html>
diff --git a/examples/mini-map.js 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
@@ -10,7 +10,7 @@
  </head>
  <body>
  <div id="map2d" style="width:600px;height:400px;float:left;"></div>
- <!--<div id="map3d" style="width:600px;height:400px;float:left;position:relative;"></div>-->
+ <!-- <div id="map3d" style="width:600px;height:400px;float:left;position:relative;"></div> -->
  <div><input type="button" value="Track" onclick="javascript:toggleTracking()" /></div>
  <div>An OpenLayers point moves randomly. It is tracked in 3D.
  <script src="./inject_ol_cesium.js"></script>

diff --git 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();