deckgl-triplayer流动效果

2021-07-07 15:01:30 阅读：251 来源： 互联网

标签：deckgl raster tiles const triplayer 流动 vendor time timestamps

效果:

html:

<html>

<head>
    <script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.4.0/dist.min.js"></script>

    <script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
    <link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />
</head>

<body style="margin: 0; padding: 0;">
    <div id="map" style="width: 100vw; height: 100vh"></div>
</body>

<script type="text/javascript">
    const LOOP_LENGTH = 1800;
    const ANIMATION_SPEED = 0.4;

    async function initialize() {
        deck.carto.setDefaultCredentials({
            username: 'public',
            apiKey: 'default_public',
        });

        // Fetch Data from CARTO
        const query = 'SELECT the_geom, vendor, timestamps FROM new_york_trips';
        const url = `https://public.carto.com/api/v2/sql?q=${query}&format=geojson`;
        const geojsonData = await fetch(url).then(response => response.json());
        // TripsLayer needs data in the following format
        const layerData = geojsonData.features.map(f => ({
            vendor: f.properties.vendor,
            timestamps: f.properties.timestamps,
            path: f.geometry.coordinates[0]
        }));

        const deckgl = new deck.DeckGL({
            container: 'map',
            mapStyle: {
                'version': 8,
                'sources': {
                    'raster-tiles': {
                        'type': 'raster',
                        'tiles': [
                            'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
                        ],
                        'tileSize': 256,
                        'attribution':
                            'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
                    }
                },
                'layers': [
                    {
                        'id': 'simple-tiles',
                        'type': 'raster',
                        'source': 'raster-tiles',
                        'minzoom': 0,
                        'maxzoom': 22
                    }
                ]
            },
            initialViewState: {
                longitude: -74,
                latitude: 40.73,
                zoom: 6,
                pitch: 45,
                bearing: 0
            },
            controller: true
        });

        let time = 0;

        function animate() {
            time = (time + ANIMATION_SPEED) % LOOP_LENGTH;
            window.requestAnimationFrame(animate);
        }

        setInterval(() => {
            deckgl.setProps({
                layers: [
                    new deck.TripsLayer({
                        id: 'trips-layer',
                        data: layerData,
                        getPath: d => d.path,
                        getTimestamps: d => d.timestamps,
                        getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
                        opacity: 0.3,
                        widthMinPixels: 2,
                        rounded: true,
                        trailLength: 180,
                        currentTime: time,
                        shadowEnabled: false
                    })
                ]
            });
        }, 50);

        window.requestAnimationFrame(animate);
    }

    initialize();
</script>

</html>

标签：deckgl,raster,tiles,const,triplayer,流动,vendor,time,timestamps
来源： https://www.cnblogs.com/dxy9527/p/14981495.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

deckgl-triplayer流动效果