用cesium实现绘制标尺

需求：根据钻孔高度显示标尺，标尺位置与钻孔保持平行且位于钻孔右侧
效果图：
在这里插入图片描述

实现思路：第一步：根据钻孔最底点坐标，根据高度，通过cesuim实体绘制，循环绘制横着的刻度，（高度每增加n绘制一条），标注以每五个刻度
上代码：在这里插入代码片

creteScaleLin(centerPoint, height) {centerPoint.z = parseInt(centerPoint.z)height+=1let ets = []if (height < 100) {for (let num = 0; num < height; num++) {const realNum = num + centerPoint.zconst fg10 = realNum % 10 == 0const fg5 = realNum % 5 == 0const width = fg10 ? 30 : fg5 ? 25 : 16ets.push(new Cesium.Entity({position: Cesium.Cartesian3.fromDegrees(centerPoint.x, centerPoint.y, centerPoint.z + num),billboard: { //图标image: bl,width: width,height: 2,pixelOffset: new Cesium.Cartesian2(width / 2 + 50 , 0),   //偏移量// disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain},label: {show: fg10,text: realNum.toString(),font: "18px Microsoft YaHei UI",// backgroundColor:new Color(0.165, 0.165, 0.165, 0.8),fillColor:Cesium.Color.BLACK,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineColor: Cesium.Color.WHITE,outlineWidth : 3,pixelOffset: new Cesium.Cartesian2(width + 70, 0),   //偏移量}}))}} else if (height <= 1000) {for (let num = 0; num <= height; num++) {const realNum = num + centerPoint.zif (realNum % 10 !== 0) continueconst fg = realNum % 50 == 0// const fg5 = num % 5 == 0const width = fg ? 30 : 16ets.push(new Cesium.Entity({position: Cesium.Cartesian3.fromDegrees(centerPoint.x, centerPoint.y, centerPoint.z + num),billboard: { //图标image: bl,width: width,height: 2,pixelOffset: new Cesium.Cartesian2(width / 2 + 50, 0),   //偏移量// disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain},label: {show: fg,text: realNum.toString(),font: "18px Microsoft YaHei UI",fillColor:Cesium.Color.BLACK,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineColor: Cesium.Color.WHITE,outlineWidth : 3,pixelOffset: new Cesium.Cartesian2(width + 80, 0),   //偏移量}}))}} else if (height <= 10000) {for (let num = 0; num <= height; num ++) {const realNum = num + centerPoint.zif (realNum % 100 !== 0) continueconst fg = realNum % 500 == 0// const fg5 = num % 5 == 0const width = fg ? 30 : 16ets.push(new Cesium.Entity({position: Cesium.Cartesian3.fromDegrees(centerPoint.x, centerPoint.y, centerPoint.z + num),billboard: { //图标image: bl,width: width,height: 2,pixelOffset: new Cesium.Cartesian2(width / 2 + 50, 0),   //偏移量// disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain},label: {show: fg,text: realNum.toString(),font: "18px Microsoft YaHei UI",fillColor:Cesium.Color.BLACK,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineColor: Cesium.Color.WHITE,outlineWidth : 3,pixelOffset: new Cesium.Cartesian2(width + 80, 0),   //偏移量}}))}} else {for (let num = 0; num <= height; num ++) {const realNum = num + centerPoint.zif (realNum % 1000 !== 0) continueconst fg = realNum % 5000 == 0// const fg5 = num % 5 == 0const width = fg ? 30 : 16ets.push(new Cesium.Entity({position: Cesium.Cartesian3.fromDegrees(centerPoint.x, centerPoint.y, centerPoint.z + num),billboard: { //图标image: bl,width: width,height: 2,pixelOffset: new Cesium.Cartesian2(width / 2 + 50, 0),   //偏移量// disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain},label: {show: fg,text: realNum.toString(),font: "18px Microsoft YaHei UI",fillColor:Cesium.Color.BLACK,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineColor: Cesium.Color.WHITE,outlineWidth : 3,pixelOffset: new Cesium.Cartesian2(width + 80, 0),   //偏移量}}))}}return ets}

这里为了兼容各种长度的钻孔，完善绘制效果，根据不同长度段的钻孔绘制不同刻度的标尺。

第二步，把绘制的刻度和标注加到实体

for (let i = 0; i < scaleLine.length; i++) {viewer.entities.add(scaleLine[i])this.entities.push(scaleLine[i])}

第三步，把这些都写在工厂函数中

constructor(viewer, centerPoint, height) {this.viewer = viewerthis.entities = []// let baseLine = this.creteBaseLine(centerPoint, height)let scaleLine = this.creteScaleLin(centerPoint, height)let closeBtn = this.creatCloseBtn(centerPoint)for (let i = 0; i < scaleLine.length; i++) {viewer.entities.add(scaleLine[i])this.entities.push(scaleLine[i])}// viewer.entities.add(baseLine)// this.entities.push(baseLine)viewer.entities.add(closeBtn)this.entities.push(closeBtn)this.closeClick()}

用cesium实现绘制标尺相关推荐

便利贴--9{Cesium+js绘制多个点和多个线的图层，加标题}
便利贴--9{Cesium+js绘制多个点和多个线的图层,加标题} 代码代码附加转类型从openlayers线数据转到DC的Polyline数据 changeData(data, name, va ...
Cesium中绘制矩形，根据四角/对角坐标绘制矩形
Cesium中绘制矩形,根据四角/对角坐标绘制矩形 import store from '@/store/index' import * as Cesium from 'cesium'export d ...
cesium动态绘制圆，矩形，自定义区域
cesium动态绘制圆,矩形,自定义区域自己封装了一个类,可以放在js文件中引入项目,具体使用和代码如下 class Draw {constructor(viewer, config) {/**ce ...
Cesium点线面绘制
Cesium点线面绘制前言效果图关键代码前言 Cesium点线面绘制是很基本的功能,数据采集类型的系统必须具备此功能.但是Cesium并没有提供相关可以直接使用的绘制方法,只能自己进行封装,虽 ...
【超图+CESIUM】【基础API使用示例】22、超图｜CESIUM - 标绘面：Cesium.DrawHandler绘制面Cesium.DrawMode.Polygon
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
canvas绘制标尺
canvas绘制标尺 eg:[预览链接](https://jsfiddle.net/jaris/gz06j95p/) 发布时间: 2019-02-19 16:38:39 /*** canvas 绘制标 ...
Cesium开发-绘制墙体
Cesium中绘制图形有两种方式,一可以通过entity自定义图形也可以使用primitives的方式绘制图形,以下是两个示例的代码总结: <!DOCTYPE html> <html ...
cesium 经纬度绘制点_cesium结合geoserver利用WFS服务实现图层新增(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
cesium 经纬度绘制点_Cesium经纬度与坐标的问题
##数据预处理 1. 源数据坐标系通常为二维平面坐标系,通过设置投影坐标(通常为高斯克吕格投影,按实际位置选择正确分带)使其可进行后续操作. 2. 投影坐标是实际位置在平面上投影后的坐标,获得其正确位 ...

用cesium实现绘制标尺

用cesium实现绘制标尺相关推荐

最新文章

热门文章