125 lines
3.6 KiB
HTML
125 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>缓冲区示例</title>
|
||
|
|
<link href="src/Cesium1.70/Widgets/widgets.css" rel="stylesheet" />
|
||
|
|
<script src="src/Cesium1.70/Cesium.js"></script>
|
||
|
|
<!-- <script src="http://zhangticcc.gitee.io/d3kit/d3kit.js"></script> -->
|
||
|
|
<script src="src/turf.min.js"></script>
|
||
|
|
<script src="src/cesium-graphicBuffer.js"></script>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body,
|
||
|
|
#viewer-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#btn {
|
||
|
|
position: absolute;
|
||
|
|
padding: 5px;
|
||
|
|
top: 5px;
|
||
|
|
left: 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="viewer-container"></div>
|
||
|
|
<div id="btn">
|
||
|
|
<button onclick="point()">创建点缓冲</button>
|
||
|
|
<button onclick="polyline()">创建线缓冲</button>
|
||
|
|
<button onclick="polygon()">创建面缓冲</button>
|
||
|
|
<button onclick="animation()">动画</button>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
let radius = 3, bufferEntity = [];
|
||
|
|
// init
|
||
|
|
function initPage() {
|
||
|
|
// 切换自己的token
|
||
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c';
|
||
|
|
// 初始化
|
||
|
|
let viewer = new Cesium.Viewer("viewer-container", {
|
||
|
|
infoBox: false,
|
||
|
|
shouldAnimate: true,
|
||
|
|
vrButton: true,
|
||
|
|
geocoder: false,
|
||
|
|
homeButton: false,
|
||
|
|
sceneModePicker: false,
|
||
|
|
baseLayerPicker: true,
|
||
|
|
navigationHelpButton: false,
|
||
|
|
animation: false,
|
||
|
|
timeline: false,
|
||
|
|
fullscreenButton: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
window.point = function () {
|
||
|
|
// 绘制点 右键结束
|
||
|
|
Cesium.drawPointGraphics({ viewer: viewer }).then((point) => {
|
||
|
|
// 创建缓冲区范围
|
||
|
|
point = point[0]
|
||
|
|
let turfPositions = turf.point([point.lng, point.lat])
|
||
|
|
bufferEntity.push(Cesium.createGraphicsBuffer({
|
||
|
|
viewer: viewer,
|
||
|
|
animation:true,
|
||
|
|
turfPositions: turfPositions,
|
||
|
|
radius: Number(radius)
|
||
|
|
}))
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
window.polyline = function () {
|
||
|
|
// 绘制线 右键结束
|
||
|
|
Cesium.drawLineGraphics({ viewer: viewer }).then((lines) => {
|
||
|
|
// 创建缓冲区范围
|
||
|
|
let _lines = []
|
||
|
|
lines.forEach((line) => { let point = [line.lng, line.lat]; _lines.push(point) })
|
||
|
|
let turfPositions = turf.lineString(_lines)
|
||
|
|
bufferEntity.push(Cesium.createGraphicsBuffer({
|
||
|
|
viewer: viewer,
|
||
|
|
animation:true,
|
||
|
|
turfPositions: turfPositions,
|
||
|
|
radius: Number(radius)
|
||
|
|
}))
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
window.polygon = function () {
|
||
|
|
// 绘制面 右键结束
|
||
|
|
Cesium.drawPolygonGraphics({ viewer: viewer }).then((polygons) => {
|
||
|
|
// 创建缓冲区范围
|
||
|
|
let _polygons = []
|
||
|
|
polygons.forEach((polygon) => { let point = [polygon.lng, polygon.lat]; _polygons.push(point) })
|
||
|
|
let turfPositions = turf.polygon([_polygons])
|
||
|
|
bufferEntity.push(Cesium.createGraphicsBuffer({
|
||
|
|
viewer: viewer,
|
||
|
|
animation:true,
|
||
|
|
turfPositions: turfPositions,
|
||
|
|
radius: Number(radius)
|
||
|
|
}))
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
window.animation = function () {
|
||
|
|
bufferEntity && bufferEntity.forEach(entity => entity.animation = !entity.animation)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// load
|
||
|
|
window.onload = function () {
|
||
|
|
initPage()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|