in packages/layers/geojson/src/Polygon/PolygonLayer.ts [135:410]
private _init() {
this.watchProps(
['selectColor'],
() => {
const c = this.getProp('selectColor')
if (c) {
this.selectColor = new Color().set(c)
} else {
this.selectColor = undefined
}
},
{ immediate: true }
)
this.watchProps(
['hoverColor'],
() => {
const c = this.getProp('hoverColor')
if (c) {
this.hoverColor = new Color().set(c)
} else {
this.hoverColor = undefined
}
},
{ immediate: true }
)
// Calculate feature lnglat bbox and store
this.watchProps(
['data'],
() => {
let data = this.getProp('data')
if (!data) return
if (typeof data === 'string') {
data = JSON.parse(data)
}
const geojson = data as Exclude<PolygonLayerProps['data'], undefined | string>
if (geojson.type !== 'FeatureCollection' || !geojson.features || !geojson.features.length)
return
geojson.features.forEach((feature) => {
calcFeatureBounds(feature)
})
},
{ immediate: true }
)
this.watchProps(
[
'data',
'getFillColor',
'getThickness',
'baseAlt',
'getFillOpacity',
'transparent',
'doubleSide',
'enableExtrude',
'useTessellation',
'tessellation',
'selectLinesHeight',
'selectLineLevel',
'selectLineWidth',
'selectLineColor',
'hoverLineLevel',
'hoverLineWidth',
'hoverLineColor',
],
(e) => {
let data = this.getProp('data')
if (typeof data === 'string') {
data = JSON.parse(data) as FeatureCollection
}
const enableExtrude = this.getProp('enableExtrude')
const getColor = functionlize(this.getProp('getFillColor'))
const getOpacity = functionlize(this.getProp('getFillOpacity'))
const getThickness = enableExtrude ? functionlize(this.getProp('getThickness')) : () => 0
const baseAlt = this.getProp('baseAlt')
const transparent = this.getProp('transparent')
const doubleSide = this.getProp('doubleSide')
const useTessellation = this.getProp('useTessellation')
const tessellation = this.getProp('tessellation')
const genSelectLines = this.getProp('pickable')
const selectLinesHeight = this.getProp('selectLinesHeight')
const selectLineLevel = this.getProp('selectLineLevel')
const selectLineWidth = this.getProp('selectLineWidth')
const selectLineColor = this.getProp('selectLineColor')
const hoverLineLevel = this.getProp('hoverLineLevel')
const hoverLineWidth = this.getProp('hoverLineWidth')
const hoverLineColor = this.getProp('hoverLineColor')
const workersCount = this.getProp('workersCount')
if (!this.surfaceLayer) {
const surfaceLayer = new PolygonSurfaceLayer({
data,
getColor,
getThickness,
getOpacity,
transparent,
baseAlt,
doubleSide,
useTessellation,
tessellation,
genSelectLines,
selectLinesHeight,
selectLineLevel,
selectLineWidth,
selectLineColor,
hoverLineLevel,
hoverLineWidth,
hoverLineColor,
workersCount,
})
this.add(surfaceLayer)
this.surfaceLayer = surfaceLayer
return
}
// Update
if (e.initial) {
// Update all
this.surfaceLayer.setProps({
data,
getColor,
getThickness,
getOpacity,
transparent,
baseAlt,
doubleSide,
useTessellation,
tessellation,
genSelectLines,
selectLinesHeight,
selectLineLevel,
selectLineWidth,
selectLineColor,
hoverLineLevel,
hoverLineWidth,
hoverLineColor,
workersCount,
})
} else if (e.changedKeys.includes('data')) {
// Update props/data independently
this.surfaceLayer.setProps({
data,
getColor,
getThickness,
getOpacity,
transparent,
baseAlt,
doubleSide,
useTessellation,
tessellation,
genSelectLines,
selectLinesHeight,
selectLineLevel,
selectLineWidth,
selectLineColor,
hoverLineLevel,
hoverLineWidth,
hoverLineColor,
workersCount,
})
// .then(() => {
// this.surfaceLayer.updateData(data)
// })
} else {
// Update props only
this.surfaceLayer.setProps({
getColor,
getThickness,
getOpacity,
transparent,
baseAlt,
doubleSide,
useTessellation,
tessellation,
genSelectLines,
selectLinesHeight,
selectLineLevel,
selectLineWidth,
selectLineColor,
hoverLineLevel,
hoverLineWidth,
hoverLineColor,
workersCount,
})
}
},
{ immediate: true }
)
this.watchProps(
[
'data',
'getSideColor',
'getThickness',
'baseAlt',
'sideOpacity',
'transparent',
'doubleSide',
'enableExtrude',
],
(e) => {
let data = this.getProp('data')
if (typeof data === 'string') {
data = JSON.parse(data) as FeatureCollection
}
const enableExtrude = this.getProp('enableExtrude')
const getColor = functionlize(this.getProp('getSideColor'))
const getThickness = functionlize(this.getProp('getThickness'))
const opacity = this.getProp('sideOpacity')
const baseAlt = this.getProp('baseAlt')
const transparent = this.getProp('transparent')
const doubleSide = this.getProp('doubleSide')
if (enableExtrude) {
// `SideLayer` must be added first before `SurfaceLayer`
// It should be rendered before surface to get correct alpha blending result
if (!this.sideLayer) {
const sideLayer = new PolygonSideLayer({
data,
getColor,
getThickness,
opacity,
transparent,
baseAlt,
doubleSide,
})
this.add(sideLayer)
this.sideLayer = sideLayer
return
}
// Update
if (e.initial) {
// Update all
this.sideLayer.setProps({
data,
getColor,
getThickness,
opacity,
transparent,
baseAlt,
doubleSide,
})
} else if (e.changedKeys.includes('data')) {
// Update props/data independently
this.sideLayer.setProps({
getColor,
getThickness,
opacity,
transparent,
baseAlt,
doubleSide,
})
this.sideLayer.updateData(data)
} else {
// Update props only
this.sideLayer.setProps({
getColor,
getThickness,
opacity,
transparent,
baseAlt,
doubleSide,
})
}
} else if (this.sideLayer) {
this.remove(this.sideLayer)
}
},
{ immediate: true }
)
}