class polymerization{
constructor() {
this.viewer = null
this.init()
}
init() {
//初始化地图
this.initMap()
//处理聚合
this.polymerization()
}
initMap() {
this.viewer = new Cesium.Viewer('cesiumContainer',{
geocoder: false,
baseLayerPicker: false,
sceneModePicker: false,
fullscreenButton: false,
navigationHelpButton: false,
sceneMode: Cesium.SceneMode.SCENE3D,
shouldAnimate: true,
animation: false,
timeline: false,
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=1a7ec240fc2783062616cc53caac5514",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
maximumLevel: 18,
show: false,
})
});
this.viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(115.16743519182551,22.575871697376243, 100000.0)
});
}
polymerization() {
let _this = this;
let options = {
camera: _this.viewer.scene.camera,
canvas: _this.viewer.scene.canvas,
};
let dataSourcePromise = this.viewer.dataSources.add(
Cesium.KmlDataSource.load(
"./kml/facilities/facilities.kml",
options
)
);
dataSourcePromise.then((dataSource) => {
const pixelRange = 80;
const minimumClusterSize = 2;
const enabled = true;
dataSource.clustering.enabled = enabled;
dataSource.clustering.pixelRange = pixelRange;
dataSource.clustering.minimumClusterSize = minimumClusterSize;
dataSource.entities.values.forEach(entity => {
entity.billboard.image = `./assets/img/localtion.png`
entity.type = "cluser";
});
this.dealStyle(dataSource)
})
}
dealStyle(dataSource) {
let removeListener;
if (Cesium.defined(removeListener)) {
removeListener();
removeListener = undefined;
} else {
removeListener = dataSource.clustering.clusterEvent.addEventListener(
(clusteredEntities, cluster) => {
let len = clusteredEntities.length;
cluster.billboard.show = true;
cluster.billboard.id = cluster.label.ids;
cluster.label.horizontalOrigin =
Cesium.HorizontalOrigin.CENTER;
cluster.label.verticalOrigin =
Cesium.VerticalOrigin.CENTER;
cluster.label.font = '14pt Source Han Sans CN'
if (len < 4) {
widHei(0)
} else if (len < 8) {
widHei(1)
} else if (len < 12) {
widHei(2)
} else if (len < 16) {
widHei(3)
} else {
widHei(4)
}
function widHei(num){
cluster.billboard.image = `./assets/img/round${num}.png`
cluster.billboard.width = 60
cluster.billboard.height = 60
}
}
);
}
}
}
new polymerization()
kml文件
<?xml version="1.0" encoding="utf-8"?>
<kml>
<Document>
<Placemark>
<Point>
<coordinates>114.41555649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.41556649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42556649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.52556649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42556649491575,22.51967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42556649491575,22.91927331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.32556649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42576649491575,22.92967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>114.41555649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.41556649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42556649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.52556649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42556649491575,22.51967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42556649491575,22.91927331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.32556649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42576649491575,22.92967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>114.41555649491575,22.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.41552649491575,22.91267331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42554649491575,22.91267331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.52556641491575,22.91267331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.22556649491575,22.51967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42556649491575,22.01927331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.31556649491575,23.91967331218551</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>115.42576649491575,22.92967331218551</coordinates>
</Point>
</Placemark>
</Document>
</kml>
效果如下:
20210430