共计 11636 个字符，预计需要花费 30 分钟才能阅读完成。
该计划借鉴了多个大佬的，把代码理了一遍再整合了一下做了个汇合（算是一个练手的 demo）
重点👇
这里初始化地球的时候留神下这个参数 requestRenderMode（缩小 Cesium 渲染新帧总工夫并缩小 Cesium 在应用程序中总体 CPU 使用率），如果你开启了，那么流线材质就会动一下就不动了，切记！！！！
上面是 vue 组件代码
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 按钮，默认 false | |
| geocoder: false, // 暗藏地名查找控件 | |
| homeButton: false, // 暗藏 Home 按钮 | |
| infoBox: false, // 暗藏点击因素之后显示的信息窗口 | |
| sceneModePicker: false, // 暗藏场景模式抉择控件 | |
| selectionIndicator: true, // 显示实体对象抉择框，默认 true | |
| timeline: false, // 暗藏工夫线控件 | |
| navigationHelpButton: false, // 暗藏帮忙按钮 | |
| scene3DOnly: true, // 每个几何实例将只在 3D 中出现，以节俭 GPU 内存 | |
| shouldAnimate: true, // 开启动画自动播放 | |
| sceneMode: 3, // 初始场景模式 1：2D 2：2D 循环 3：3D，默认 3 | |
| requestRenderMode: false, // 缩小 Cesium 渲染新帧总工夫并缩小 Cesium 在应用程序中总体 CPU 使用率 | |
| // 如场景中的元素没有随仿真工夫变动，请思考将设置 maximumRenderTimeChange 为较高的值，例如 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 纬度相差约 111000 米 | |
| let endPoint = [0,0,0]; // 定义一个端点（前面将进行 startPoint 和 endPoint 两点画线）let heigh = (step * Math.sqrt(deltaLon*deltaLon+deltaLat*deltaLat) * heightProportion).toFixed(0)*2; | |
| let x2 = (10000*Math.sqrt(dLon*dLon+dLat*dLat)); // 小数点扩充 10000 倍，进步精确度 | |
| 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; // 求 end 点高度 | |
| s = s.concat(endPoint) | |
| // end 点变为 start 点 | |
| 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 | |
| // 飞线成果 - 飞线距离，宽度 2 | |
| 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> |
这里有两个曲线算法 computeFlyline 和parabola, 任选其一即可
其中一个来自于
https://www.cnblogs.com/s3131…
另一个忘了（原作者能够分割我）
正文完
