fuyuhang
/
Project_yhfu
zrkadlo http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<html>

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title data-i18n="resources.title_echartsLinesMillions_railwaysWGS84"></title>
    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
    <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='mapbox-gl-enhance,echarts' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tiles": [host + '/iserver/services/map-world/rest/maps/World'],
                        "rasterSource":"iserver",
                        "tileSize": 256,
                    },
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 18
                }]
            },
            crs: mapboxgl.CRS.EPSG4326,
            center: [106, 37.94],
            zoom: 4,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: 'rgba(255,255,255,0.1)',
                    borderWidth: 1
                }
            },
            roam: true,
            silent: true
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        var echartslayer = new EchartsLayer(map);

        var CHUNK_COUNT = 19;

        function fetchData(idx) {
            if (idx > CHUNK_COUNT) {
                return;
            }
            var dataURL = "https://iclient.supermap.io/web/data/bigdata_railway_10w/data_" + idx + ".bin";
            var xhr = new XMLHttpRequest();
            xhr.open('GET', dataURL, true);
            xhr.responseType = 'arraybuffer';

            xhr.onload = function (e) {
                var rawData = new Float32Array(this.response);
                echartslayer.chart.appendData({
                    seriesIndex: 0,
                    data: rawData
                });

                fetchData(idx + 1);
            };

            xhr.send();
        }

        option = {
            progressive: 20000,
            GLMap: {
                roam: true
            },
            title: {
                top: '10px',
                text: '全国铁路网',
                subtext: '四百万点',
                left: 'center',
                textStyle: {
                    color: '#fff'
                },
                subtextStyle: {
                    color: '#fff'
                }
            },
            coordinateSystem: 'GLMap',
            series: [{
                type: 'lines',
                blendMode: 'lighter',
                coordinateSystem: 'GLMap',
                dimensions: ['value'],
                data: new Float64Array(),
                polyline: true,
                large: true,
                lineStyle: {
                    color: 'orange',
                    width: 2,
                    opacity: 0.3
                }
            }]
        };

        fetchData(0);
        echartslayer.chart.setOption(option);

    </script>
</body>

</html>