Cesium.js点线面绘制

Cesium.js在三维GIS中十分的流行，点、线、面的绘制也是GIS开发中经常用到的基础操作。最近在Ceisum.js三维开发时，也是遇到了点、线、面的绘制功能开发，正好这里记录分享一下。

效果

核心代码

鼠标坐标获取

注意绘制功能要使用的是三维坐标，最后的点线面要与地形吻合。

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((click)=>{// click.position 二维坐标console.log('左键单击事件：',click.position);console.log('左键单击事件：',click);let ray = viewer.camera.getPickRay(click.position);// cartesian 三维坐标let cartesian = viewer.scene.globe.pick(ray, viewer.scene);points.push(cartesian)},Cesium.ScreenSpaceEventType.LEFT_CLICK);

点绘制

 addPoints(position){let entity = new Cesium.Entity({name: 'test',show: true,position: position,point: {show: true,pixelSize: 10,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,color: Cesium.Color.RED,outlineColor: Cesium.Color.YELLOW,outlineWidth: 3,disableDepthTestDistance: Number.POSITIVE_INFINITY,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)},});window.viewer.entities.add(entity);},

线绘制

drawLine(points){if(points.length>=2){window.viewer.entities.add({name: 'line',polyline: {positions:points,width: 5,material: Cesium.Color.RED,clampToGround: true}})}},

面绘制

 drawPolygon(points){if(points.length>2){window.viewer.entities.add({name: 'polygon',polygon: {hierarchy:points,material: Cesium.Color.GREEN,}})}},

全部代码

<template><div id="cesiumContainer"></div>
</template><script>
import * as Cesium from 'cesium';export default {name: 'HelloWorld',props: {msg: String},setup() {window.CESIUM_BASE_URL = '/cesium/';Cesium.Ion.defaultAccessToken = '你的token';},mounted() {// "cesiumContainer"是需要渲染地图的dom的id.const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain()});viewer.camera.setView({// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州// fromDegrees(lng,lat,height)方法，将经纬度和高程转换为世界坐标destination: Cesium.Cartesian3.fromDegrees(111.6265869140625,35.016500995886005,2000),orientation: {heading : Cesium.Math.toRadians(0.0),pitch : Cesium.Math.toRadians(-75),}})viewer.zoomTo(viewer);let points=[]window.viewer = viewerlet handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((click)=>{// click.position 二维坐标console.log('左键单击事件：',click.position);console.log('左键单击事件：',click);let ray = viewer.camera.getPickRay(click.position);// cartesian 三维坐标let cartesian = viewer.scene.globe.pick(ray, viewer.scene);points.push(cartesian)this.addPoints(cartesian)this.drawLine(points)},Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.setInputAction((click)=>{// click.position 二维坐标// 结束this.closeLine(points)this.drawPolygon(points)},Cesium.ScreenSpaceEventType.RIGHT_CLICK);},methods:{//绘制面drawPolygon(points){if(points.length>=2){window.viewer.entities.add({name: 'polygon',polygon: {hierarchy:points,material: Cesium.Color.GREEN,}})}},addPoints(position){let entity = new Cesium.Entity({name: 'test',show: true,position: position,point: {show: true,pixelSize: 10,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,color: Cesium.Color.RED,outlineColor: Cesium.Color.YELLOW,outlineWidth: 3,disableDepthTestDistance: Number.POSITIVE_INFINITY,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)},});viewer.entities.add(entity);},drawLine(points){if(points.length>=2){window.viewer.entities.add({name: 'line',polyline: {positions:[points[points.length-2],points[points.length-1]],width: 5,material: Cesium.Color.RED,clampToGround: true}})}},closeLine(points){if(points.length>=2){window.viewer.entities.add({name: 'line',polyline: {positions:[points[points.length-1],points[0]],width: 5,material: Cesium.Color.RED,clampToGround: true}})}},}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesiumContainer {width: 100%;height: 100%;
}
</style>

Cesium.js点线面绘制相关推荐

便利贴--9{Cesium+js绘制多个点和多个线的图层，加标题}
便利贴--9{Cesium+js绘制多个点和多个线的图层,加标题} 代码代码附加转类型从openlayers线数据转到DC的Polyline数据 changeData(data, name, va ...
Cesium点线面绘制
Cesium点线面绘制前言效果图关键代码前言 Cesium点线面绘制是很基本的功能,数据采集类型的系统必须具备此功能.但是Cesium并没有提供相关可以直接使用的绘制方法,只能自己进行封装,虽 ...
Cesium.js 三维土壤地质剖面分割挖掘
之前看过很多的三维场景下,在地表处进行挖掘分割,查看地表下的管线走向.土壤成分.地质分层的案例.最近使用Cesium.js实现了一下,在三维场景下,在地表圈画挖掘范围,然后展示剖面.界面的功能效果 ...
cesium 三维坐标系绘制
cesium 三维坐标系绘制 ------ 本文为讲解+源码形式,本文将三维坐标系分解成六部来为大家大接,每一步都有源码和介绍,每行代码都有标注来讲解该步骤一.绘制思路讲解所需要的数据为,开始经纬 ...
使用Cesium.js加载3D模型
最近项目中用到室外三维模型与室内三维地图交互,室外三维模型的加载我们采用了cesium js来实现,在使用的过程中遇到了许多的问题,闲暇之余将其实现及遇到的问题记录下来,以备将来再用到时少走弯路. 一 ...
cesium js 路径_Cesium开发学习路径
Cesium.js是做三维地球建模可视化的前端库,网上的教程很多,官网文档和例子都非常详细,这里只是整理一下学习路径,以备后续不时之需. 一.中文网络资料 Cesium有一定的使用基数,所以搜索ces ...
Cesium.js 地形挖洞
在前面的一篇博文中,介绍了如何[在cesium中如何进行地形的坡面切割](Cesium.js 三维土壤地质剖面分割挖掘_GIS开发者的博客-CSDN博客).这里有点类似,本篇博文中,主要介绍一下,如何 ...
Fabric.js 自由绘制椭圆
theme: smartblue 持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情本文简介点赞 + 关注 + 收藏 = 学会了本文讲解在 Fabric ...
PHP绘制99的棋盘,JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow ...

Cesium.js点线面绘制

效果

核心代码

全部代码

Cesium.js点线面绘制相关推荐

最新文章

热门文章