【GIS】Cesium绘制轨迹线

1、代码

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

        </script>
        <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>流线</title>
        <!-- 定义变量-->
        <script type="text/javascript">

        </script>


        <script type="text/javascript" src="../js/lib/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="../js/lib/echarts/echarts.js"></script>

        <!-- 三维 -->
        <link href="../js/lib/supermap/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <link href="../js/lib/supermap/css/pretty.css" rel="stylesheet">
        <link href="../js/lib/supermap/css/info-window.css" rel="stylesheet">


        <link href="../js/lib/layer/theme/default/layer.css" rel="stylesheet" />
        <link href="../js/lib/layer/theme/retina/retina.css" rel="stylesheet" />
        <link href="../js/lib/layer/theme/mars/layer.css" rel="stylesheet" />
        <script src="../js/lib/layer/layer.js"></script>



        <style>
            html, body, #cesiumContainer {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                }
            
                #menu {
                    position: absolute;
                    top: 80px;
                    left: 10px;
                    z-index: 999;
                }
            
                /**隐藏超图logo*/
                .cesium-credit-image,
                .cesium-credit-expand-link {
                    display: none !important;
                }
            
                .cesium-widget-credits {
                    display: none !important;
                }
            </style>

    </head>
    <body>

        <!-- 三维场景-->
        <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>

        <script type="text/javascript" src="../js/lib/supermap10/examples/js/supermap/SuperMap-7.1-11828.js"></script>
        <script type="text/javascript" src="../js/lib/supermap10/examples/js/Convert.js"></script>
        <script type="text/javascript" src="../js/lib/supermap10/examples/js/require.min.js" data-main="../js/lib/supermap10/examples/js/main.js"></script>
        <script type="text/javascript" src="../js/lib/supermap10/examples/js/config.js"></script>



        <script type="text/javascript" src="../js/lib/supermap10/examples/js/traffic.js"></script>
        <script type="text/javascript" src="../js/lib/supermap10/examples/js/curve.js"></script>

        <!-- <script type="text/javascript" src="../js/lib/supermap10/build/Cesium/Cesium.js"></script> -->

        <script src="../js/lib/cesiumplugins/ImageryProvider-WebExtend.js"></script>

        <script src="../js/gis/gps.js"></script>

        <script>
            function loadDynamicLine() {

                $.getJSON('../data/XXX.json', function(rs) {
                    var animationObj = {
                        stepsRange: {
                            start: 0,
                            end: 50
                        },
                        trails: 20,
                        duration: 175
                    };

                    var _range = animationObj.stepsRange.end - animationObj.stepsRange.start;

                    var entityArray = [];
                    var curLineArray = [];

                    var linecolor = new Cesium.Color(53 / 255, 57 / 255, 255 / 255, 0.8); // 线颜色
                    var outline = new Cesium.Color(65 / 255, 105 / 255, 225 / 255, 0.8); // 线框颜色
                    var color = new Cesium.Color(255 / 255, 250 / 255, 250 / 255, 0.2); // 点颜色


                    var maxLength = 0;

                    var proj = new Cesium.WebMercatorProjection();
                    var fRatio = 180 / Math.PI;
                    var height = 0;

                    for (var i = 0; i < rs.features.length; i++) {
                        var item = rs.features[i].geometry.coordinates;

                        if (item.length > maxLength) {
                            maxLength = item.length;
                        }

                        var linePos = [];
                        for (j = 0; j < item.length; j++) {

                            var cartographic = Cesium.Cartographic.fromDegrees(item[j][0], item[j][1], 0);

                            var lat = cartographic.latitude * fRatio;
                            var lon = cartographic.longitude * fRatio;

var posReal = {};
                            linePos.push(posReal.lon);
                            linePos.push(posReal.lat);
                            linePos.push(height);

                            var entity = viewer.entities.add({
                                position: Cesium.Cartesian3.fromDegrees(posReal.lon, posReal.lat, height),
                                nameID: j,
                                billboard: {
                                    image: '../img/gis/car.png',
                                    width: 5,
                                    height: 5,
                                    color: color
                                }
                            });
                            entity.isAvailable = function(obj) {
                                return function(currentTime) {
                                    if (!Cesium.defined(currentTime)) {
                                        throw new Cesium.DeveloperError('time is required.');
                                    }

                                    var nMS = Cesium.JulianDate.toDate(currentTime).getTime() / animationObj.duration;
                                    var time = (nMS % _range + animationObj.stepsRange.start);

                                    var trails = trails || 10;
                                    if (time && obj.nameID > time - trails && obj.nameID < time) {
                                        obj.billboard.color._value.alpha = 0.8 * (obj.nameID - time + trails) / trails;
                                        return true;
                                    } else {
                                        return false;
                                    }
                                }
                            }(entity);
                            entityArray.push(entity);
                        }

                        curLineArray[i] = viewer.entities.add({
                            polyline: {
                                positions: Cesium.Cartesian3.fromDegreesArrayHeights(linePos),
                                width: 2,
                                material: new Cesium.PolylineOutlineMaterialProperty({
                                    color: linecolor,
                                    outlineWidth: 0.1,
                                    outlineColor: outline
                                })
                            }
                        });
                    }

                })
            }
        </script>

        <script desc="页面加载">
            var lat = XX;
            var lon = YY;

            var viewer = null;
            var scene = null;
            var widget = null;
            var camera = null;


            function onload() {
                var GoogleMap = ImageryProviderWebExtendTool.createGoogleMapsByUrl(Cesium, {
                    url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
                });

                viewer = new Cesium.Viewer('cesiumContainer', {
                    imageryProvider: GoogleMap,
                    selectionIndicator: true,
                    animation: false,
                    baseLayerPicker: false,
                    geocoder: false,
                    timeline: false,
                    sceneModePicker: true,
                    navigationHelpButton: false,
                    infoBox: true,
                    fullscreenButton: true
                });

                // 三维图形对象和状态的容器
                scene = viewer.scene;
                viewer.scene.fxaa = false;

                widget = viewer.cesiumWidget;
                // 相机类
                camera = scene.camera;
                //关闭深度检测
                scene.globe.depthTestAgainstTerrain = false;

                //取消双击事件
                viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                //设置homebutton的位置
                Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
                    Cesium.Rectangle.fromDegrees(lon - 1, lat - 1, lon + 1, lat + 1); //Rectangle(west, south, east, north)
                //设置初始位置
                viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(lon, lat, 10000)
                });
                viewer.imageryLayers.get(0).brightness = 0.4;
                loadDynamicLine();
            }
        </script>



</html>

2、效果

 

posted @ 2020-05-29 09:15  咸鱼翻身  阅读(12868)  评论(1)    收藏  举报