openlayer3 vector layer text display repeated - openlayers-3

Question

This is a picture which shows the number of my shops at this place, but why on my map the number 90 is repeated?. I am using a styleFunc to determine the color, the cold is something like:
function styleFunction(feature) {
var destCount = feature.get("destCount");
var originCount = feature.get("originCount");
if (typeof originCount === "undefined") {
originCount = 0;
}
if (typeof destCount === "undefined") {
destCount = 0;
}
totalPointsCount = destCount + originCount;
totalPointsCount = totalPointsCount.toString();
return getStyle(feature.getProperties().type);
}
function styleFunction(feature) {
var destCount = feature.get("destCount");
var originCount = feature.get("originCount");
if (typeof originCount === "undefined") {
originCount = 0;
}
if (typeof destCount === "undefined") {
destCount = 0;
}
totalPointsCount = destCount + originCount;
totalPointsCount = totalPointsCount.toString();
return getStyle(feature.getProperties().type);
}
Code for creating the baseLayer is:
fetch('data/xml/service-meta-data.xml').then(function (response) {
return response.text();
}).then(function (text) {
var result = parser.read(text);
var options = ol.source.WMTS.optionsFromCapabilities(result, {
layer: 'China',
matrixSet: 'EPSG:3857'
});
var baseLayer = new ol.layer.Tile({
opacity: 1,
source: new ol.source.WMTS(options)
});
var map = new ol.Map({
layers: [
baseLayer,
vectorLayer
],
overlays: [infoOverlay],
target: 'map',
view: view
});
})
You can ignore all the data processing, and focus on the stylefunc, can anyone tell me why the number is repeated? Many thxs

Answer 1

Have a look this link Openlayers3 Vector labels.
Tile layers create duplicate labels when you start zooming in. So create it has ImageWMS layer.
var baseLayer = new ol.layer.Image({
opacity: 1,
source: new ol.source.ImageWMS(options)
});