使用deck.gl在不同海拔的同一位置之间绘制弧线

Question

使用 Deck.GL 是否可以画一条连接两个坐标相同但高度不同的圆的圆弧，如下所示？:

Answer 1

您可以使用 ArcLayer：https://deck.gl/examples/arc-layer

const {DeckGL, ArcLayer} = deck;

const INITIAL_VIEW_STATE = {
    latitude: 27.9944024, 
    longitude: -81.7602544,
    zoom: 6,
    bearing: 0,
    pitch: 30
};

const myCustomStyle = {
    "version": 8,
    "sources": {
        "raster-tiles": {
            "type": "raster",
            "tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
            "tileSize": 256
        }
    },
    "layers": [{
        "id": "simple-tiles",
        "type": "raster",
        "source": "raster-tiles",
        "minzoom": 0,
        "maxzoom": 22
    }]
};

const arcData = [{
    sourcePosition: [ -80.1917902, 25.7616798 ], 
    targetPosition: [ -82.4571776, 27.950575 ] 
}];

const arcLayer = new ArcLayer({
    id: 'arc-layer',
    data: arcData,
    getSourcePosition: d => d.sourcePosition,
    getTargetPosition: d => d.targetPosition,
    getSourceColor: [0, 128, 200],
    getTargetColor: [200, 0, 80],
    getWidth: 3
});

new deck.DeckGL({
    mapboxApiAccessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
    mapStyle: myCustomStyle,
    initialViewState: INITIAL_VIEW_STATE,
    controller: true,
    layers: [arcLayer]
});

body {
    margin: 0;
}

#map {
    width: 100vw;
    height: 100vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>deck.gl with Arc Layer</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
</head>
<body>
    <div id="map"></div>
    <script src="script.js"></script>
</body>
</html>

使用deck.gl在不同海拔的同一位置之间绘制弧线

问题描述投票：0回答：1

1个回答

最新问题

使用deck.gl在不同海拔的同一位置之间绘制弧线

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1