When using the WebGLPointsLayer, if you create the source before creating the layer, you may see black blocks appear and the image will only display correctly after dragging the map. However, if you create the layer first and then set the source, you will not see the black blocks.

"ol": "7.2.2",

has problem :

`const data = {
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"crs": {

                "type": "name",
                "properties": {
                    "name": "EPSG:4490"
                }
            },
            "coordinates": [
                118.334167,
                28.171667
            ]
        },
        "properties": {
            "id": "17c26f42927747b18916629bc71c2e79",
            "pType": 52,
            "permitCode": ""
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "crs": {
                "type": "name",
                "properties": {
                    "name": "EPSG:4490"
                }
            },
            "coordinates": [
                117.864286,
                28.696942
            ]
        },
        "properties": {
            "id": "e6cc7cfb8f004f93b75ae6748886afc0",
            "pType": 52,
            "permitCode": ""
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "crs": {
                "type": "name",
                "properties": {
                    "name": "EPSG:4490"
                }
            },
            "coordinates": [
                83.191706,
                36.679542
            ]
        },
        "properties": {
            "id": "b756cd6f30ab4ad0ad2b146942a1ea0d",
            "pType": 52,
            "permitCode": ""
        }
    }
],
"type": "FeatureCollection"

}
const vectorSource = new VectorSource({
features: new GeoJSON().readFeatures(data)
})

const vectorLayer = new WebGLPointsLayer({
name: 'layerDimension',
projection: olProjGet('EPSG:4490'),
source: vectorSource,
zIndex: 5,
style: {
symbol: {
symbolType: 'image',
src: require('./img/sprites/site-s.svg'),
size: [28, 28],
textureCoord: [
'match',
['get', 'pType'],
// 24,
// [0, 0, 0.125, 1],
// 25,
// [0.125, 0, 0.25, 1],
// 26,
// [0.25, 0, 0.375, 1],
// 23,
// [0.375, 0, 0.5, 1],
// 31,
// [0.5, 0, 0.625, 1],
// 32,
// [0.625, 0, 0.75, 1],
// 33,
// [0.75, 0, 0.875, 1],
52,
[0.875, 0, 1, 1],
[0.875, 0, 1, 1]
]
}
}
})

this.map.addLayer(vectorLayer)`

The code below has no problem:

`
const vectorLayer = new WebGLPointsLayer({
name: 'layerDimension',
projection: olProjGet('EPSG:4490'),
source: vectorSource,
zIndex: 5,
style: {
symbol: {
symbolType: 'image',
src: require('./img/sprites/site-s.svg'),
size: [28, 28],
textureCoord: [
'match',
['get', 'pType'],
// 24,
// [0, 0, 0.125, 1],
// 25,
// [0.125, 0, 0.25, 1],
// 26,
// [0.25, 0, 0.375, 1],
// 23,
// [0.375, 0, 0.5, 1],
// 31,
// [0.5, 0, 0.625, 1],
// 32,
// [0.625, 0, 0.75, 1],
// 33,
// [0.75, 0, 0.875, 1],
52,
[0.875, 0, 1, 1],
[0.875, 0, 1, 1]
]
}
}
})

this.map.addLayer(vectorLayer)

const data = {
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4490"
}
},
"coordinates": [
118.334167,
28.171667
]
},
"properties": {
"id": "17c26f42927747b18916629bc71c2e79",
"pType": 52,
"permitCode": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4490"
}
},
"coordinates": [
117.864286,
28.696942
]
},
"properties": {
"id": "e6cc7cfb8f004f93b75ae6748886afc0",
"pType": 52,
"permitCode": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4490"
}
},
"coordinates": [
83.191706,
36.679542
]
},
"properties": {
"id": "b756cd6f30ab4ad0ad2b146942a1ea0d",
"pType": 52,
"permitCode": ""
}
}
],
"type": "FeatureCollection"
}
const vectorSource = new VectorSource({
features: new GeoJSON().readFeatures(data)
})

vectorLayer.setSource(vectorSource)`