private _init()

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 }
		)
	}