区块链技术博客
www.b2bchain.cn

Cesium 鹰眼的实现求职学习资料

本文介绍了Cesium 鹰眼的实现求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

鹰眼就是一个缩略地图,当主地图改变后,鹰眼随着改变。cesium 鹰眼常见的是结合 openlayers 或者 leaflet 来实现。这里介绍一种直接利 cesium 本身来实现鹰眼效果。

一、鹰眼核心功能实现

“`javascript
import * as Cesium from ‘cesium’

class EyeMap {
constructor (domId) {
// 1、创建球
this.viewer = new Cesium.Viewer(domId, {
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’
// 2、设置鹰眼图中球属性
const control = this.viewer.scene.screenSpaceCameraController
control.enableRotate = false
control.enableTranslate = false
control.enableZoom = false
control.enableTilt = false
control.enableLook = false
}

syncViewer (viewer) {
this.viewer.camera.flyTo({
destination: viewer.camera.position,
orientation: {
heading: viewer.camera.heading,
pitch: viewer.camera.pitch,
roll: viewer.camera.roll

鹰眼就是一个缩略地图,当主地图改变后,鹰眼随着改变。cesium 鹰眼常见的是结合 openlayers 或者 leaflet 来实现。这里介绍一种直接利 cesium 本身来实现鹰眼效果。

一、鹰眼核心功能实现

“`javascript
import * as Cesium from ‘cesium’

class EyeMap {
constructor (domId) {
// 1、创建球
this.viewer = new Cesium.Viewer(domId, {
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’
// 2、设置鹰眼图中球属性
const control = this.viewer.scene.screenSpaceCameraController
control.enableRotate = false
control.enableTranslate = false
control.enableZoom = false
control.enableTilt = false
control.enableLook = false
}

syncViewer (viewer) {
this.viewer.camera.flyTo({
destination: viewer.camera.position,
orientation: {
heading: viewer.camera.heading,
pitch: viewer.camera.pitch,
roll: viewer.camera.roll

鹰眼就是一个缩略地图,当主地图改变后,鹰眼随着改变。cesium 鹰眼常见的是结合 openlayers 或者 leaflet 来实现。这里介绍一种直接利 cesium 本身来实现鹰眼效果。

一、鹰眼核心功能实现

“`javascript
import * as Cesium from ‘cesium’

class EyeMap {
constructor (domId) {
// 1、创建球
this.viewer = new Cesium.Viewer(domId, {
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’
// 2、设置鹰眼图中球属性
const control = this.viewer.scene.screenSpaceCameraController
control.enableRotate = false
control.enableTranslate = false
control.enableZoom = false
control.enableTilt = false
control.enableLook = false
}

syncViewer (viewer) {
this.viewer.camera.flyTo({
destination: viewer.camera.position,
orientation: {
heading: viewer.camera.heading,
pitch: viewer.camera.pitch,
roll: viewer.camera.roll

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Cesium 鹰眼的实现求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们