最近在项目中需要用到地图,并且需要在上面绘制图层,这篇文章来记录如何利用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}`} />;
}
}