你可以
使用Cesium的Vue组件来集
成Cesium到Vue 2中。首先，你需要安装
Cesium和Vue
Cesium组件:
1. 安装
Cesium: 可以从官网下载或
使用npm安装。
```
npm install
cesium --save
```
2. 安装Vue
Cesium:
```
npm install vue-
cesium --save
```
3. 在Vue组件中
使用Cesium:
a. 引用
Cesium和Vue
Cesium：
```javascript
import * as
Cesium from "
cesium";
import Vue
Cesium from "vue-
cesium";
```
b. 注册Vue
Cesium：
```javascript
Vue.use(Vue
Cesium, {
// 版本号，对应
Cesium.js的版本号
cesiumPath: '/static/
Cesium/
Cesium.js',
// 在启动Vue
Cesium的时候自动注入
Cesium对象
// 如果不注入，需要通过this.$
Cesium调用
// 如果单独在组件中
使用
// this.$
Cesium ===
Cesium
// 如果在Vue mixin中
使用
// Vue.prototype.$
Cesium ===
Cesium
// 如果在常规JavaScript文件或者函数中
使用
// import
Cesium from '
cesium/
Cesium'
});
```
c. 在Vue组件中
使用Cesium：
```vue
<template>
<div>
<!-- 根据组件的命名规则，直接在组件中
使用cesium视图，并增加
cesium属性，支持覆盖默认的配置 -->
<
cesium-viewer ref="
cesiumViewer" :
cesium-prop="
cesiumOptions"></
cesium-viewer>
</div>
</template>
<script>
export default {
name: '
cesium-demo',
data() {
return {
cesiumOptions: {
///... One of the
cesium viewer options
}
};
},
mounted() {
// Accessing
cesium viewer instance
console.log(this.$refs.
cesiumViewer.
cesium.viewer);
},
methods: {
// 方法可以直接在组件中定义并调用
}
};
</script>
<style scoped>
</style>
```
d. 自己手动
绘制点线面功能：
```vue
<template>
<div>
<
cesium-viewer ref="
cesiumViewer" @connected="createEntities()" style="height: 100%; width: 100%" :
cesium-prop="
cesiumOptions"></
cesium-viewer>
</div>
</template>
<script>
import * as
Cesium from "
cesium";
export default {
name: "
cesium-demo",
data() {
return {
cesiumOptions: {
terrainProviderViewModels: [],
terrainProvider: new
Cesium.EllipsoidTerrainProvider(),
mapProjection: new
Cesium.WebMercatorProjection(),
baseLayerPicker: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
},
viewer: null,
clickHandler: null,
drawingHandler: null,
measurementLabel: "",
measurement
Entity: null,
drawingPolyline: null,
drawingPolygon: null,
};
},
methods: {
createEntities() {
this.viewer = this.$refs.
cesiumViewer.
cesium.viewer;
this.clickHandler = new
Cesium.ScreenSpaceEventHandler(this.viewer.scene.
canvas);
this.createDrawingHandler();
},
createDrawingHandler() {
this.drawingHandler = new
Cesium.ScreenSpaceEventHandler(this.viewer.scene.
canvas);
let positions = [];
let drawingMode = null;
let label = null;
const finishDrawing = function () {
let
entity = null;
if (drawingMode === "POLYLINE") {
entity = this.viewer.entities.add({
polyline: {
positions: positions,
width: 3,
material:
Cesium.Color.BLUE,
},
});
} else if (drawingMode === "POLYGON") {
entity = this.viewer.entities.add({
polygon: {
hierarchy: positions,
height: 0,
material:
Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
outlineColor:
Cesium.Color.BLACK,
},
});
}
if (
entity) {
entity.description =
'<div class="
cesium-info-box"><p>' + this.measurementLabel + "</p></div>";
if (this.measurement
Entity) {
this.viewer.entities.remove(this.measurement
Entity);
}
this.measurement
Entity =
entity;
}
this.clearDrawing();
}.bind(this);
const clearDrawing = function () {
drawingMode = null;
if (this.measurement
Entity) {
this.viewer.entities.remove(this.measurement
Entity);
this.measurement
Entity = null;
}
if (label) {
label.show = false;
label = null;
this.measurementLabel = "";
}
if (this.drawingPolyline) {
this.viewer.entities.remove(this.drawingPolyline);
this.drawingPolyline = null;
}
if (this.drawingPolygon) {
this.viewer.entities.remove(this.drawingPolygon);
this.drawingPolygon = null;
}
positions = [];
}.bind(this);
this.clickHandler.setInputAction((click) => {
const position = this.viewer.scene.pickPosition(click.position);
if (
Cesium.defined(position) && drawingMode) {
positions.push(position);
if (drawingMode === "POLYLINE") {
if (this.drawingPolyline) {
this.viewer.entities.remove(this.drawingPolyline);
}
this.drawingPolyline = this.viewer.entities.add({
polyline: {
positions: positions,
width: 3,
material:
Cesium.Color.BLUE,
},
});
}
if (drawingMode === "POLYGON") {
if (positions.length === 2) {
if (this.drawingPolygon) {
this.viewer.entities.remove(this.drawingPolygon);
}
this.drawingPolygon = this.viewer.entities.add({
polygon: {
hierarchy: new
Cesium.CallbackProperty(() => {
if (this.viewer.scene.mode !==
Cesium.SceneMode.MORPHING) {
return new
Cesium.PolygonHierarchy(positions);
}
}, false),
material:
Cesium.Color.BLUE.withAlpha(0.5),
height: 0,
outline: true,
outlineColor:
Cesium.Color.WHITE,
},
});
} else if (positions.length > 2) {
this.viewer.entities.remove(this.drawingPolygon);
this.drawingPolygon = this.viewer.entities.add({
polygon: {
hierarchy: new
Cesium.CallbackProperty(() => {
if (this.viewer.scene.mode !==
Cesium.SceneMode.MORPHING) {
return new
Cesium.PolygonHierarchy(positions);
}
}, false),
material:
Cesium.Color.BLUE.withAlpha(0.5),
height: 0,
outline: true,
outlineColor:
Cesium.Color.WHITE,
},
});
}
}
}
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.clickHandler.setInputAction(() => {
this.viewer.scene.screenSpaceCameraController.enableLook = false;
},
Cesium.ScreenSpaceEventType.RIGHT_DOWN);
this.clickHandler.setInputAction(() => {
this.viewer.scene.screenSpaceCameraController.enableLook = true;
},
Cesium.ScreenSpaceEventType.RIGHT_UP);
this.drawingHandler.setInputAction(() => {
finishDrawing();
},
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
document.onkeyup = (arg) => {
if (arg.keyCode == 27) {
clearDrawing();
this.drawingHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.drawingHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}
};
// Set up drawing toolbar
const drawingToolbar = document.getElementById("drawingToolbar");
document.getElementById("polylineButton").addEventListener(
"click",
function () {
clearDrawing();
drawingMode = "POLYLINE";
this.measurementLabel = "Distance";
this.addToolbarLabel("Click to start drawing a line.");
}.bind(this)
);
document.getElementById("polygonButton").addEventListener(
"click",
function () {
clearDrawing();
drawingMode = "POLYGON";
this.measurementLabel = "Area";
this.addToolbarLabel("Click to start drawing a polygon.");
}.bind(this)
);
document.getElementById("clearButton").addEventListener(
"click",
function () {
clearDrawing();
this.drawingHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.drawingHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}.bind(this)
);
},
addToolbarLabel: function (text) {
const toolbarLabel = document.getElementById("drawingToolbarLabel");
toolbarLabel.innerHTML = text;
if (label) {
label.show = false;
label = null;
}
label = this.viewer.entities.add({
position:
Cesium.Cartesian3.fromArray(positions),
label: {
text: text,
font: "16px sans-serif",
pixelOffset: new
Cesium.Cartesian2(0.0, 20),
showBackground: true,
backgroundColor: new
Cesium.Color.fromCssColorString("#333333").withAlpha(0.7),
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
},
},
beforeDestroy() {
this.viewer = this.$refs.
cesiumViewer.
cesium.viewer;
this.clickHandler.destroy();
this.drawingHandler.destroy();
},
};
</script>
<style scoped>
#drawingToolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 10px;
height: 50px;
background: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid gray;
z-index: 9999;
display: flex;
justify-content: space-between;
align-items: center;
}
#clearButton {
margin-left: auto;
}
.
cesium-info-box p {
margin: 0;
color: white;
}
</style>
```
以上代码提供了简单的
使用Cesium在Vue 2中手动
绘制点线面功能。
扫一扫
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
