1. A concise explanation of the problem you’re experiencing.
Hi, i’m currently having performance issue when i’m trying to add two sets of datasource to the map and clustering them. In other words, lag happens when every time I zoom the map. Any idea that I can do to lift the performance? Thank you and codes are posted below!
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
clusterStyle(dataSource, options, color) {
var dataSources = viewer.dataSources.add(dataSource, options)
dataSources.then(function (dataSource) {
var pixelRange = 30
var minimumClusterSize = 10
var enabled = true
dataSource.clustering.enabled = enabled
dataSource.clustering.pixelRange = pixelRange
dataSource.clustering.minimumClusterSize = minimumClusterSize
dataSource.clustering.clusterLabels = !enabled
var pinBuilder = new Cesium.PinBuilder()
dataSource.clustering.clusterEvent.addEventListener(function (
clusteredEntities,
cluster
) {
cluster.label.show = false
cluster.billboard.show = true
cluster.billboard.id = cluster.label.id
cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
if (clusteredEntities.length >= 100) {
cluster.billboard.image = pinBuilder
.fromText(
clusteredEntities.length,
Cesium.Color.fromCssColorString(color[2]),
50
)
.toDataURL()
} else if (clusteredEntities.length >= 10) {
cluster.billboard.image = pinBuilder
.fromText(
clusteredEntities.length,
Cesium.Color.fromCssColorString(color[1]),
40
)
.toDataURL()
}
})
})
}
cluster() {
var that = this
for (var key in this.district) {
new Cesium.loadJson(
‘…/…/…/static/shapefile/’ + key + ‘/geo/rfgsd.json’
).then(function (data) {
if (data) {
var dataSource1 = new Cesium.CustomDataSource(‘public’)
var dataSource2 = new Cesium.CustomDataSource(‘non’)
var sum = 0;
for (var i = 0; i < data.length; i++) {
var name = data[i][‘name’]
var cat = data[i][‘cat’]
var dist = data[i].district
var num = data[i][‘num’]
var lon = data[i].geometry.x
var lat = data[i].geometry.y
sum += 1;
if (lon !== “NaN” && lat !== “NaN”) {
if (cat == ‘style1’) {
dataSource1.entities.add({
position: new Cesium.Cartesian3.fromDegrees(
parseFloat(lon),
parseFloat(lat)
),
name: name,
layer: ‘rfgsd’,
district: dist,
number: num,
cat: ‘style1’,
billboard: {
image: ‘…/…/…/static/images/rf_pub.png’,
width: 30,
height: 30,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
HorizontalOrigin: Cesium.HorizontalOrigin.LEFT,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
500.0
// 10000.0
)
},
label: {
text: name,
font: ‘14pt monospace’,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0.0,
2000.0
)
}
})
} else if (cat == ‘style2’) {
dataSource2.entities.add({
name: name,
layer: ‘rfgsd’,
district: dist,
number: num,
cat: ‘style2’,
position: new Cesium.Cartesian3.fromDegrees(
parseFloat(lon),
parseFloat(lat)
),
billboard: {
image: ‘…/…/…/static/images/rf_non.png’,
width: 30,
height: 30,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
HorizontalOrigin: Cesium.HorizontalOrigin.LEFT,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
500.0
// 10000.0
)
},
label: {
text: name,
font: ‘14pt monospace’,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0.0,
2000.0
)
}
})
}
}
}
var options = {
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
}
var color1 = [’#D8BFD8’, ‘#9370DB’, ‘#7B68EE’]
var color2 = [’#DEB887’, ‘#FF7F50’, ‘#D2691E’]
that.clusterStyle(dataSource1, options, color1)
that.clusterStyle(dataSource2, options, color2)
}
})
}
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction(function (movement) {
var pickedLabel = viewer.scene.pick(movement.position)
if (Cesium.defined(pickedLabel)) {
var ids = pickedLabel.id
if (Cesium.isArray(ids)) {
for (var i = 0; i < ids.length; ++i) {
ids[i].billboard.color = Cesium.Color.RED
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
4. The Cesium version you’re using, your operating system and browser.
The Cesium version is 1.40, and browser is Chrome 69.0.3497.81.