webgl中绘制起始点相同，弯曲程度不同的多条曲线

叁歲伎倆 2021-09-29 12:06 322阅读 0赞

先看下效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

首先，应该先去***[官网下载][Link 1]***SuperMap iClient3D for WebGL（推荐选择：9D(2019) 正式版）

![20190712101804156.png][]

然后在hbuilder中新建web项目，在项目中新建HTML文件，命名为“**PolylineLiJiang**”，在PolylineLiJiang.html中复制进去以下代码，然后导出PolylineLiJiang.html到刚刚下载并解压后的文件夹“examples”中，再右键“PolylineLiJiang.html”用**IE浏览器**打开（注意：qq浏览器，火狐浏览器，谷歌浏览器貌似都打不开）

附：api文档[http://support.supermap.com.cn:8090/webgl/Build/Documentation/index.html][http_support.supermap.com.cn_8090_webgl_Build_Documentation_index.html]

官网示例：[http://support.supermap.com.cn:8090/webgl/examples/editor.html\#Polyline][http_support.supermap.com.cn_8090_webgl_examples_editor.html_Polyline]

代码实现：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>李疆WebglDemo</title>
        <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <link href="./css/pretty.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./js/bootstrap-select.min.js"></script>
        <script src="./js/config.js"></script>
        <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
    </head>
    <body>
    <div id="cesiumContainer"></div>
    <div id='loadingbar' class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    <div id="toolbar" style="position: absolute;left: 5px;top: 5px;display: none;">
        <select id="selOptions" class="selectpicker show-tick form-control">
            <option disabled selected value>--选择类型--</option>
            <option value="1">矢量面（默认）</option>
            <option value="2">矢量面（贴地）</option>
            <option value="3">KML矢量面（贴地）</option>
            <option value="4">KML矢量面（贴对象）</option>
        </select>
    </div>
    <script>
    	function onload(Cesium) {
            var viewer = new Cesium.Viewer('cesiumContainer',{
                sceneModePicker:true,
                navigation:false
            });
            
            var length = 300;
    
            var startLon =-20;
            var endLon = 700;
    
            var lat = 0;
    
            var glowingLine = viewer.entities.add({
                name : 'Glowing blue line on the surface',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray([startLon, lat,
                                                                    endLon, lat]),
                    width : 10,
                    //followSurface : true,
                    material : new Cesium.PolylineGlowMaterialProperty({
                        glowPower : 0.2,
                        color : Cesium.Color.YELLOW
                    })
                }
            });
    
            /
            Cesium.Entity.prototype.myListener = function(nStage) {
                var billboard = this.billboard;
                billboard.color = new Cesium.Color(1,1, 0, nStage);
            }
            
            
            var pointLineArray = [];
            var entityArray = [];
            for (var i = 0; i < length; ++i) {
                var evt = new Cesium.Event();
                var animationObj = {
                    type: 'time',
                    stepsRange: {
                        start: 0,
                        end: 300
                    },
                    trails: 30,
                    duration: 50,
                    event:evt
                };
                var lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
                entityArray[i] = viewer.entities.add({
                    position : Cesium.Cartesian3.fromDegrees(lon, lat),
                    nameID:i,
                    availability : new Cesium.TimeIntervalCollection(null,animationObj),
                    billboard :{
                        image : './images/point.png',
                        width:32,
                        height:32,
                        color :new Cesium.Color(1, 1, 0, 1)
                    }
                });
                evt.addEventListener(Cesium.Entity.prototype.myListener, entityArray[i]);
            }
    
            var redLine = viewer.entities.add({
                name : 'Red line on the surface',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray([-55, 35,
                                                                    -165, 35]),
                    width : 10,
                    material : Cesium.Color.RED
                }
            });
    
            var glowingLine = viewer.entities.add({
                name : 'Glowing blue line on the surface',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray([-35, 37,
                                                                    -175, 37]),
                    width : 10,
                    material : new Cesium.PolylineGlowMaterialProperty({
                        glowPower : 0.2,
                        color : Cesium.Color.BLUE
                    })
                }
            });
    
            var orangeOutlined = viewer.entities.add({
                name : 'Orange line with black outline at height and following the surface',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArrayHeights([-65, 39, 350000,
                                                                        -105, 39, 350000]),
                    width : 10,
                    material : new Cesium.PolylineOutlineMaterialProperty({
                        color : Cesium.Color.ORANGE,
                        outlineWidth : 2,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });
    
            var purpleArrow = viewer.entities.add({
                name : 'Purple straight arrow at height',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 63, 500000,
                                                                        -125, 43, 500000]),
                    width : 10,
                    followSurface : false,
                    material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
                }
            });
    
            var dashedLine = viewer.entities.add({
                name : 'Blue dashed line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 85, 500000,
                                                                        -125, 65, 500000]),
                    width : 7,
                    material : new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.CYAN
                    })
                }
            });
    
            var postion = [-80, 70,-130, 45];
            var dynamicLine = viewer.entities.add({
                name : 'RED dynamic line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray(postion),
                    width : 10,
                    hMax:200000,
                    material : new Cesium.PolylineDynamicMaterialProperty({
                        color : Cesium.Color.RED,
                        outlineWidth : 0,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });
            var dynamicLine2 = viewer.entities.add({
                name : 'ORANGE dynamic line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray(postion),
                    width : 5,
                    hMax:40000,
                    material : new Cesium.PolylineDashMaterialProperty({
                        color : Cesium.Color.ORANGE,
                        outlineWidth : 0,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });
            var dynamicLine3 = viewer.entities.add({
                name : 'Yellow dynamic line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray(postion),
                    width : 5,
                    hMax:600000,
                    material : new Cesium.PolylineDashMaterialProperty({
                        color : Cesium.Color.YELLOW,
                        outlineWidth : 0,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });
            var dynamicLine4 = viewer.entities.add({
                name : 'GREEN dynamic line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray(postion),
                    width : 5,
                    hMax:80000,
                    material : new Cesium.PolylineDashMaterialProperty({
                        color : Cesium.Color.GREEN,
                        outlineWidth : 0,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });
            var dynamicLine5 = viewer.entities.add({
                name : 'BLUE dynamic line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray(postion),
                    width : 5,
                    hMax:1000000,
                    material : new Cesium.PolylineDashMaterialProperty({
                        color : Cesium.Color.BLUE,
                        outlineWidth : 0,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });
            var dynamicLine6 = viewer.entities.add({
                name : 'CYAN dynamic line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray(postion),
                    width : 5,
                    hMax:1200000,
                    material :new Cesium.PolylineDashMaterialProperty({
                        color : Cesium.Color.CYAN,
                        outlineWidth : 0,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });
            var dynamicLine7 = viewer.entities.add({
                name : 'purple dynamic line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArray(postion),
                    width : 5,
                    hMax:1400000,
                    material : new Cesium.PolylineDashMaterialProperty({
                        color : Cesium.Color.PURPLE,
                        outlineWidth : 0,
                        outlineColor : Cesium.Color.BLACK
                    })
                }
            });
    
            viewer.zoomTo(viewer.entities);
            $('#loadingbar').remove();
        }
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/0c244f324fd74124a5d41515a6c283d8.png
[Link 1]: http://support.supermap.com.cn:8090/webgl/download.html
[20190712101804156.png]: /images/20210725/3ae82efb067a4605ae57afa54a4da34d.png
[http_support.supermap.com.cn_8090_webgl_Build_Documentation_index.html]: http://support.supermap.com.cn:8090/webgl/Build/Documentation/index.html
[http_support.supermap.com.cn_8090_webgl_examples_editor.html_Polyline]: http://support.supermap.com.cn:8090/webgl/examples/editor.html#Polyline