参考文章: https://www.jianshu.com/p/a3335efd7d1f
目标: 实现Cesium三维地球上任意位置绘制水纹波浪效果
效果图:
视频演示地址: https://live.csdn.net/v/164927
代码:
/**
* 1. 定义轮廓
*/
let xianRiver = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
109.09724235534668,
34.28572976338374
],
[
109.09608364105225,
34.28619072021313
],
[
109.09496784210205,
34.28661621658067
],
[
109.09410953521729,
34.28739628765902
],
[
109.09342288970946,
34.28803452224608
],
[
109.09209251403807,
34.28920460639884
],
[
109.09136295318604,
34.29009102294
],
[
109.09067630767822,
34.29087106176089
],
[
109.09033298492432,
34.291367446330995
],
[
109.08913135528563,
34.29218292890113
],
[
109.08835887908936,
34.29299840355616
],
[
109.08745765686034,
34.2939911446268
],
[
109.08612728118896,
34.29608295348061
],
[
109.08393859863281,
34.29828106936942
],
[
109.0769863128662,
34.305513173709706
],
[
109.07445430755615,
34.30519412341438
],
[
109.07389640808105,
34.30600947175969
],
[
109.07458305358887,
34.30643486775366
],
[
109.0719223022461,
34.30799463462751
],
[
109.07050609588623,
34.306753913334916
],
[
109.06986236572266,
34.30714385628804
],
[
109.06896114349365,
34.30774649183563
],
[
109.06784534454346,
34.308809955780575
],
[
109.06780242919922,
34.309554372527856
],
[
109.06608581542967,
34.31097229093081
],
[
109.0638542175293,
34.31224839701962
],
[
109.06230926513672,
34.31394984163214
],
[
109.05939102172852,
34.315509468900686
],
[
109.0528678894043,
34.31919574543767
],
[
109.04977798461914,
34.3210388229967
],
[
109.04788970947266,
34.32217300445412
],
[
109.0451431274414,
34.324016016631
],
[
109.04205322265625,
34.32543369076272
],
[
109.03947830200194,
34.3268513409437
],
[
109.03707504272461,
34.32826896717347
],
[
109.03501510620117,
34.32968656945158
],
[
109.0341567993164,
34.331104147777516
],
[
109.03244018554688,
34.33223819319243
],
[
109.03072357177734,
34.33308871719338
],
[
109.02849197387695,
34.334080984295724
],
[
109.02677536010742,
34.33478973932564
],
[
109.02385711669922,
34.33705771517865
],
[
109.02162551879883,
34.33875865682487
],
[
109.01973724365233,
34.34045956397576
],
[
109.01527404785156,
34.34343606848294
],
[
109.01269912719727,
34.34612900533531
],
[
109.01184082031249,
34.34726284760975
],
[
109.01166915893555,
34.34825494702198
],
[
109.01098251342773,
34.348750992325805
],
[
109.01003837585449,
34.34938876054678
],
[
109.00990962982178,
34.35062885153239
],
[
109.00943756103516,
34.35094772910662
],
[
109.00883674621582,
34.35169177206288
],
[
109.00826811790466,
34.352781251619916
],
[
109.00853633880614,
34.3538264300822
],
[
109.00860071182251,
34.354260441038
],
[
109.00889039039612,
34.35511959895571
],
[
109.00868654251099,
34.35540303056377
],
[
109.00879383087158,
34.356014176707305
],
[
109.00883674621582,
34.35638617652599
],
[
109.00883674621582,
34.35721874156599
],
[
109.0083646774292,
34.35835243385394
],
[
109.00832176208496,
34.36005294353198
],
[
109.00849342346191,
34.361292876752564
],
[
109.00883674621582,
34.36200140178441
],
[
109.0087080001831,
34.362851623914906
],
[
109.0087080001831,
34.36345385937126
],
[
109.00913715362549,
34.3628870496498
],
[
109.00978088378906,
34.362851623914906
],
[
109.00960922241211,
34.36639412326775
],
[
109.00978088378906,
34.37036154472887
],
[
109.00960922241211,
34.37291193073771
],
[
109.00960922241211,
34.37673736415527
],
[
109.01012420654297,
34.38112931298132
],
[
109.00995254516602,
34.3856626959692
],
[
109.00978088378906,
34.390337490092925
],
[
109.00978088378906,
34.39572026297462
],
[
109.00956630706786,
34.40875080575133
],
[
109.0094804763794,
34.41020245253523
],
[
109.00965213775635,
34.414026182017736
],
[
109.00990962982178,
34.41554854417464
],
[
109.01021003723143,
34.41724789245418
],
[
109.0105104446411,
34.418026748874986
],
[
109.01068210601807,
34.41915961799191
],
[
109.0105104446411,
34.420044661310385
],
[
109.00978088378906,
34.42082349168161
],
[
109.00906205177306,
34.42091199467386
],
[
109.00852560997009,
34.4206907370176
],
[
109.00821447372435,
34.42074383890848
],
[
109.00806427001953,
34.4210181981409
],
[
109.00793552398682,
34.42117750308853
],
[
109.0076994895935,
34.42123945493065
],
[
109.00750637054443,
34.421354508229925
],
[
109.00733470916748,
34.42174391822196
],
[
109.00754928588866,
34.422274928924665
],
[
109.0078067779541,
34.42277053587108
],
[
109.00879383087158,
34.423938740620805
],
[
109.00973796844482,
34.42581491408853
],
[
109.01068210601807,
34.4256379183903
],
[
109.01025295257568,
34.42669988695848
],
[
109.01145458221436,
34.42885918144264
],
[
109.01111125946045,
34.43013349299815
],
[
109.0112829208374,
34.431160007622644
],
[
109.01188373565674,
34.43193873444527
],
[
109.01184082031249,
34.43261126540766
],
[
109.01154041290282,
34.43289443472016
],
[
109.01068210601807,
34.43310681107494
],
[
109.01007056236267,
34.432124565910165
],
[
109.00995254516602,
34.43066445041242
],
[
109.01029586791992,
34.43043436928037
],
[
109.01058554649353,
34.42985031433141
],
[
109.00871872901915,
34.427673346294654
],
[
109.00880455970764,
34.42722201655739
],
[
109.00845050811768,
34.42708927205326
],
[
109.00742053985596,
34.427018474898226
],
[
109.00686264038086,
34.42553172079151
],
[
109.00720596313477,
34.42510692904723
],
[
109.00690555572508,
34.42429273883743
],
[
109.00587558746338,
34.418911804184056
],
[
109.00527477264403,
34.41158326390202
],
[
109.00501728057861,
34.405422544867605
],
[
109.00497436523438,
34.3955786154917
],
[
109.00493144989012,
34.38810637091536
],
[
109.00531768798828,
34.36589818237467
],
[
109.00656223297118,
34.36426864162867
],
[
109.00651931762695,
34.36370183741875
],
[
109.00656223297118,
34.36253279162689
],
[
109.00677680969238,
34.36122202391991
],
[
109.00720596313477,
34.3595215379642
],
[
109.00690555572508,
34.35852957188865
],
[
109.00722742080687,
34.35681131715419
],
[
109.00758147239685,
34.35519931419234
],
[
109.00660514831542,
34.35346327633115
],
[
109.00664806365967,
34.35247123855315
],
[
109.00707721710205,
34.35155005010414
],
[
109.00639057159424,
34.351408327905844
],
[
109.00626182556151,
34.35066428243385
],
[
109.00664806365967,
34.34609357251717
],
[
109.00819301605225,
34.34210728488217
],
[
109.00889039039612,
34.34044184637073
],
[
109.00930881500244,
34.33952938465168
],
[
109.01025295257568,
34.339467372329935
],
[
109.01055335998534,
34.33985716330496
],
[
109.01102542877197,
34.34024695246838
],
[
109.01184082031249,
34.34024695246838
],
[
109.01308536529541,
34.339750856855076
],
[
109.01535987854004,
34.33790819031363
],
[
109.01909351348876,
34.33489605206362
],
[
109.02209758758545,
34.333195032087154
],
[
109.02462959289551,
34.33191924446894
],
[
109.02660369873047,
34.33082063402853
],
[
109.02870655059814,
34.32989920772743
],
[
109.03123855590819,
34.32869425037187
],
[
109.03398513793945,
34.326426048404265
],
[
109.03614163398743,
34.324804600822695
],
[
109.03740763664246,
34.32388310845321
],
[
109.03846979141234,
34.323067933691384
],
[
109.03967142105103,
34.322350218922246
],
[
109.04037952423096,
34.32189832128895
],
[
109.04124855995178,
34.321428699601526
],
[
109.0423858165741,
34.32068438814788
],
[
109.04306173324584,
34.3201881768449
],
[
109.04383420944214,
34.31965651862185
],
[
109.04452085494995,
34.31912485703099
],
[
109.04573321342468,
34.318096968405776
],
[
109.04680609703064,
34.31716654112387
],
[
109.04721379280089,
34.31725515369029
],
[
109.04762148857117,
34.31711337353909
],
[
109.04769659042357,
34.316820951220905
],
[
109.04756784439087,
34.31659055716179
],
[
109.04821157455444,
34.31616521262207
],
[
109.05007839202881,
34.314977781041726
],
[
109.05136585235596,
34.31416251978408
],
[
109.05262112617493,
34.31363968502806
],
[
109.05389785766602,
34.31315229376361
],
[
109.05642986297607,
34.31218636453329
],
[
109.05966997146606,
34.31146855671463
],
[
109.0607213973999,
34.31087480980716
],
[
109.06229853630064,
34.30935054478895
],
[
109.06356453895569,
34.30870360999221
],
[
109.06517386436462,
34.30795918570213
],
[
109.06550645828247,
34.30825163888892
],
[
109.06731963157654,
34.30762242016467
],
[
109.06573176383972,
34.30850864236366
],
[
109.06597852706909,
34.308668161366136
],
[
109.06684756278992,
34.3081452923934
],
[
109.06804919242859,
34.30745403688946
],
[
109.06916499137878,
34.30678936276914
],
[
109.07117128372192,
34.30562838601844
],
[
109.07275915145874,
34.30506118543358
],
[
109.07374620437622,
34.3045471565944
],
[
109.07389640808105,
34.30409516311888
],
[
109.07369256019592,
34.3035899910615
],
[
109.0732204914093,
34.3030493649673
],
[
109.07537698745728,
34.301223618337694
],
[
109.07663226127625,
34.30017778442854
],
[
109.07774806022644,
34.299105347998356
],
[
109.07952904701233,
34.297190881985
],
[
109.0806233882904,
34.296960434059706
],
[
109.08102035522461,
34.295391598689875
],
[
109.08210396766663,
34.294212737014306
],
[
109.08243656158447,
34.294274782778075
],
[
109.08260822296143,
34.294274782778075
],
[
109.08393859863281,
34.29299840355616
],
[
109.08441066741943,
34.29292749303081
],
[
109.08488273620605,
34.29264385033088
],
[
109.08535480499268,
34.292218384485494
],
[
109.08599853515625,
34.29186382796848
],
[
109.08612728118896,
34.2912965344291
],
[
109.08595561981201,
34.290906517898854
],
[
109.08891677856445,
34.287892692756756
],
[
109.08981800079346,
34.28817635149602
],
[
109.09046173095702,
34.28721899941343
],
[
109.09140586853026,
34.28626163642401
],
[
109.09260749816895,
34.28562338837173
],
[
109.09449577331543,
34.28601342942413
],
[
109.09616947174072,
34.28555247162227
],
[
109.09724235534668,
34.28572976338374
]
]
]
}
}
]
}
/**
* 2. 定义函数
*/
function init_xianRiver(coordinates) {
let coordinateArray = [];
for (let i = 0; i < coordinates.length; i++){
coordinateArray.push(coordinates[i][0]);
coordinateArray.push(coordinates[i][1]);
}
let outLinePositionArray = Cesium.Cartesian3.fromDegreesArray(coordinateArray);
let riverPolygon = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.PolygonGeometry({
polygonHierarchy : new Cesium.PolygonHierarchy(outLinePositionArray),
vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
height: 0,
extrudedHeight: 5
})
}),
appearance : new Cesium.EllipsoidSurfaceAppearance({
aboveGround : true
}),
show : true
}));
riverPolygon.appearance.material = new Cesium.Material({
fabric: {
type: 'Water',
uniforms: {
normalMap: '../assets/images/waterNormals.jpg',
frequency: 1000.0,
animationSpeed: 0.01,
amplitude: 10.0
}
}
});
}
/**
* 3.执行
*/
init_xianRiver(xianRiver.features[0].geometry.coordinates[0]);
所使用的水纹波浪效果贴图(waterNormals.jpg)就是文章开始提到的参考文章中的图片: