I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

preface

Cesium does not provide us with such a GIS related function as hawk-eye map like the TWO-DIMENSIONAL map API system, but it is often required to add hawk-eye map in business scenes. Because Cesium is a THREE-DIMENSIONAL sphere, its hawk-eye map mainly has two directions: Main view THREE-DIMENSIONAL sphere Hawk-eye diagram Both the two-dimensional plane and the hawk-eye diagram in the main view are spheres. The first direction has been realized through leaflet on the Internet (guidance: OverviewMapForCesium), this article mainly to achieve the second direction, double sphere eagle eye implementation.

Implementation effect

Train of thought

First, since there are two spheres, the main view and hawk-eye diagram should define two viewers to generate two spheres, and set all the additional functionality components of the Hawk-eye diagram to false, leaving only the cleanest spheres.

Then we need to turn off all camera controls for the sphere and sync to the sphere in the Hawk-eye diagram only through the operation of the sphere in the main view.

Finally, place the sphere into the DOM and display it under the main view.

implementation

We directly package the hawk-eye function into a class, plug and play. First we define the exposed method AddEyeMap, which takes two parameters, the first is the ID of the DOM to be inserted into the Hawk-eye graph, and the second is the Viewer of the main view, which facilitates synchronization.

Call Cesium.AddEyeMap("eyeContainer", Viewer)Copy the code
Export default function AddEyeMap(domId, viewer) {if (! domId) return const dom = document.getElementById(domId) dom.classList.add('eye-map-style') if (! Dom) {throw new Error(' ${domId} does not exist! `)} / /... }Copy the code
.eye-map-style {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px solid blue;
  z-index: 99999;
}
Copy the code

In the AddEyeMap method, we need to generate our Hawk-eye map sphere and configure it:

class EyeMap {
  constructor(id) {
    this.viewer = new Cesium.Viewer(id, {
      animation: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      infoBox: false,
      navigationInstructionsInitiallyVisible: false,
    })
    this.viewer._cesiumWidget._creditContainer.style.display = 'none'
​
    const control = this.viewer.scene.screenSpaceCameraController
    control.enableRotate = false
    control.enableTranslate = false
    control.enableZoom = false
    control.enableTilt = false
    control.enableLook = false
  }
}
Copy the code

The EyeMap class implements the second step in our thinking, and then we need to give the class a method to synchronize the perspective, using the Viewer passed from the main view to set the camera Angle in the hawk-eye diagram:

EyeMap.prototype._sync = function(viewer){ this.viewer.camera.flyTo({ destination: viewer.camera.position, orientation: {heading: viet.camera. Heading, pitch: viet.camera. Pitch, roll: viet.camera. Roll,}, duration: 0.0,})}Copy the code

Next we create a new eagle eyeball instance in AddEyeMap and use CallbackProperty to synchronize with the main view at all times:

Export default function AddEyeMap(id, viewer) {//...... Const eyeMap = new eyeMap (id)/viewer/synchronization. Entities. Add ({position: Cesium. Cartesian3. FromDegrees (0, 0), label: {text: new Cesium.CallbackProperty(() => { eyeMap._sync(viewer) return '' }, true), }, }) }Copy the code

In the above code, we add an empty string label and use its CallbackProperty to call the syncViewer method every second to synchronize the camera views of the two balls.

The last

This paper implements the basic two-ball hawk-eye graph, only provides an implementation idea, the subsequent function can be extended on this basis. Also welcome Cesium and GIS related partners to put forward relevant suggestions, learn together ~

Related articles

  • Cesium | using Property mechanism for trajectory playback
  • Cesium | Camera class is introduced and the simple implementation of the business scenario

\