fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<html>
<head>
    <meta charset='utf-8'/>
    <title data-i18n="resources.title_flightPath"></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" include="echarts,echarts-gl" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script type="text/javascript">
    // 数据来自 https://uber.github.io/deck.gl/#/examples/core-layers/line-layer
    var data;
    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
        "<a href='https://echarts.baidu.com' target='_blank'>© 2018 " + resources.title_3baidu + " ECharts Echarts-gl</a>";
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var tileURL = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}";
    var dataFile = "../data/flightpath.txt";

    var myChart = echarts.init(document.getElementById('map'));
    //获取mapbox对象


    $.get(dataFile, function (text) {

        var data = decodeFlightPathData(text);

        var dataAll = [];
        for (var i = 0; i < 4; i++) {
            dataAll = dataAll.concat(data.map(function (item) {
                return {
                    name: item.name,
                    coords: item.coords.map(function (coord) {
                        return coord.slice();
                    })
                };
            }));
        }

        myChart.setOption({
            mapbox: {
                center: [0, 51.5],
                zoom: 8,
                pitch: 60,
                altitudeScale: 5,
                style: {
                    "version": 8,
                    "sources": {
                        "raster-tiles": {
                            "attribution": attribution,
                            "type": "raster",
                            "tiles": [tileURL],
                            "tileSize": 256,
                        },
                    },
                    "layers": [{
                        "id": "simple-tiles",
                        "type": "raster",
                        "source": "raster-tiles",
                        "minzoom": 0,
                        "maxzoom": 22
                    }]
                },
                postEffect: {
                    enable: true,
                    bloom: {
                        intensity: 0.4
                    }
                }
            },
            series: [{
                type: 'lines3D',

                coordinateSystem: 'mapbox',

                effect: {
                    show: true,
                    constantSpeed: 40,
                    trailWidth: 2,
                    trailLength: 0.15,
                    trailOpacity: 1
                },

                blendMode: 'lighter',

                polyline: true,

                lineStyle: {
                    width: 1,
                    color: 'rgb(50, 60, 170)',
                    opacity: 0.1
                },

                data: dataAll
            }]

        });

        window.addEventListener('keydown', function () {
            myChart.dispatchAction({
                type: 'lines3DToggleEffect',
                seriesIndex: 0
            });
        });

        //获取mapbox对象
        if (myChart.getModel()) {
            var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
            mapbox.addControl(new mapboxgl.NavigationControl(), 'top-left');
        }

    });


    function decodePolyline(str, precision) {
        var index = 0;
        var lat = 0;
        var lng = 0;
        var coordinates = [];
        var shift = 0;
        var result = 0;
        var byte = null;
        var latitude_change;
        var longitude_change;
        var factor = Math.pow(10, precision || 5);
        while (index < str.length) {
            byte = null;
            shift = 0;
            result = 0;

            do {
                byte = str.charCodeAt(index++) - 63;
                result |= (byte & 0x1f) << shift;
                shift += 5;
            } while (byte >= 0x20);

            latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));

            shift = result = 0;

            do {
                byte = str.charCodeAt(index++) - 63;
                result |= (byte & 0x1f) << shift;
                shift += 5;
            } while (byte >= 0x20);

            longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));

            lat += latitude_change;
            lng += longitude_change;

            coordinates.push([lng / factor, lat / factor]);
        }

        return coordinates;
    }

    function decodeFlightPathData(text) {
        var lines = text.split('\n');

        var result = [];

        lines.forEach(function (line) {

            if (!line) {
                return;
            }

            var parts = line.split('\t');
            var coords0 = parts[2].split('\x01').map(function (str) {
                return decodePolyline(str, 5)
            });
            var coords1 = parts[3].split('\x01').map(function (str) {
                return decodePolyline(str, 1)
            });

            var coords = [];
            coords0.forEach(function (lineStr, i) {
                for (var j = 1; j < lineStr.length; j++) {
                    var prevPt0 = coords0[i][j - 1],
                        prevPt1 = coords1[i][j - 1],
                        currPt0 = coords0[i][j],
                        currPt1 = coords1[i][j];

                    coords.push(
                        [prevPt0[0], prevPt0[1], prevPt1[0]],
                        [currPt0[0], currPt0[1], currPt1[0]]
                    );
                }
            });

            result.push({
                name: parts[0],
                country: parts[1],
                coords: coords
            });
        });
        return result;
    }

</script>
</body>
</html>