cesium测量距离完整代码
时间: 2024-01-30 19:00:30 浏览: 111
使用Cesium测量距离的完整代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Measure Distance using Cesium</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
<style>
@import url(https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css);
#cesiumContainer {
width: 100%;
height: 800px;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = "YOUR_CESIUM_ION_ACCESS_TOKEN";
var viewer = new Cesium.Viewer("cesiumContainer");
// 创建测量工具
var measureHandler = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Distance);
// 监听测量结束事件
measureHandler.measureEvent.addEventListener(function(result) {
console.log("测量结果:", result.distance + " " + result.unit);
});
// 开始测量
measureHandler.activate();
// 清除测量结果
function clearMeasurements() {
measureHandler.clear();
}
// 添加清除按钮
var toolbar = document.getElementById("toolbar");
var clearButton = document.createElement("button");
clearButton.textContent = "清除测量结果";
clearButton.onclick = clearMeasurements;
toolbar.appendChild(clearButton);
</script>
</body>
</html>
```
上述代码使用Cesium库实现测量距离的功能。首先,需要将`<script>`标签中的`YOUR_CESIUM_ION_ACCESS_TOKEN`替换为您的Cesium Ion访问令牌。然后,创建一个Cesium.Viewer实例,并指定在页面上显示地图的div元素的id为"cesiumContainer"。
然后,创建一个Cesium.MeasureHandler实例,将其模式设置为距离测量模式(MeasureMode.Distance)。通过监听`measureEvent`事件,可以获取测量结果,并在控制台中打印出来。
通过调用`measureHandler.activate()`方法,测量工具被激活,用户可以在地图上点击和拖动来测量距离。
最后,通过定义`clearMeasurements`函数和添加一个清除按钮,可以清除测量结果。
请注意,上述代码中需要引入Cesium库和相关样式表。
阅读全文