五彩线-源代码示例 运行 重置

                    <!DOCTYPE html>

<html>
<head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
    <script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .bmgl-widget-credits{display:none}
    </style>
    <title>part_test</title>
</head>
<body>

<div id='container'></div>

<script>
    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.googlemap-satellite',requestRenderMode:false,});
    var lat = 30.598026044;
    var lon = 114.302312702;
    viewer.scene.globe.depthTestAgainstTerrain = true;
    //取消双击事件
    viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    //设置homebutton的位置
    bmgl.Camera.DEFAULT_VIEW_RECTANGLE =
        bmgl.Rectangle.fromDegrees(lon - 1, lat - 1, lon + 1, lat + 1);
    //设置初始位置
    viewer.camera.setView({
        destination: bmgl.Cartesian3.fromDegrees(lon, lat, 300000)
    });


    /*
      流纹纹理线
      color 颜色
      duration 持续时间 毫秒
   */
    function PolylineTrailLinkMaterialProperty(color, duration) {
        this._definitionChanged = new bmgl.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this._time = (new Date()).getTime();
    }

    bmgl.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
            get: function () {
                return false;
            }
        },
        definitionChanged: {
            get: function () {
                return this._definitionChanged;
            }
        },
        color: bmgl.createPropertyDescriptor('color')
    });
    PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
        return 'PolylineTrailLink';
    }
    PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
        if (!bmgl.defined(result)) {
            result = {};
        }
        result.color = bmgl.Property.getValueOrClonedDefault(this._color, time, bmgl.Color.WHITE, result.color);
        result.image = bmgl.Material.PolylineTrailLinkImage;
        result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
        return result;
    }
    PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
        return this === other ||
            (other instanceof PolylineTrailLinkMaterialProperty &&
                bmgl.Property.equals(this._color, other._color))
    }
    bmgl.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
    bmgl.Material.PolylineTrailLinkType = 'PolylineTrailLink';
    bmgl.Material.PolylineTrailLinkImage = "/bmgl/images/colors.png";
    bmgl.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                                                      {\n\
                                                           czm_material material = czm_getDefaultMaterial(materialInput);\n\
                                                           vec2 st = materialInput.st;\n\
                                                           vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
                                                           material.alpha = colorImage.a * color.a;\n\
                                                           material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
                                                           return material;\n\
                                                       }";
    bmgl.Material._materialCache.addMaterial(bmgl.Material.PolylineTrailLinkType, {
        fabric: {
            type: bmgl.Material.PolylineTrailLinkType,
            uniforms: {
                color: new bmgl.Color(1.0, 0.0, 0.0, 0.5),
                image: bmgl.Material.PolylineTrailLinkImage,
                time: 0
            },
            source: bmgl.Material.PolylineTrailLinkSource
        },
        translucent: function (material) {
            return true;
        }
    });

    function parabolaEquation(options, resultOut) {
        //方程 y=-(4h/L^2)*x^2+h h:顶点高度 L:横纵间距较大者
        var h = options.height && options.height > 5000 ? options.height : 5000;
        var L = Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2.lat) ? Math.abs(options.pt1.lon - options.pt2.lon) : Math.abs(options.pt1.lat - options.pt2.lat);
        var num = options.num && options.num > 50 ? options.num : 50;
        var result = [];
        var dlt = L / num;
        if (Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2.lat)) {//以lon为基准
            var delLat = (options.pt2.lat - options.pt1.lat) / num;
            if (options.pt1.lon - options.pt2.lon > 0) {
                dlt = -dlt;
            }
            for (var i = 0; i < num; i++) {
                var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);
                var lon = options.pt1.lon + dlt * i;
                var lat = options.pt1.lat + delLat * i;
                result.push([lon, lat, tempH]);
            }
        } else {//以lat为基准
            var delLon = (options.pt2.lon - options.pt1.lon) / num;
            if (options.pt1.lat - options.pt2.lat > 0) {
                dlt = -dlt;
            }
            for (var i = 0; i < num; i++) {
                var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);
                var lon = options.pt1.lon + delLon * i;
                var lat = options.pt1.lat + dlt * i;
                result.push([lon, lat, tempH]);
            }
        }
        if (resultOut != undefined) {
            resultOut = result;
        }
        return result;
    }
    var center = {lon: 114.302312702, lat: 30.598026044}
    var cities = [{"lon": 115.028495718, "lat": 30.200814617},
        {"lon": 110.795000473, "lat": 32.638540762},
        {"lon": 111.267729446, "lat": 30.698151246},
        {"lon": 112.126643144, "lat": 32.058588576},
        {"lon": 114.885884938, "lat": 30.395401912},
        {"lon": 112.190419415, "lat": 31.043949588},
        {"lon": 113.903569642, "lat": 30.932054050},
        {"lon": 112.226648859, "lat": 30.367904255},
        {"lon": 114.861716770, "lat": 30.468634833},
        {"lon": 114.317846048, "lat": 29.848946148},
        {"lon": 113.371985426, "lat": 31.704988330},
        {"lon": 109.468884533, "lat": 30.289012191},
        {"lon": 113.414585069, "lat": 30.368350431},
        {"lon": 112.892742589, "lat": 30.409306203},
        {"lon": 113.160853710, "lat": 30.667483468},
        {"lon": 110.670643354, "lat": 31.748540780}]
    var material = new bmgl.PolylineTrailLinkMaterialProperty(bmgl.Color.ORANGE, 3000);
    for (var j = 0; j < cities.length; j++) {
        var points = parabolaEquation({pt1: center, pt2: cities[j], height: 50000, num: 100});
        var pointArr = [];
        for (var i = 0; i < points.length; i++) {
            pointArr.push(points[i][0], points[i][1], points[i][2]);
        }
        viewer.entities.add({
            name: 'PolylineTrailLink' + j,
            polyline: {
                positions: bmgl.Cartesian3.fromDegreesArrayHeights(pointArr),
                width: 2,
                material: material
            }
        });
    }

    viewer.entities.add({
        position: bmgl.Cartesian3.fromDegrees(center.lon, center.lat, 1),
        point: {
            pixelSize: 6,
            color: bmgl.Color.BLUE
        }
    });

    for (var i = 0; i < cities.length; i++) {
        viewer.entities.add({
            position: bmgl.Cartesian3.fromDegrees(cities[i].lon, cities[i].lat, 1),
            point: {
                pixelSize: 6,
                color: bmgl.Color.RED
            }
        });
    }
    viewer.camera.flyTo({
        destination:new bmgl.Cartesian3(-2431832.05398568,5312676.685486797,2943588.1345312647),
        orientation:{
            "heading":6.0061437086517575,"roll":0.0000660000291583529,"pitch":-0.3938144380432427
        }
    });
</script>
</body>
</html>                                                                                                                                                                    
源码