GIS画线-源代码示例 运行 重置

                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>

<body>
    <div id="container"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
</body>
<script>

    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container');
    viewer.clock.shouldAnimate = true;

    //起点经纬度
    var startLatitude = 35;
    var startLongitude = -120;
    var endLongitude;
    //立即执行
    var startTime = bmgl.JulianDate.now();

    // Add a polyline to the scene. Positions are dynamic.
    var isConstant = false;
    //添加线段
    var redLine = viewer.entities.add({
        polyline: {
            // This callback updates positions each frame.
            positions: new bmgl.CallbackProperty(function (time, result) {
                endLongitude =
                    startLongitude +
                    0.001 * bmgl.JulianDate.secondsDifference(time, startTime);
                return bmgl.Cartesian3.fromDegreesArray(
                    [startLongitude, startLatitude, endLongitude, startLatitude],
                    bmgl.Ellipsoid.WGS84,
                    result
                );
            }, isConstant),
            width: 5,
            material: bmgl.Color.RED,
        },
    });

    var startCartographic = bmgl.Cartographic.fromDegrees(
        startLongitude,
        startLatitude
    );

    // use scratch object to avoid new allocations per frame.
    var endCartographic = new bmgl.Cartographic();
    var scratch = new bmgl.Cartographic();
    var geodesic = new bmgl.EllipsoidGeodesic();

    // Calculate the length of the line
    function getLength(time, result) {
        // Get the end position from the polyLine's callback.
        var endPoint = redLine.polyline.positions.getValue(time, result)[1];
        endCartographic = bmgl.Cartographic.fromCartesian(endPoint);

        geodesic.setEndPoints(startCartographic, endCartographic);
        var lengthInMeters = Math.round(geodesic.surfaceDistance);
        return (lengthInMeters / 1000).toFixed(1) + " km";
    }

    function getMidpoint(time, result) {
        // Get the end position from the polyLine's callback.
        var endPoint = redLine.polyline.positions.getValue(time, result)[1];
        endCartographic = bmgl.Cartographic.fromCartesian(endPoint);

        geodesic.setEndPoints(startCartographic, endCartographic);
        var midpointCartographic = geodesic.interpolateUsingFraction(
            0.5,
            scratch
        );
        return bmgl.Cartesian3.fromRadians(
            midpointCartographic.longitude,
            midpointCartographic.latitude
        );
    }

    // Label the polyline with calculated length.
    var label = viewer.entities.add({
        position: new bmgl.CallbackProperty(getMidpoint, isConstant),
        label: {
            // This callback updates the length to print each frame.
            text: new bmgl.CallbackProperty(getLength, isConstant),
            font: "20px sans-serif",
            pixelOffset: new bmgl.Cartesian2(0.0, 20),
        },
    });

    // Keep the view centered.
    viewer.trackedEntity = label;

</script>

</html>                                                        
源码