前言
缺少前置学习使用资料，请自行查阅：[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.csdn.net/weixin_44402694/article/details/123110136)
以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.csdn.net/download/weixin_44402694/82180350](https://download.csdn.net/download/weixin_44402694/82180350)。
自定义按钮操作视角上下左右移动，覆盖罗盘本身的上下左右的视角移动。
一、自定义按钮操作视角上下左右移动
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>手动设置上下左右东西南北平移视角title>
<link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<script type="text/javascript" src="./public/Build/Cesium/Cesium.js">script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#cesium-container {
width: 100%;
height: 100%;
}
.wrap {
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
.east, .north, .west, .south {
padding: 10px;
background-color: #fff;
cursor: pointer;
}
style>
head>
<body>
<div class="wrap">
<div class="east">eastdiv>
<div class="north">northdiv>
<div class="west">westdiv>
<div class="south">southdiv>
div>
<div id="cesium-container" />
<script>
let viewer
window.onload = function () {
viewer = new Cesium.Viewer('cesium-container', {
navigation: false
})
const east = document.querySelector('.east')
const north = document.querySelector('.north')
const south = document.querySelector('.south')
const west = document.querySelector('.west')
const moveRate = 100000
east.onclick = function () {
viewer.camera.moveRight(moveRate)
}
north.onclick = function () {
viewer.camera.moveUp(moveRate)
}
south.onclick = function () {
viewer.camera.moveDown(moveRate)
}
west.onclick = function () {
viewer.camera.moveLeft(moveRate)
}
}
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
二、存在问题，请忽略 - 覆盖罗盘本身的上下左右的视角移动
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>修改右上角罗盘上下左右东西南北的移动title>
<link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<script type="text/javascript" src="./public/Build/Cesium/Cesium.js">script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#cesium-container {
width: 100%;
height: 100%;
}
style>
head>
<body>
<div id="cesium-container" />
<script>
let viewer
window.onload = function () {
viewer = new Cesium.Viewer('cesium-container', {
navigation: true
})
const e = document.querySelector('.arrows_e_active')
const n = document.querySelector('.arrows_n_active')
const s = document.querySelector('.arrows_s_active')
const w = document.querySelector('.arrows_w_active')
const moveRate = 1000000
e.onclick = function () {
viewer.camera.moveRight(moveRate)
}
n.onclick = function () {
viewer.camera.moveUp(moveRate)
}
s.onclick = function () {
viewer.camera.moveDown(moveRate)
}
w.onclick = function () {
viewer.camera.moveLeft(moveRate)
}
}
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61