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

最新推荐文章于 2022-06-27 10:51:38 发布

疆~

最新推荐文章于 2022-06-27 10:51:38 发布

阅读量686

点赞数

本文链接：https://blog.csdn.net/qq_40323256/article/details/95594241

版权

SuperMap iClient3D for Webgl 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

先看下效果图：

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

然后在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/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>

疆~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webgl中绘制起始点相同，弯曲程度不同的多条曲线

先看下效果图：首先，应该先去官网下载SuperMap iClient3D for WebGL（推荐选择：9D(2019) 正式版）然后在hbuilder中新建web项目，在项目中新建HTML文件，命名为“PolylineLiJiang”，在PolylineLiJiang.html中复制进去以下代码，然后导出PolylineLiJiang.html到刚刚下载并解压后的文件夹“exa...
复制链接

扫一扫