已被阅读 415 次 | 文章分类:cesium | 2024-08-21 00:02
本文整合cesium中常用的方法,封装起来可以直接使用
1 方法目录
中文名 | 函数名 |
---|---|
设置相机位置姿态 | setCameraPosition |
获取相机当前位置 | getCameraPosition |
获取两点直线距离 | getDistance |
获取两点测地距离。 | getGeodesicDistance |
WGS84坐标转笛卡尔坐标 | WGS84_to_Cartesian3 |
笛卡尔坐标转WGS84坐标 | Cartesian3_to_WGS84 |
WGS84坐标转屏幕坐标 | WGS84_to_WindowCoordinates |
弧度转度 | rad2deg |
度转弧度 | deg2rad |
从一串经纬度坐标获取中心坐标 | getCenterOfLonlats |
从一串笛卡尔坐标获取中心坐标 | getCenterOfCartesians |
添加场景包括雨、雪、雾等天气 | addStage |
使用之前;导入相关库
import {
Ellipsoid,
SceneTransforms,
Viewer,
CameraEventType,
HeadingPitchRange,
Cartesian3,
Cartographic,
EllipsoidGeodesic,
Color,
RectangleGeometry,
Rectangle,
ColorGeometryInstanceAttribute,
Primitive,
EllipsoidGeometry,
ScreenSpaceEventHandler,
Math as cesiumMath,
Matrix4,
defined,
Transforms,
HeadingPitchRoll,
viewerCesium3DTilesInspectorMixin,
HeightReference,
PostProcessStage,
freezeObject,
knockout,
Matrix3,
UrlTemplateImageryProvider,
WebMapTileServiceImageryProvider,
ArcGisMapServerImageryProvider,
createOpenStreetMapImageryProvider
} from 'cesium'
2 代码
👉 设置相机位置姿态
/**
* 设置相机位置姿态
* @param {*} lon 经度
* @param {*} lat 纬度
* @param {*} height 高度
* @param {*} heading 机头朝向【左右方向】
* @param {*} pitch 俯仰角【上下方向】
* @param {*} roll 翻滚角【侧空翻】
*/
setCameraPosition(lon,lat,height,heading,pitch,roll) {
this.viewer.scene.camera.setView({
destination: new Cartesian3.fromDegrees(lon,lat,height),
orientation: {
heading: cesiumMath.toRadians(heading), // 默认方向为正北,正角度为向东旋转,即水平旋转,也叫偏航角。
pitch: cesiumMath.toRadians(pitch), // 默认旋转角度为一90,即朝向地面,正角度为平面之上,负角度为平面之下,即上下旋转,也叫俯仰角。
roll: cesiumMath.toRadians(roll) // 默认旋转角度为0,左右旋转.正角度向右旋转,负角度向左旋转,也叫翻滚角。
}
});
}
👉 获取相机当前位置
/**
* 获取相机当前位置
*/
getCameraPosition() {
//中心点位置
var rectangle = this.viewer.camera.computeViewRectangle();
var west = rectangle.west / Math.PI * 180;
var north = rectangle.north / Math.PI * 180;
var east = rectangle.east / Math.PI * 180;
var south = rectangle.south / Math.PI * 180;
var centerx = (west + east) / 2;
var cnetery = (north + south) / 2;
//获取当前相机高度
let height = Math.ceil(this.viewer.camera.positionCartographic.height);
let position = WGS84_to_Cartesian3({
lng: centerx,
lat: cnetery,
alt: height
})
return position
}
👉 获取两点直线距离
/**
* 获取两点之间的直线距离
* @param {*} pt0
* @param {*} pt1
*/
static getDistance(pt0, pt1) {
let distance = 0
// Cartesian3.distance 计算的是两点之间的直线距离,忽略了地球曲率。
let s = Cartesian3.distance(pt0, pt1)
distance = distance + s
return distance
}
👉 获取两点测地距离
/**
* 获取两点之间的测地距离。
* @param {Cartesian3} pt1 第一个坐标点
* @param {Cartesian3} pt2 第二个坐标点
* @returns {Number} 返回两点之间的测地距离。
*/
static getGeodesicDistance(pt1, pt2) {
const pickedPointCartographic = Ellipsoid.WGS84.cartesianToCartographic(
pt1
)
const lastPointCartographic = Ellipsoid.WGS84.cartesianToCartographic(
pt2
)
const geodesic = new EllipsoidGeodesic(
pickedPointCartographic,
lastPointCartographic
)
return geodesic.surfaceDistance
}
👉 WGS84坐标转笛卡尔坐标
/**
* WGS84坐标系转笛卡尔坐标系
* @param point
* @return {{x: *, y: *, z: *}}
* @constructor
*/
static WGS84_to_Cartesian3(point) {
var car33 = Cartesian3.fromDegrees(point.lng, point.lat, point.alt);
var x = car33.x;
var y = car33.y;
var z = car33.z;
return new Cartesian3(x, y, z);
}
👉 笛卡尔坐标转WGS84坐标
/**
* 笛卡尔坐标系转WGS84坐标系
* @param point
* @return {{lat: *, lng: *, alt: *}}
* @constructor
*/
static Cartesian3_to_WGS84(cartesian3) {
var cartographic = Cartographic.fromCartesian(cartesian3);
var lat = cesiumMath.toDegrees(cartographic.latitude);
var lng = cesiumMath.toDegrees(cartographic.longitude);
var alt = cartographic.height;
return [lng,lat,alt]
}
👉 WGS84坐标转屏幕坐标
/**
* WGS84坐标转换到屏幕坐标
* @param {*} scene
* @param {*} point
*/
static WGS84_to_WindowCoordinates(scene, point) {
let car33 = Cartesian3.fromDegrees(point.lng, point.lat, point.alt);
return SceneTransforms.wgs84ToWindowCoordinates(scene, car33);
}
👉 弧度转度
/**
* 弧度转度
* @param {*} rad
*/
static rad2deg(rad){
return rad*180/Math.PI;
}
👉 度转弧度
/**
* 度转弧度
* @param {*} degree
*/
static deg2rad(degree){
return degree*Math.PI/180;
}
👉 从一串经纬度坐标获取中心坐标
/**
* 获取中心点坐标 (从经纬度坐标)
* @param {Array} points
* @returns
*/
static getCenterOfLonlats(points){
let lons=[],lats=[];
for(let i=0;i<points.length;i++){
lons.push(points[i][0]);
lats.push(points[i][1])
}
lons.sort(function(a,b){
return a-b;
})
lats.sort(function(a,b){
return a-b;
})
let centerLon=(lons[0]+lons[lons.length-1])/2;
let centerLat=(lats[0]+lats[lats.length-1])/2;
return [centerLon,centerLat]
}
👉 从一串笛卡尔坐标获取中心坐标
/**
* 获取中心点坐标 (从笛卡尔坐标)
* @param {Array} cartesians
* @returns
*/
static getCenterOfCartesians(cartesians){
let x_arr=[],y_arr=[],z_arr=[];
for(let i=0;i<cartesians.length;i++){
x_arr.push(cartesians[i].x);
y_arr.push(cartesians[i].y);
z_arr.push(cartesians[i].z);
}
x_arr.sort(function(a,b){
return a-b;
})
y_arr.sort(function(a,b){
return a-b;
})
z_arr.sort(function(a,b){
return a-b;
})
let centerX=(x_arr[0]+x_arr[x_arr.length-1])/2;
let centerY=(y_arr[0]+y_arr[y_arr.length-1])/2;
let centerZ=(z_arr[0]+z_arr[z_arr.length-1])/2;
return new Cartesian3(centerX, centerY, centerZ)
}
👉 添加场景包括雨、雪、雾等天气
/**
* 添加场景
* @param {Viewer} viewer viewer视图
* @param {String} type 场景类型
*/
addStage(type) {
let stageGlsl = {
snow: ` uniform sampler2D colorTexture;\n\
varying vec2 v_textureCoordinates;\n\
\n\
float snow(vec2 uv,float scale)\n\
{\n\
float time = czm_frameNumber / 60.0;\n\
float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
k=smoothstep(0.,k,sin(f.x+f.y)*0.01);\n\
return k*w;\n\
}\n\
\n\
void main(void){\n\
vec2 resolution = czm_viewport.zw;\n\
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
vec3 finalColor=vec3(0);\n\
float c = 0.0;\n\
c+=snow(uv,30.)*.0;\n\
c+=snow(uv,20.)*.0;\n\
c+=snow(uv,15.)*.0;\n\
c+=snow(uv,10.);\n\
c+=snow(uv,8.);\n\
c+=snow(uv,6.);\n\
c+=snow(uv,5.);\n\
finalColor=(vec3(c)); \n\
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.5); \n\
\n\
}\n\ `,
rain: ` uniform sampler2D colorTexture;\n\
varying vec2 v_textureCoordinates;\n\
\n\
float hash(float x){\n\
return fract(sin(x*133.3)*13.13);\n\
}\n\
\n\
void main(void){\n\
\n\
float time = czm_frameNumber / 60.0;\n\
vec2 resolution = czm_viewport.zw;\n\
\n\
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
vec3 c=vec3(.6,.7,.8);\n\
\n\
float a=-.4;\n\
float si=sin(a),co=cos(a);\n\
uv*=mat2(co,-si,si,co);\n\
uv*=length(uv+vec2(0,4.9))*.3+1.;\n\
\n\
float v=1.-sin(hash(floor(uv.x*100.))*2.);\n\
float b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;\n\
c*=v*b; \n\
\n\
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5); \n\
}\n\
`,
fog: ` uniform sampler2D colorTexture;\n\
uniform sampler2D depthTexture;\n\
varying vec2 v_textureCoordinates;\n\
void main(void)\n\
{\n\
vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);\n\
vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);\n\
\n\
float depth = czm_readDepth(depthTexture, v_textureCoordinates);\n\
vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);\n\
\n\
float f=(depthcolor.r-0.22)/0.2;\n\
if(f<0.0) f=0.0;\n\
else if(f>1.0) f=1.0;\n\
gl_FragColor = mix(origcolor,fogcolor,f);\n\
}\n\
`
};
try {
if (type && typeof type == 'string') {
let postProcessStages = this.viewer.scene.postProcessStages;
let fs_Type = stageGlsl[type];
let stage = new PostProcessStage({
name: `BN_${type}`,
fragmentShader: fs_Type
});
postProcessStages.add(stage);
return stage;
} else {
throw ''
}
} catch (e) {
console.log('场景类型参数未定义,或者不是要求的字符串类型');
}
}
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号