Geojson 地理

说明

用于绘制线条，支持实线、虚线。

安装

npm install @poggi/three-geojson
pnpm add @poggi/three-geojson
yarn add @poggi/three-geojson

基本用法

loading

侧面材质动画

框架提供了两种内置侧面材质动画，可自行选择

loading

边界

loading

自定义子集

框架提供了addChilds方法，它会返回各个行政区域对象，你可以为它添加自定义的子集，例如行政区域名称

loading

过渡动画

推荐使用gsap来做动画操作

loading

交互

推荐使用three.interactive进行交互

注意：three.interactive扩展了Object3D的addEventListener方法，但是TS无法正确识别，需要我们手动扩展类型说明，详细看object-interactive.d.ts

loading

API

Methods

constructor(planeMaterial: Material, options: IGeojsonConstructorOption)

构造函数

addOutline(params: IGeojsonOutlineParams)

添加轮廓

addChilds(params: IGeojsonChildParams)

添加子集

addBoundary(params: IGeojsonBoundaryParams)

添加边界

Interfaces

IGeojsonConstructorOption

属性名	说明	类型	是否必选	默认值
baseRenderOrder	基础面渲染层级	number	否	0
geojson	geojson数据集	FeatureCollection	是	-
scale	缩放尺寸	number	否	80
center	计算中心	[number, number]	否	[0,0]
depth	挤出深度	number	否	1
sideType	侧面材质类型	SideMaterialType	否	ColorSweepSideMaterial
sideOption	侧面材质参数	IColorSweepMaterialOption | IMapSweepMaterialOption	否	ColorSweepSideMaterial

IColorSweepMaterialOption

属性名	说明	类型	是否必选	默认值
color1	颜色1	Color	否	#3fdef3
color2	颜色2	Color	否	#1668c6
sweepColor	扫光颜色	Color	否	#90f2ff
sweepSpeed	扫光速度	number	否	0.01
sweepLength	扫光长度	number	否	0.5
sweepInterval	扫光间隔	number	否	1

IMapSweepMaterialOption

属性名	说明	类型	是否必选	默认值
map	贴图资源	Texture	否	-
color1	颜色1	Color	否	#3fdef3
color2	颜色2	Color	否	#3fdef3
sweepSpeed	扫光速度	number	否	0.01

IGeojsonOutlineParams

属性名	说明	类型	是否必选	默认值
geojson	geojson数据集	FeatureCollection	是	-
drawFunc	绘制回调函数	drawFunc: (points: number[], pointsV: Vector3[]) => void	是	-

IGeojsonChildParams

属性名	说明	类型	是否必选	默认值
geojson	geojson数据集	FeatureCollection	是	-
drawFunc	绘制回调函数	drawFunc: (data: IDrawChild) => void	是	-

IDrawChild

属性名	说明	类型	是否必选	默认值
parent	父级	Object3D	是	-
center	图形中心	Vector3	是	-
centroid	省会位置	Vector3	是	-
info	更多详细信息	any	是	-

IGeojsonBoundaryParams

属性名	说明	类型	是否必选	默认值
geojson	geojson数据集	FeatureCollection	是	-
drawFunc	绘制回调函数	drawFunc: (parent: Object3D, points: number[], pointsV: Vector3[]) => void	是	-