Deck.gl 全球建议

Question

我只是想知道是否有人可以提供在 Deck.gl 中使用的地球仪示例，它是真实的地球仪还是只是视图。因为我希望能够查看地球仪，所以我尝试使用它，但这给我留下了一个静态地图作为背景和一个全局视图放在上面，这不是我想要的。

Answer 1

我在 deck.gl 网站上找到了地球视图的示例，我更改了代码以利用 React，这似乎工作得很好。

import React from 'react'
import {Deck, _GlobeView as GlobeView} from '@deck.gl/core';
import {SolidPolygonLayer, GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
import { DeckGL } from 'deck.gl';

// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const COUNTRIES =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'; //eslint-disable-line
const AIR_PORTS =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

const INITIAL_VIEW_STATE = {
  latitude: 50,
  longitude: 50,
  zoom: 0
};

export function Globe() {

    return (
        <DeckGL 
            views={ new GlobeView()}
            initialViewState={INITIAL_VIEW_STATE}
            controller={true}
            layers= {[
                // A GeoJSON polygon that covers the entire earth
                // See /docs/api-reference/globe-view.md#remarks
                new SolidPolygonLayer({
                    id: 'background',
                    data: [
                        // prettier-ignore
                        [[-180, 90], [0, 90], [180, 90], [180, -90], [0, -90], [-180, -90]]
                    ],
                    opacity: 0.5,
                    getPolygon: d => d,
                    stroked: false,
                    filled: true,
                    getFillColor: [32, 201, 218]
                }),
                new GeoJsonLayer({
                    id: 'base-map',
                    data: COUNTRIES,
                    // Styles
                    stroked: true,
                    filled: true,
                    lineWidthMinPixels: 2,
                    getLineColor: [35, 107, 19],
                    getFillColor: [41, 156, 22]
                }),
                new GeoJsonLayer({
                    id: 'airports',
                    data: AIR_PORTS,
                    // Styles
                    filled: true,
                    pointRadiusMinPixels: 2,
                    pointRadiusScale: 2000,
                    getRadius: f => 11 - f.properties.scalerank,
                    getFillColor: [200, 0, 80, 180],
                    // Interactive props
                    pickable: true,
                    autoHighlight: true,
                    onClick: info =>
                        // eslint-disable-next-line
                        info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
                }),
                new ArcLayer({
                    id: 'arcs',
                    data: AIR_PORTS,
                    dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
                    // Styles
                    getSourcePosition: f => [-0.4531566, 51.4709959], // London
                    getTargetPosition: f => f.geometry.coordinates,
                    getSourceColor: [0, 128, 200],
                    getTargetColor: [200, 0, 80],
                    getWidth: 1
                })
            ]}
        />   
    )
}

Deck.gl 全球建议

Deck.gl globe advice

reactjs

deck.gl

react-map-gl