因为公司项目需求的缘故,所以开发在不使用经纬度的情况下进行视图更新渲染。
在deck.gl中的视图类型可以分为以下几种:
因为前几种为地理空间坐标系,即使用经纬度为基础坐标,一般配合mapbox一起使用,而公司的需求为使用非地理空间坐标进行视图渲染。因此选择了orbitView。
在orbitView视角下简单创建一个长方体。
import React,{useState, useCallback,useEffect} from 'react';
import DeckGL from '@deck.gl/react';
import {SolidPolygonLayer} from '@deck.gl/layers';
// import type {PickingInfo} from '@deck.gl/core';
import {COORDINATE_SYSTEM,Viewport} from '@deck.gl/core';
import {OrthographicView,View,OrbitView} from '@deck.gl/core';
import './App.css'
const MAX_SIZE = 24;
const INITIAL_VIEW_STATE= {
target: [0, 0, 100],
// rotationX: 45,
rotationOrbit: 45,
// minZoom: 0,
maxZoom: 50,
// zoom: 10,
bearing: 45,
zoom: 0.1}
function App() {
const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
const onReset = useCallback(() => setViewState(INITIAL_VIEW_STATE), []);
const viewPort = new Viewport({width: 500, height: 500});
const layer = new SolidPolygonLayer({
id: 'SolidPolygonLayer',
data: [{
contour: 0,
population: 26599
},],
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
extruded: true,
wireframe: true,
// getPolygon: (d)=>[[-122.4, 37.7], [-122.4, 37.8], [-122.5, 37.8], [-122.5, 37.7], [-122.4, 37.7]],
getPolygon: (d)=>[[0,0], [0,200], [400,200], [400,0], [0,0]],
getElevation: (d) => 200,
getFillColor: (d) => [0,0,0,255],
getLineColor: [80, 80, 80],
pickable: true
});
return <>
<DeckGL
// initialViewState={{
// longitude: -122.4,
// latitude: 37.74,
// zoom: 11
// }}
// viewState={{id: 'SolidPolygonLayer',x:'50%',y:'0%',height:10}}
// viewState={{id: 'SolidPolygonLayer'}}
views={new OrbitView({id: '3d-scene', controller: true,orbitAxis: 'Y'})}
// views={new OrthographicView()}
// viewPort={viewPort}
controller
viewState={viewState}
onViewStateChange={e => setViewState(e.viewState)}
getTooltip={({object}) => object && `${object.zipcode}\nPopulation: ${object.population}`}
layers={[layer]}
/>
<button onClick={onReset}>Reset</button>
</>
}
export default App;
创建的长方体视图如下:
在这个例子中,使用了SolidPolygonLayer这个layer去创建长方体,主要通过getPolygon去构建视图。需要注意的是,使用OrbitView不需要传经纬度坐标。