当前位置: 首页 > 工具软件 > deck.gl > 使用案例 >

deck.gl实现多边形图层绘制

谭越
2023-12-01

最近在项目中需要用到地图,并且需要在上面绘制图层,这篇文章来记录如何利用deck.gl实现图层的绘制功能。
代码参考deck.gl官网api写的

主要代码:

在创建多边形图层前,需要先将多边形图层的数据转换成geoJson格式的数据

//geoJson格式的多边形
import DeckGL from '@deck.gl/react';
import {PolygonLayer} from '@deck.gl/layers';
function App() {

  let listData= [
            {
                geometry: {
                    type: "Polygon",
                    coordinates: [
                    [113.7982, 22.6572],
 					[113.8181, 22.6489],
					[113.8342, 22.6242],
					[113.8213, 22.6119],
					[113.8081, 22.6149],
					[113.786, 22.6545],
					[113.7982, 22.6572]],
                },
                properties: {}
            }
        ]
let listDataVOS = new PolygonLayer({//创建多边形图层
                    id: 'PolygonLayer1',
                    data: listData,
                    pickable: true,
                    stroked: true,
                    filled: true,
                    wireframe: true,
                    lineWidthMinPixels: 1,
                    getPolygon: d => {
                        return d.geometry.coordinates;
                    },
                    getFillColor: [230, 0, 18, 20],
                    getLineColor: [230, 0, 18, 255],
                    getLineWidth: 3,

                });
                
  return <DeckGL viewState={viewState}
    layers={[listDataVOS ]}
    getTooltip={({object}) => object && `${object.zipcode}\nPopulation: ${object.population}`} />;
}

             
}    
 类似资料: