cesium-绘制点、线、面

介绍

在地图框架中，绘制点线面是最常见的功能，这里我们在cesium中实现它，让其可以在三维地形中贴地

实现效果

点

线

面

完整代码

这里使用vue实现具体功能

<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>绘制功能</el-breadcrumb-item><el-breadcrumb-item>点、线、面</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()">复位</el-button><el-button type="primary" @click="draw('point')">绘制点</el-button><el-button type="primary" @click="draw('polyline')">绘制线</el-button><el-button type="primary" @click="draw('polygon')">绘制面</el-button><el-button type="primary" @click="clearDrawEntities">清空</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}});},/*** 根据类型绘制对象* @param type point、polyline、polygon*/draw(type) {//绘制点let that = this;let viewer = this._viewer;let tempEntities = this.tempEntities;let position = [];let tempPoints = [];// 开启深度检测viewer.scene.globe.depthTestAgainstTerrain = true;let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);switch (type) {case 'point':// 监听鼠标左键handler.setInputAction(function (movement) {// 从相机位置通过windowPosition 世界坐标中的像素创建一条射线。返回Cartesian3射线的位置和方向。let ray = viewer.camera.getPickRay(movement.position);// 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。返回Cartesian3对象position = viewer.scene.globe.pick(ray, viewer.scene);let point = that.drawPoint(position);tempEntities.push(point);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 左键双击停止绘制handler.setInputAction(function () {handler.destroy();//关闭事件句柄handler = null;}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);// 右击单击停止绘制handler.setInputAction(function () {handler.destroy();//关闭事件句柄handler = null;}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);break;case 'polyline'://鼠标移动事件handler.setInputAction(function (movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);//左键点击操作handler.setInputAction(function (click) {//调用获取位置信息的接口let ray = viewer.camera.getPickRay(click.position);position = viewer.scene.globe.pick(ray, viewer.scene);tempPoints.push(position);let tempLength = tempPoints.length;//调用绘制点的接口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 = "请绘制下一个点，右键结束";}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//右键点击操作handler.setInputAction(function (click) {tempPoints = [];handler.destroy();//关闭事件句柄handler = null;}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);break;case 'polygon'://鼠标移动事件handler.setInputAction(function (movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);//左键点击操作handler.setInputAction(function (click) {//调用获取位置信息的接口let ray = viewer.camera.getPickRay(click.position);position = viewer.scene.globe.pick(ray, viewer.scene);tempPoints.push(position);let tempLength = tempPoints.length;//调用绘制点的接口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 = "请绘制下一个点，右键结束";}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//右键点击操作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('请选择3个以上的点再执行闭合操作命令');} else {//闭合最后一条线let pointline = that.drawPolyline([tempPoints[tempPoints.length - 1], tempPoints[0]]);tempEntities.push(pointline);that.drawPolygon(tempPoints);tempEntities.push(tempPoints);handler.destroy();//关闭事件句柄handler = null;}}}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);break;}},drawPoint(position, config) {let viewer = this._viewer;let config_ = config ? config : {};return viewer.entities.add({name: "点几何对象",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: "线几何对象",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: "面几何对象",polygon: {hierarchy: positions,material: config.color ? new Cesium.Color.fromCssColorString(config.color).withAlpha(.2) : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),},});},/*** 清除实体*/clearDrawEntities() {let viewer = this._viewer;this.tempEntities = [];// 清除之前的实体const entitys = viewer.entities._entities._array;let length = entitys.length// 倒叙遍历防止实体减少之后entitys[f]不存在for (let f = length - 1; f >= 0; f--) {if (entitys[f]._name && (entitys[f]._name === '点几何对象' || entitys[f]._name === '线几何对象' || entitys[f]._name === '面几何对象')) {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>

核心代码

这里实现思路是开启cesium的监听事件，左键开始绘制，右键完成绘制，具体监听事件代码如下：

  /*** 根据类型绘制对象* @param type point、polyline、polygon*/draw(type) {//绘制点let that = this;let viewer = this._viewer;let tempEntities = this.tempEntities;let position = [];let tempPoints = [];// 开启深度检测viewer.scene.globe.depthTestAgainstTerrain = true;let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);switch (type) {case 'point':// 监听鼠标左键handler.setInputAction(function (movement) {// 从相机位置通过windowPosition 世界坐标中的像素创建一条射线。返回Cartesian3射线的位置和方向。let ray = viewer.camera.getPickRay(movement.position);// 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。返回Cartesian3对象position = viewer.scene.globe.pick(ray, viewer.scene);let point = that.drawPoint(position);tempEntities.push(point);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 左键双击停止绘制handler.setInputAction(function () {handler.destroy();//关闭事件句柄handler = null;}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);// 右击单击停止绘制handler.setInputAction(function () {handler.destroy();//关闭事件句柄handler = null;}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);break;case 'polyline'://鼠标移动事件handler.setInputAction(function (movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);//左键点击操作handler.setInputAction(function (click) {//调用获取位置信息的接口let ray = viewer.camera.getPickRay(click.position);position = viewer.scene.globe.pick(ray, viewer.scene);tempPoints.push(position);let tempLength = tempPoints.length;//调用绘制点的接口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 = "请绘制下一个点，右键结束";}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//右键点击操作handler.setInputAction(function (click) {tempPoints = [];handler.destroy();//关闭事件句柄handler = null;}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);break;case 'polygon'://鼠标移动事件handler.setInputAction(function (movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);//左键点击操作handler.setInputAction(function (click) {//调用获取位置信息的接口let ray = viewer.camera.getPickRay(click.position);position = viewer.scene.globe.pick(ray, viewer.scene);tempPoints.push(position);let tempLength = tempPoints.length;//调用绘制点的接口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 = "请绘制下一个点，右键结束";}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//右键点击操作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('请选择3个以上的点再执行闭合操作命令');} else {//闭合最后一条线let pointline = that.drawPolyline([tempPoints[tempPoints.length - 1], tempPoints[0]]);tempEntities.push(pointline);that.drawPolygon(tempPoints);tempEntities.push(tempPoints);handler.destroy();//关闭事件句柄handler = null;}}}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);break;}},

绘制点、线、面的代码：

   drawPoint(position, config) {let viewer = this._viewer;let config_ = config ? config : {};return viewer.entities.add({name: "点几何对象",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: "线几何对象",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: "面几何对象",polygon: {hierarchy: positions,material: config.color ? new Cesium.Color.fromCssColorString(config.color).withAlpha(.2) : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),},});},

cesium-绘制点、线、面相关推荐

cesium绘制动态线，多段线
动态线实现传递顶点时,附加每个顶点距线段起点的距离,用此距离来实现线段分段 shader中对传入的距离取模,即可实现分段绘制不通的颜色 PolylineColorAppearance + Fabri ...
cesium画飞线_基于Cesium绘制抛物弧线
Cesium绘制抛物弧线,供大家参考,具体内容如下在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录思路两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p> ...
cesium绘制点、线、面
cesium绘制点.线.面地图地形上点 let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler ...
Cesium绘制抛物线弧线
Cesium绘制抛物线弧线想做一个行人轨迹的动态显示,在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录思路两点连线作为坐标轴,取线段中点画垂线作为y轴,在线上取一点作为开口向下的 ...
cesium绘制网格_cesium 实现经纬线绘制和经纬度标注
今天某客户提出要实现在地球上经纬线显示和经纬度标注,看了官方资料,没有相关api,网上也看了好多帖子,基本都是实现的贴图划线(话说官方本来就有不同等级的贴图网格根本不需要你来画),只有在github ...
cesium绘制中国边界，设置边界样式
cesium绘制中国边界,设置边界样式,步骤如下: 步骤一: 从http://datav.aliyun.com/portal/school/atlas/area_selector网站下载geojson ...
b样条曲面绘制 opengl_3dmax在曲面上如何绘制样条线，都在这里了
Hello,大家好,我是疯狂人生,今天继续为各位小伙伴来分享,在3dmax建模方面的知识内容,希望大家通过本图文的教程,能够更多的掌握3dmax在模型方面的知识内容. 本篇图文教程,讲解在3dmax软 ...
java k线绘制,用Java绘制K线图[Java编程]
赞助商链接本文"用Java绘制K线图[Java编程]"是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具 ...
java编写k线_用Java绘制K线 (转)
---- Java语言中的Applet(Java小程序)和Application(Java应用程序)是在结构和功能上都存在很大差异的两种不同的编程方式.Applet应用于Web页上,可做出多姿多彩的页 ...
python能画k线图吗_,求教使用python绘制K线图
如何用python实现视频关键帧提取并保存为图片 import cv2 vc = cv2.VideoCapture('Test.avi') #读入视频文件 c=1 if vc.isOpened(): ...

cesium-绘制点、线、面

cesium-绘制点、线、面

介绍

实现效果

点

线

面

完整代码

核心代码

cesium-绘制点、线、面相关推荐

最新文章

热门文章