in packages/layers/xyz-poi-tile/src/POILayer.ts [655:783]
private _createTileMeshAndMarkers(
geojson: any,
projection: Projection,
polaris: AbstractPolaris,
key: string,
clusterImage: string
): TileRenderables | undefined {
if (!geojson.type || geojson.type !== 'FeatureCollection') {
return
}
const featureIdKey = this.getProps('featureIdKey')
const baseAlt = this.getProps('baseAlt')
const featureFilter = this.getProps('featureFilter')
const getClusterContent = this.getProps('getClusterContent')
const clusterSize = this.getProps('clusterSize')
const getPointColor = functionlize(this.getProps('getPointColor'))
const pointOffset = this.getProps('pointOffset')
const renderOrder = this.getProps('renderOrder')
const mesh = new Mesh({
name: key ? key : 'pois',
})
mesh.renderOrder = renderOrder
const layers: Marker[] = []
const meshes: Mesh[] = []
const meshFeatures: any[] = []
const positions: number[] = []
const sizes: number[] = []
const colors: number[] = []
let pointsIndex = 0
geojson.features.forEach((feature) => {
if (!feature.geometry || feature.geometry.type !== 'Point') {
return
}
// apply filter
if (featureFilter) {
const filterResult = featureFilter(feature)
if (filterResult === undefined || filterResult === false) {
return
}
}
const id = feature.properties[featureIdKey] as number | string
// add 'index' prop to feature
feature.index = this._featureCount
this._featureCount++
const coords = feature.geometry.coordinates as number[]
const clusterContent = getClusterContent(feature) as string
if (clusterContent !== undefined) {
// cluster point
const div = this._createClusterDiv(clusterContent, clusterImage, feature)
const cluster = new Marker({
lng: coords[0],
lat: coords[1],
alt: (coords[2] ?? 0) + baseAlt,
html: div,
offsetX: -0.5 * clusterSize,
offsetY: -0.5 * clusterSize,
renderOrder,
})
layers.push(cluster)
this._renderableFeatureMap.set(cluster, feature)
const meshInfo = { obj: cluster, objIdx: 0 }
this._setIndexMeshMap(feature.index, meshInfo)
this._setIdMeshesMap(id, meshInfo)
} else {
// check id key
if (id === undefined || id === null) {
console.error(
`feature does not have featureIdKey: ${featureIdKey}, please check tile data or layer config`
)
return
}
// non-cluster point
const xyz = projection.project(coords[0], coords[1], (coords[2] ?? 0) + baseAlt)
const color = getPointColor(feature)
const colorUint8 = colorToUint8Array(new Color(color))
const styledSize = this._getPointStyledSize(this._idStyleMap.get(id))
positions.push(...xyz)
sizes.push(styledSize)
colors.push(...colorUint8)
const meshInfo = {
obj: mesh,
objIdx: pointsIndex,
}
this._setIndexMeshMap(feature.index, meshInfo)
this._setIdMeshesMap(id, meshInfo)
meshFeatures.push(feature)
pointsIndex++
}
})
const posAttr = new Attr(new Float32Array(positions), 3)
const sizeAttr = new Attr(new Uint16Array(sizes), 1, false, 'DYNAMIC_DRAW')
const colorAttr = new Attr(new Uint8Array(colors), 3)
const geom = new Geom({
mode: 'POINTS',
attributes: {
position: posAttr,
aSize: sizeAttr,
aColor: colorAttr,
},
})
mesh.geometry = geom
mesh.material = this.matr
mesh.extras.pickHelper = new PointsMeshPickHelper(
mesh,
this._pointImgElem,
polaris,
'aSize',
pointOffset
)
meshes.push(mesh)
this._renderableFeatureMap.set(mesh, meshFeatures)
return { meshes, layers }
}