Deck.gl学习笔记（三）：非地理空间坐标系下的简单使用

因为公司项目需求的缘故，所以开发在不使用经纬度的情况下进行视图更新渲染。

在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不需要传经纬度坐标。