cesium 娴佺嚎 椋炵嚎 杩佸緳鍥?鏀婚槻鍥?/a>
Posted 鍙嬩汉A
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cesium 娴佺嚎 椋炵嚎 杩佸緳鍥?鏀婚槻鍥?/a>相关的知识，希望对你有一定的参考价值。
璇ユ柟妗堝€熼壌浜嗗涓ぇ浣殑锛屾妸浠ｇ爜鐞嗕簡涓€閬嶅啀鏁村悎浜嗕竴涓嬪仛浜嗕釜闆嗗悎锛堢畻鏄竴涓粌鎵嬬殑demo锛?br>閲嶇偣馃憞
杩欓噷鍒濆鍖栧湴鐞冪殑鏃跺€欐敞鎰忎笅杩欎釜鍙傛暟requestRenderMode锛堝噺灏慍esium娓叉煋鏂板抚鎬绘椂闂村苟鍑忓皯Cesium鍦ㄥ簲鐢ㄧ▼搴忎腑鎬讳綋CPU浣跨敤鐜囷級锛屽鏋滀綘寮€鍚簡锛岄偅涔堟祦绾挎潗璐ㄥ氨浼氬姩涓€涓嬪氨涓嶅姩浜嗭紝鍒囪锛侊紒锛侊紒
涓嬮潰鏄痸ue缁勪欢浠ｇ爜
https://segmentfault.com/u/yo...
<template>
<div class="tole">
<div id="cesiumContainer" style="height: 100%;width: 100%">
</div>
</div>
</template>
<script>
import * as Cesium from \'cesium/Cesium\'
import widget from \'cesium/Widgets/widgets.css\'
var viewer = null
export default {
data(){
return{
viewer:null
}
},
mounted(){
console.log(widget);
Cesium.Ion.defaultAccessToken = \'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZGMwM2M2OC02ZGYwLTQ5NzQtYjBkOS1lYTM0MmYxNTZlZTkiLCJpZCI6NjEwNTMsImlhdCI6MTYyNTY0ODgzN30.9B76dtOIBsNmX3laJ5VXFOqt2NlBT-n16j4ppUF8IYA\'
// viewer = new Cesium.CesiumWidget(\'cesiumContainer\')
viewer = new Cesium.Viewer("cesiumContainer",{
animation: false, // 闅愯棌鍔ㄧ敾鎺т欢
baseLayerPicker: false, // 闅愯棌鍥惧眰閫夋嫨鎺т欢
fullscreenButton: false, // 闅愯棌鍏ㄥ睆鎸夐挳
vrButton: false, // 闅愯棌VR鎸夐挳锛岄粯璁alse
geocoder: false, // 闅愯棌鍦板悕鏌ユ壘鎺т欢
homeButton: false, // 闅愯棌Home鎸夐挳
infoBox: false, // 闅愯棌鐐瑰嚮瑕佺礌涔嬪悗鏄剧ず鐨勪俊鎭獥鍙? sceneModePicker: false, // 闅愯棌鍦烘櫙妯″紡閫夋嫨鎺т欢
selectionIndicator: true, // 鏄剧ず瀹炰綋瀵硅薄閫夋嫨妗嗭紝榛樿true
timeline: false, // 闅愯棌鏃堕棿绾挎帶浠? navigationHelpButton: false, // 闅愯棌甯姪鎸夐挳
scene3DOnly: true, // 姣忎釜鍑犱綍瀹炰緥灏嗗彧鍦?D涓憟鐜帮紝浠ヨ妭鐪丟PU鍐呭瓨
shouldAnimate: true, // 寮€鍚姩鐢昏嚜鍔ㄦ挱鏀? sceneMode: 3, // 鍒濆鍦烘櫙妯″紡 1锛?D 2锛?D寰幆 3锛?D锛岄粯璁?
requestRenderMode: false, // 鍑忓皯Cesium娓叉煋鏂板抚鎬绘椂闂村苟鍑忓皯Cesium鍦ㄥ簲鐢ㄧ▼搴忎腑鎬讳綋CPU浣跨敤鐜? // 濡傚満鏅腑鐨勫厓绱犳病鏈夐殢浠跨湡鏃堕棿鍙樺寲锛岃鑰冭檻灏嗚缃甿aximumRenderTimeChange涓鸿緝楂樼殑鍊硷紝渚嬪Infinity
maximumRenderTimeChange: Infinity,
//澶╁湴鍥惧奖鍍? // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
// url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=39ca2b2b8dc2f3e1e9c3de07f4d4de57",
// layer: "tdtBasicLayer",
// style: "default",
// format: "tiles",
// tileMatrixSetID: "GoogleMapsCompatible",
// show: true,
// maximumLevel: 18
// })
})
this.viewer = viewer
//娣诲姞澶╁湴鍥炬爣娉? // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
// url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=39ca2b2b8dc2f3e1e9c3de07f4d4de57",
// layer: "tdtAnnoLayer",
// style: "default",
// format: "tiles",
// tileMatrixSetID: "GoogleMapsCompatible",
// show: true
// }));
viewer.cesiumWidget.creditContainer.style.display = "none"
//娣诲姞绾? // var orangeOutlined = viewer.entities.add({
// name:
// "Orange line with black outline at height and following the surface",
// polyline: {
// positions: Cesium.Cartesian3.fromDegreesArrayHeights([
// -75,
// 39,
// 0,
// -125,
// 39,
// 0,
// ]),
// width: 5,
// material: new Cesium.PolylineOutlineMaterialProperty({
// color: Cesium.Color.ORANGE,
// outlineWidth: 2,
// outlineColor: Cesium.Color.BLACK,
// }),
// },
// });
// console.log(orangeOutlined);
//娣诲姞鐐逛綅
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(120.9677706,30.7985748,2.61),
point: {
color: Cesium.Color.RED, //鐐逛綅棰滆壊
pixelSize: 10 //鍍忕礌鐐瑰ぇ灏? },
label : {
text : \'娴嬭瘯鍚嶇О\',
font : \'14pt Source Han Sans CN\', //瀛椾綋鏍峰紡
fillColor:Cesium.Color.BLACK, //瀛椾綋棰滆壊
backgroundColor:Cesium.Color.AQUA, //鑳屾櫙棰滆壊
showBackground:true, //鏄惁鏄剧ず鑳屾櫙棰滆壊
style: Cesium.LabelStyle.FILL, //label鏍峰紡
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.CENTER,//鍨傜洿浣嶇疆
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//姘村钩浣嶇疆
pixelOffset:new Cesium.Cartesian2(10,0) //鍋忕Щ
}
});
console.log(entity);
//杩欓噷閫氳繃绠楁硶寰楀埌鏇茬嚎
let mm = this.parabola([-75,39,-175,39])
var polyline = new Cesium.PolylineGeometry({
positions: mm,
width : 2
});
const instance = new Cesium.GeometryInstance({
geometry: polyline,
id: \'flyline\',
})
//娣诲姞鑷冲満鏅? this.viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: [instance],
appearance: this.getFlylineMaterial(),
releaseGeometryInstances: false,
compressVertices: false,
})
)
},
methods:{
computeFlyline(
point1 = [-75, 39],
point2 = [-175,39],
h = 500000
) {
let flyline = getBSRxyz(...point1, ...point2, h)
return flyline
// 灏嗘暟鎹浆鎹负cesium polyline positions鏍煎紡
function getBSRxyz(x1, y1, x2, y2, h) {
let arr3d = getBSRPoints(x1, y1, x2, y2, h)
let arrAll = []
for (let ite of arr3d) {
arrAll.push(ite[0])
arrAll.push(ite[1])
arrAll.push(ite[2])
}
return Cesium.Cartesian3.fromDegreesArrayHeights(arrAll)
}
function getBSRPoints(x1, y1, x2, y2, h) {
let point1 = [y1, 0]
let point2 = [(y2 + y1) / 2, h]
let point3 = [y2, 0]
let arr = getBSR(point1, point2, point3)
let arr3d = []
for (let i = 0; i< arr.length; i++) {
let x = ((x2 - x1) * (arr[i][0] - y1)) / (y2 - y1) + x1
arr3d.push([x, arr[i][0], arr[i][1]])
}
return arr3d
}
// 鐢熸垚璐濆灏旀洸绾? function getBSR(point1, point2, point3) {
var ps = [
{ x: point1[0], y: point1[1] },
{ x: point2[0], y: point2[1] },
{ x: point3[0], y: point3[1] }
]
// 100 姣忔潯绾跨敱100涓偣缁勬垚
let guijipoints = CreateBezierPoints(ps, 100)
return guijipoints
}
// 璐濊禌灏旀洸绾跨畻娉? // 鍙傛暟锛? // anchorpoints: [{ x: 116.30, y: 39.60 }, { x: 37.50, y: 40.25 }, { x: 39.51, y: 36.25 }]
function CreateBezierPoints(anchorpoints, pointsAmount) {
var points = []
for (var i = 0; i < pointsAmount; i++) {
var point = MultiPointBezier(anchorpoints, i / pointsAmount)
points.push([point.x, point.y])
}
return points
}
function MultiPointBezier(points, t) {
var len = points.length
var x = 0,
y = 0
var erxiangshi = function(start, end) {
var cs = 1,
bcs = 1
while (end > 0) {
cs *= start
bcs *= end
start--
end--
}
return cs / bcs
}
for (var i = 0; i < len; i++) {
var point = points[i]
x +=
point.x *
Math.pow(1 - t, len - 1 - i) *
Math.pow(t, i) *
erxiangshi(len - 1, i)
y +=
point.y *
Math.pow(1 - t, len - 1 - i) *
Math.pow(t, i) *
erxiangshi(len - 1, i)
}
return { x: x, y: y }
}
},
parabola(twoPoints) { //鎶涚墿绾跨粯鍒? let s = []
let startPoint = [twoPoints[0],twoPoints[1],0]; //璧风偣鐨勭粡搴︺€佺含搴? s = s.concat(startPoint)
let step = 80; //绾跨殑澶氬皯锛岃秺澶氬垯瓒婂钩婊?浣嗚繃澶氭祻瑙堝櫒缂撳瓨涔熶細鍗犵敤瓒婂)
let heightProportion = 0.125; //鏈€楂樼偣鍜屾€昏窛绂荤殑姣斿€? let dLon = (twoPoints[2] - startPoint[0])/step; //缁忓害宸€? let dLat = (twoPoints[3] - startPoint[1])/step; //绾害宸€? let deltaLon = dLon * Math.abs(111000*Math.cos(twoPoints[1])); //缁忓害宸?绫崇骇)
let deltaLat = dLat * 111000; //绾害宸?绫?,1绾害鐩稿樊绾?11000绫? let endPoint = [0,0,0]; //瀹氫箟涓€涓鐐癸紙鍚庨潰灏嗚繘琛宻tartPoint鍜宔ndPoint涓ょ偣鐢荤嚎锛? let heigh = (step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion).toFixed(0)*2;
let x2 = (10000*Math.sqrt(dLon*dLon+dLat*dLat)); //灏忔暟鐐规墿澶?0000鍊嶏紝鎻愰珮绮剧‘搴? let a = (heigh/(x2*x2));
function y(x,height) { return height - a*x*x; }
for(var i = 1;i <= step; i++){ //閫愨€滃抚鈥濈敾绾? endPoint[0] = startPoint[0] + dLon; //鏇存柊end鐐圭粡搴? endPoint[1] = startPoint[1] + dLat; //鏇存柊end鐐圭含搴? let x = x2*(2*i/step-1); //姹傛姏鐗╃嚎鍑芥暟x
endPoint[2] = (y(x,heigh)).toFixed(0)*1; //姹俥nd鐐归珮搴? s = s.concat(endPoint)
// end鐐瑰彉涓簊tart鐐? startPoint[0] = endPoint[0];
startPoint[1] = endPoint[1];
startPoint[2] = endPoint[2];
}
return Cesium.Cartesian3.fromDegreesArrayHeights(s)
},
getFlylineMaterial(){
// 鍒涘缓鏉愯川锛屽湪MaterialAppearance涓嫢涓嶆坊鍔犲熀纭€鏉愯川锛屾ā鍨嬪皢浼氶€忔槑
var material = new Cesium.Material.fromType(\'Color\')
material.uniforms.color = Cesium.Color.ORANGE
// 椋炵嚎鏁堟灉-椋炵嚎闂撮殧锛屽搴?
let fragmentShaderSource = `
varying vec2 v_st;
varying float v_width;
varying float v_polylineAngle;
varying vec4 v_positionEC;
varying vec3 v_normalEC;
void main()
{
vec2 st = v_st;
// 绠ご椋炵嚎锛屽搴?8
float xx = fract(st.s*10.0 + st.t - czm_frameNumber/60.0);
if (st.t<0.5) {
xx = fract(st.s*10.0 - st.t - czm_frameNumber/60.0);
}
float r = 0.0;
float g = xx;
float b = xx;
float a = xx;
// 椋炵嚎杈规
if (st.t>0.8||st.t<0.2) {
g = 1.0;
b = 1.0;
a = 0.4;
}
gl_FragColor = vec4(r,g,b,a);
}
`
// 鑷畾涔夋潗璐? const aper = new Cesium.PolylineMaterialAppearance({
material: material,
translucent: true,
vertexShaderSource: `
#define CLIP_POLYLINE
void clipLineSegmentToNearPlane(
vec3 p0,
vec3 p1,
out vec4 positionWC,
out bool clipped,
out bool culledByNearPlane,
out vec4 clippedPositionEC)
{
culledByNearPlane = false;
clipped = false;
vec3 p0ToP1 = p1 - p0;
float magnitude = length(p0ToP1);
vec3 direction = normalize(p0ToP1);
float endPoint0Distance = czm_currentFrustum.x + p0.z;
float denominator = -direction.z;
if (endPoint0Distance > 0.0 && abs(denominator) < czm_epsilon7)
{
culledByNearPlane = true;
}
else if (endPoint0Distance > 0.0)
{
float t = endPoint0Distance / denominator;
if (t < 0.0 || t > magnitude)
{
culledByNearPlane = true;
}
else
{
p0 = p0 + t * direction;
p0.z = min(p0.z, -czm_currentFrustum.x);
clipped = true;
}
}
clippedPositionEC = vec4(p0, 1.0);
positionWC = czm_eyeToWindowCoordinates(clippedPositionEC);
}
vec4 getPolylineWindowCoordinatesEC(vec4 positionEC, vec4 prevEC, vec4 nextEC, float expandDirection, float width, bool usePrevious, out float angle)
{
#ifdef POLYLINE_DASH
vec4 positionWindow = czm_eyeToWindowCoordinates(positionEC);
vec4 previousWindow = czm_eyeToWindowCoordinates(prevEC);
vec4 nextWindow = czm_eyeToWindowCoordinates(nextEC);
vec2 lineDir;
if (usePrevious) {
lineDir = normalize(positionWindow.xy - previousWindow.xy);
}
else {
lineDir = normalize(nextWindow.xy - positionWindow.xy);
}
angle = atan(lineDir.x, lineDir.y) - 1.570796327;
angle = floor(angle / czm_piOverFour + 0.5) * czm_piOverFour;
#endif
vec4 clippedPrevWC, clippedPrevEC;
bool prevSegmentClipped, prevSegmentCulled;
clipLineSegmentToNearPlane(prevEC.xyz, positionEC.xyz, clippedPrevWC, prevSegmentClipped, prevSegmentCulled, clippedPrevEC);
vec4 clippedNextWC, clippedNextEC;
bool nextSegmentClipped, nextSegmentCulled;
clipLineSegmentToNearPlane(nextEC.xyz, positionEC.xyz, clippedNextWC, nextSegmentClipped, nextSegmentCulled, clippedNextEC);
bool segmentClipped, segmentCulled;
vec4 clippedPositionWC, clippedPositionEC;
clipLineSegmentToNearPlane(positionEC.xyz, usePrevious ? prevEC.xyz : nextEC.xyz, clippedPositionWC, segmentClipped, segmentCulled, clippedPositionEC);
if (segmentCulled)
{
return vec4(0.0, 0.0, 0.0, 1.0);
}
vec2 directionToPrevWC = normalize(clippedPrevWC.xy - clippedPositionWC.xy);
vec2 directionToNextWC = normalize(clippedNextWC.xy - clippedPositionWC.xy);
if (prevSegmentCulled)
{
directionToPrevWC = -directionToNextWC;
}
else if (nextSegmentCulled)
{
directionToNextWC = -directionToPrevWC;
}
vec2 thisSegmentForwardWC, otherSegmentForwardWC;
if (usePrevious)
{
thisSegmentForwardWC = -directionToPrevWC;
otherSegmentForwardWC = directionToNextWC;
}
else
{
thisSegmentForwardWC = directionToNextWC;
otherSegmentForwardWC = -directionToPrevWC;
}
vec2 thisSegmentLeftWC = vec2(-thisSegmentForwardWC.y, thisSegmentForwardWC.x);
vec2 leftWC = thisSegmentLeftWC;
float expandWidth = width * 0.5;
if (!czm_equalsEpsilon(prevEC.xyz - positionEC.xyz, vec3(0.0), czm_epsilon1) && !czm_equalsEpsilon(nextEC.xyz - positionEC.xyz, vec3(0.0), czm_epsilon1))
{
vec2 otherSegmentLeftWC = vec2(-otherSegmentForwardWC.y, otherSegmentForwardWC.x);
vec2 leftSumWC = thisSegmentLeftWC + otherSegmentLeftWC;
float leftSumLength = length(leftSumWC);
leftWC = leftSumLength < czm_epsilon6 ? thisSegmentLeftWC : (leftSumWC / leftSumLength);
vec2 u = -thisSegmentForwardWC;
vec2 v = leftWC;
float sinAngle = abs(u.x * v.y - u.y * v.x);
expandWidth = clamp(expandWidth / sinAngle, 0.0, width * 2.0);
}
vec2 offset = leftWC * expandDirection * expandWidth * czm_pixelRatio;
return vec4(clippedPositionWC.xy + offset, -clippedPositionWC.z, 1.0) * (czm_projection * clippedPositionEC).w;
}
vec4 getPolylineWindowCoordinates(vec4 position, vec4 previous, vec4 next, float expandDirection, float width, bool usePrevious, out float angle)
{
vec4 positionEC = czm_modelViewRelativeToEye * position;
vec4 prevEC = czm_modelViewRelativeToEye * previous;
vec4 nextEC = czm_modelViewRelativeToEye * next;
return getPolylineWindowCoordinatesEC(positionEC, prevEC, nextEC, expandDirection, width, usePrevious, angle);
}
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
attribute vec3 prevPosition3DHigh;
attribute vec3 prevPosition3DLow;
attribute vec3 nextPosition3DHigh;
attribute vec3 nextPosition3DLow;
attribute vec2 expandAndWidth;
attribute vec2 st;
attribute float batchId;
varying float v_width;
varying vec2 v_st;
varying float v_polylineAngle;
varying vec4 v_positionEC;
varying vec3 v_normalEC;
void main()
{
float expandDir = expandAndWidth.x;
float width = abs(expandAndWidth.y) + 0.5;
bool usePrev = expandAndWidth.y < 0.0;
vec4 p = czm_computePosition();
vec4 prev = czm_computePrevPosition();
vec4 next = czm_computeNextPosition();
float angle;
vec4 positionWC = getPolylineWindowCoordinates(p, prev, next, expandDir, width, usePrev, angle);
gl_Position = czm_viewportOrthographic * positionWC;
v_width = width;
v_st.s = st.s;
v_st.t = st.t;
// v_st.t = czm_writeNonPerspective(st.t, gl_Position.w);
v_polylineAngle = angle;
vec4 eyePosition = czm_modelViewRelativeToEye * p;
v_positionEC = czm_inverseModelView * eyePosition; // position in eye coordinates
//v_normalEC = czm_normal * normal; // normal in eye coordinates
}
`,
fragmentShaderSource: fragmentShaderSource
})
return aper;
},
}
}
</script>
<style scope lang="scss">
.tole{
width: 100%;
height: 100%;
}
</style>杩欓噷鏈変袱涓洸绾跨畻娉?code>computeFlyline鍜?code>parabola,浠婚€夊叾涓€鍗冲彲
鍏朵腑涓€涓潵鑷簬
https://www.cnblogs.com/s3131...
鍙︿竴涓繕浜嗭紙鍘熶綔鑰呭彲浠ヨ仈绯绘垜锛?/p>
以上是关于cesium 娴佺嚎 椋炵嚎 杩佸緳鍥?鏀婚槻鍥?/a>的主要内容，如果未能解决你的问题，请参考以下文章