Deck.gl全球建议 - 编程之家

如何解决Deck.gl全球建议

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

解决方法

我在deck.gl网站上找到了globe视图的示例，我更改了代码以使用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,[180,-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,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,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',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,80],getWidth: 1
                })
            ]}
        />   
    )
}