当前位置：网站首页>Cesium draw points, lines, and faces
Cesium draw points, lines, and faces
2022-07-06 08:46:00 【Sun batian】
cesium- Draw points 、 Line 、 Noodles
Introduce
In the map frame , Drawing points, lines and surfaces is the most common function , Here we are cesium To achieve it , Make it stick to the ground in 3D terrain
Realization effect
spot
Line
Noodles
Complete code
Use here vue Realize specific functions
<template>
<div class="home">
<el-row type="flex" :gutter="20">
<el-col :span="24">
<div class="grid-content bg-purple">
<el-breadcrumb separator="/">
<el-breadcrumb-item>cesium</el-breadcrumb-item>
<el-breadcrumb-item> Drawing function </el-breadcrumb-item>
<el-breadcrumb-item> spot 、 Line 、 Noodles </el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-col>
</el-row>
<el-row type="flex" :gutter="20">
<el-col :span="24">
<div class="grid-content bg-purple">
<cesiumComponent id="cesium" ref="refCesium"/>
</div>
</el-col>
</el-row>
<el-row type="flex" :gutter="20">
<el-col :span="24">
<div class="grid-content bg-purple">
<el-button type="primary" @click="addDem()"> Reset </el-button>
<el-button type="primary" @click="draw('point')"> Draw points </el-button>
<el-button type="primary" @click="draw('polyline')"> Draw the line </el-button>
<el-button type="primary" @click="draw('polygon')"> Draw face </el-button>
<el-button type="primary" @click="clearDrawEntities"> Empty </el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import cesiumComponent from '../cesium.vue'
export default {
name: "draw",
data() {
return {
_viewer: undefined,
tempEntities: [],
};
},
components: {
cesiumComponent
},
mounted() {
this.init();
},
methods: {
init() {
this.$refs.refCesium.initMap();
this._viewer = this.$refs.refCesium._viewer;
this.addDem();
},
addDem() {
let that = this;
that._viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
url: '../dem/ASTGTM_N29E087D'
});
that._viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(87.42919921875, 28.700224692776988, 67863.0),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-45.0),
roll: 0.0
}
});
},
/**
* Draw objects according to type
* @param type point、polyline、polygon
*/
draw(type) {
// Draw points
let that = this;
let viewer = this._viewer;
let tempEntities = this.tempEntities;
let position = [];
let tempPoints = [];
// Open depth detection
viewer.scene.globe.depthTestAgainstTerrain = true;
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
switch (type) {
case 'point':
// Monitor the left mouse button
handler.setInputAction(function (movement) {
// From the camera position through windowPosition Pixels in world coordinates create a ray . return Cartesian3 Position and direction of rays .
let ray = viewer.camera.getPickRay(movement.position);
// Find the intersection between the ray and the rendered earth surface . Rays must be given in world coordinates . return Cartesian3 object
position = viewer.scene.globe.pick(ray, viewer.scene);
let point = that.drawPoint(position);
tempEntities.push(point);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// Double left click to stop drawing
handler.setInputAction(function () {
handler.destroy();// Close event handle
handler = null;
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// Right click to stop drawing
handler.setInputAction(function () {
handler.destroy();// Close event handle
handler = null;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
break;
case 'polyline':
// Mouse movement events
handler.setInputAction(function (movement) {
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Left click operation
handler.setInputAction(function (click) {
// Call the interface for obtaining location information
let ray = viewer.camera.getPickRay(click.position);
position = viewer.scene.globe.pick(ray, viewer.scene);
tempPoints.push(position);
let tempLength = tempPoints.length;
// Call the interface for drawing points
let point = that.drawPoint(tempPoints[tempPoints.length - 1]);
tempEntities.push(point);
if (tempLength > 1) {
let pointline = that.drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]]);
tempEntities.push(pointline);
} else {
// tooltip.innerHTML = " Please draw the next point , Right click to end ";
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// Right click operation
handler.setInputAction(function (click) {
tempPoints = [];
handler.destroy();// Close event handle
handler = null;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
break;
case 'polygon':
// Mouse movement events
handler.setInputAction(function (movement) {
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Left click operation
handler.setInputAction(function (click) {
// Call the interface for obtaining location information
let ray = viewer.camera.getPickRay(click.position);
position = viewer.scene.globe.pick(ray, viewer.scene);
tempPoints.push(position);
let tempLength = tempPoints.length;
// Call the interface for drawing points
let point = that.drawPoint(position);
tempEntities.push(point);
if (tempLength > 1) {
let pointline = that.drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]]);
tempEntities.push(pointline);
} else {
// tooltip.innerHTML = " Please draw the next point , Right click to end ";
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// Right click operation
handler.setInputAction(function (click) {
let cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
if (cartesian) {
let tempLength = tempPoints.length;
if (tempLength < 3) {
alert(' Please select 3 Execute the closing operation command after more than one point ');
} else {
// Close last line
let pointline = that.drawPolyline([tempPoints[tempPoints.length - 1], tempPoints[0]]);
tempEntities.push(pointline);
that.drawPolygon(tempPoints);
tempEntities.push(tempPoints);
handler.destroy();// Close event handle
handler = null;
}
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
break;
}
},
drawPoint(position, config) {
let viewer = this._viewer;
let config_ = config ? config : {};
return viewer.entities.add({
name: " Point geometry objects ",
position: position,
point: {
color: Cesium.Color.SKYBLUE,
pixelSize: 10,
outlineColor: Cesium.Color.YELLOW,
outlineWidth: 3,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
}
});
},
drawPolyline(positions, config_) {
let viewer = this._viewer;
if (positions.length < 1) return;
let config = config_ ? config_ : {};
return viewer.entities.add({
name: " Line geometry objects ",
polyline: {
positions: positions,
width: config.width ? config.width : 5.0,
material: new Cesium.PolylineGlowMaterialProperty({
color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
}),
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
}),
clampToGround: true,
}
});
},
drawPolygon(positions, config_) {
let viewer = this._viewer;
if (positions.length < 2) return;
let config = config_ ? config_ : {};
return viewer.entities.add({
name: " Face geometry objects ",
polygon: {
hierarchy: positions,
material: config.color ? new Cesium.Color.fromCssColorString(config.color).withAlpha(.2) : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
},
});
},
/**
* Clear entities
*/
clearDrawEntities() {
let viewer = this._viewer;
this.tempEntities = [];
// Clear previous entities
const entitys = viewer.entities._entities._array;
let length = entitys.length
// Flashback traversal prevents entities from decreasing after entitys[f] non-existent
for (let f = length - 1; f >= 0; f--) {
if (entitys[f]._name && (entitys[f]._name === ' Point geometry objects ' || entitys[f]._name === ' Line geometry objects ' || entitys[f]._name === ' Face geometry objects ')) {
viewer.entities.remove(entitys[f]);
}
}
},
},
created() {
},
}
</script>
<style scoped>
.home {
height: 100%;
margin: 0;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
.el-breadcrumb {
margin: 10px;
font-size: 15px;
}
#cesium {
max-height: 600px;
}
</style>
Core code
The realization idea here is to open cesium The monitoring event of , Left click to start drawing , Right click to finish drawing , The specific listening event code is as follows ：
/** * Draw objects according to type * @param type point、polyline、polygon */
draw(type) {
// Draw points
let that = this;
let viewer = this._viewer;
let tempEntities = this.tempEntities;
let position = [];
let tempPoints = [];
// Open depth detection
viewer.scene.globe.depthTestAgainstTerrain = true;
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
switch (type) {
case 'point':
// Monitor the left mouse button
handler.setInputAction(function (movement) {
// From the camera position through windowPosition Pixels in world coordinates create a ray . return Cartesian3 Position and direction of rays .
let ray = viewer.camera.getPickRay(movement.position);
// Find the intersection between the ray and the rendered earth surface . Rays must be given in world coordinates . return Cartesian3 object
position = viewer.scene.globe.pick(ray, viewer.scene);
let point = that.drawPoint(position);
tempEntities.push(point);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// Double left click to stop drawing
handler.setInputAction(function () {
handler.destroy();// Close event handle
handler = null;
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// Right click to stop drawing
handler.setInputAction(function () {
handler.destroy();// Close event handle
handler = null;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
break;
case 'polyline':
// Mouse movement events
handler.setInputAction(function (movement) {
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Left click operation
handler.setInputAction(function (click) {
// Call the interface for obtaining location information
let ray = viewer.camera.getPickRay(click.position);
position = viewer.scene.globe.pick(ray, viewer.scene);
tempPoints.push(position);
let tempLength = tempPoints.length;
// Call the interface for drawing points
let point = that.drawPoint(tempPoints[tempPoints.length - 1]);
tempEntities.push(point);
if (tempLength > 1) {
let pointline = that.drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]]);
tempEntities.push(pointline);
} else {
// tooltip.innerHTML = " Please draw the next point , Right click to end ";
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// Right click operation
handler.setInputAction(function (click) {
tempPoints = [];
handler.destroy();// Close event handle
handler = null;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
break;
case 'polygon':
// Mouse movement events
handler.setInputAction(function (movement) {
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Left click operation
handler.setInputAction(function (click) {
// Call the interface for obtaining location information
let ray = viewer.camera.getPickRay(click.position);
position = viewer.scene.globe.pick(ray, viewer.scene);
tempPoints.push(position);
let tempLength = tempPoints.length;
// Call the interface for drawing points
let point = that.drawPoint(position);
tempEntities.push(point);
if (tempLength > 1) {
let pointline = that.drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]]);
tempEntities.push(pointline);
} else {
// tooltip.innerHTML = " Please draw the next point , Right click to end ";
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// Right click operation
handler.setInputAction(function (click) {
let cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
if (cartesian) {
let tempLength = tempPoints.length;
if (tempLength < 3) {
alert(' Please select 3 Execute the closing operation command after more than one point ');
} else {
// Close last line
let pointline = that.drawPolyline([tempPoints[tempPoints.length - 1], tempPoints[0]]);
tempEntities.push(pointline);
that.drawPolygon(tempPoints);
tempEntities.push(tempPoints);
handler.destroy();// Close event handle
handler = null;
}
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
break;
}
},
Draw points 、 Line 、 Face code ：
drawPoint(position, config) {
let viewer = this._viewer;
let config_ = config ? config : {
};
return viewer.entities.add({
name: " Point geometry objects ",
position: position,
point: {
color: Cesium.Color.SKYBLUE,
pixelSize: 10,
outlineColor: Cesium.Color.YELLOW,
outlineWidth: 3,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
}
});
},
drawPolyline(positions, config_) {
let viewer = this._viewer;
if (positions.length < 1) return;
let config = config_ ? config_ : {
};
return viewer.entities.add({
name: " Line geometry objects ",
polyline: {
positions: positions,
width: config.width ? config.width : 5.0,
material: new Cesium.PolylineGlowMaterialProperty({
color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
}),
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
}),
clampToGround: true,
}
});
},
drawPolygon(positions, config_) {
let viewer = this._viewer;
if (positions.length < 2) return;
let config = config_ ? config_ : {
};
return viewer.entities.add({
name: " Face geometry objects ",
polygon: {
hierarchy: positions,
material: config.color ? new Cesium.Color.fromCssColorString(config.color).withAlpha(.2) : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
},
});
},
边栏推荐
- Generator parameters incoming parameters
- What is the role of automated testing frameworks? Shanghai professional third-party software testing company Amway
- ESP8266-RTOS物联网开发
- Marathon envs project environment configuration (strengthen learning and imitate reference actions)
- pytorch训练好的模型在加载和保存过程中的问题
- 游戏解包的危害及资源加密的重要性
- The mysqlbinlog command uses
- R language uses the principal function of psych package to perform principal component analysis on the specified data set. PCA performs data dimensionality reduction (input as correlation matrix), cus
- LeetCode：387. 字符串中的第一个唯一字符
- LeetCode：221. 最大正方形
猜你喜欢
Swagger setting field required is mandatory
Image,cv2读取图片的numpy数组的转换和尺寸resize变化
Deep anatomy of C language -- C language keywords
深度剖析C语言数据在内存中的存储
ROS compilation calls the third-party dynamic library (xxx.so)
目标检测——Pytorch 利用mobilenet系列（v1,v2,v3）搭建yolov4目标检测平台
Restful API design specification
After PCD is converted to ply, it cannot be opened in meshlab, prompting error details: ignored EOF
MySQL learning record 11jdbcstatement object, SQL injection problem and Preparedstatement object
View computer devices in LAN
随机推荐
MySQL learning records 12jdbc operation transactions
[NVIDIA development board] FAQ (updated from time to time)
TP-LINK enterprise router PPTP configuration
JVM 快速入门
How to conduct interface test? What are the precautions? Nanny level interpretation
Introduction to the differences between compiler options of GCC dynamic library FPIC and FPIC
如何有效地进行自动化测试?
Research Report on Market Research and investment strategy of microcrystalline graphite materials in China (2022 Edition)
pcd转ply后在meshlab无法打开，提示 Error details: Unespected eof
Light of domestic games destroyed by cracking
电脑F1-F12用途
Excellent software testers have these abilities
堆排序详解
Purpose of computer F1-F12
C語言雙指針——經典題型
LeetCode：498. 对角线遍历
Guangzhou will promote the construction of a child friendly city, and will explore the establishment of a safe area 200 meters around the school
sublime text的编写程序时的Tab和空格缩进问题
LeetCode：236. 二叉树的最近公共祖先
Rviz仿真时遇到机器人瞬间回到世界坐标原点的问题及可能原因