in packages/layers/geojson/src/LineString/LineStringLayer.ts [48:157]
constructor(props: OptionalDefault<LineStringProps, typeof defaultProps> = {}) {
super({
...defaultProps,
...props,
})
this.addEventListener('init', (e) => {
const polaris = e.polaris
const projection = e.projection
const timeline = e.timeline
this.listenProps(
[
'data',
'baseAlt',
'level',
'pointSize',
'texture',
'usePerspective',
'useColors',
'dynamic',
],
() => {
const data: FeatureCollection<any> | undefined = this.getProps('data')
const baseAlt = this.getProps('baseAlt')
if (!data || !Array.isArray(data.features)) {
return
}
// Recreation of gline
if (this.gline) {
this.group.remove(this.gline)
}
const textureURL = this.getProps('texture')
const texture = textureURL
? specifyTexture({
image: { uri: textureURL },
sampler: undefined,
})
: undefined
this.gline = new GLine({
level: this.getProps('level'),
lineWidth: this.getProps('lineWidth'),
pointSize: this.getProps('pointSize'),
color: new Color(this.getProps('color')),
opacity: this.getProps('opacity'),
texture: texture,
resolution: {
x: polaris.canvasWidth ?? polaris.width,
y: polaris.canvasHeight ?? polaris.height,
},
usePerspective: this.getProps('usePerspective'),
useColors: this.getProps('useColors'),
dynamic: this.getProps('dynamic'),
})
this.mesh = this.gline
this.group.add(this.mesh)
// Data prep
const positions: number[][] = []
// 拍平得到lineString的数组
const flattened = flatten(data)
// 删除空geometry
flattened.features = flattened.features.filter((i) => {
return i.geometry
})
flattened.features.forEach((feature: any) => {
const geom: any = getGeom(feature)
if (geom) {
const positionsSub = featureToLinePositions(feature, projection, baseAlt)
if (positionsSub) {
positionsSub.forEach((sub) => {
positions.push(sub)
})
}
}
})
this.gline.geometry.updateData({
positions: positions,
})
}
)
this.listenProps(['color', 'opacity', 'lineWidth'], () => {
if (this.gline) {
this.gline.material.config['color'] = new Color(this.getProps('color'))
this.gline.material.config['opacity'] = this.getProps('opacity')
this.gline.material.config['lineWidth'] = this.getProps('lineWidth')
}
})
this.onViewChange = (cameraProxy, polaris) => {
if (this.gline) {
const p = polaris as Polaris
const w = p.canvasWidth
const h = p.canvasHeight
const originRes = this.gline.material.config['resolution']
if (originRes.x !== w || originRes.y !== h) {
this.gline.material.config['resolution'] = {
x: p.canvasWidth,
y: p.canvasHeight,
}
}
}
}
})
}