Обратите внимание, что функция customstyle () работает постоянно, так как мы должны получать живые данные здесь.Таким образом, булавки будут перемещаться на карте. Я получаю булавки, кластеризованные на MAP, как показано ниже.Но теперь мне нужно, чтобы при щелчке любых булавок, движущихся по карте, на нем отображались данные о человеке, находящемся в это время там, в рамке или в любом другом месте.
Итак, я знаю, что застрял в точкечто, как я могу прикрепить имя и другие данные этих людей и показать его на клике oins?Также не то, что один контакт обнаруживает более одного объекта.
Я приложил код:
var viewer = new Cesium.Viewer('cesiumContainer', {
infoBox: true,
animation: false,
timeline: false,
sceneModePicker: false,
geocoder: false,
baseLayerPicker: false,
fullscreenButton: false,
navigationHelpButton: false,
sceneMode: Cesium.SceneMode.SCENE2D,
clockViewModel: new Cesium.ClockViewModel(clock),
selectionIndicator: false,
});
viewer.scene.globe.imageryLayers.removeAll();
viewer.scene.globe.enableLighting = false;
var scene = viewer.scene;
var camera = scene.camera;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.camera.flyTo({
destination: rectangle
});
load3DViewer();
var ds = new Cesium.CustomDataSource('person');
viewer.dataSources.add(ds);
ds.clustering.clusterBillboards = true;
ds.clustering.clusterlabels = true;
ds.clustering.clusterPoints = true;
ds.clustering.clusterEvent.addEventListener(function (entities, cluster) {
cluster.label.show = true;
cluster.label.fillColor = Cesium.Color.RED;
cluster.label.text = entities.length.toLocaleString();
});
var pinBuilder = new Cesium.PinBuilder();
viewer.scene.globe.baseColor = new Cesium.Color(247 / 255, 248 / 255, 250 / 255, 1);
var employee = ds.entities.add(new Cesium.Entity());
var visitor = ds.entities.add(new Cesium.Entity());
var heatMapAlldata = [];
var heatMapRowdata = {};
var valueMin = 1;
var valueMax = 50;
var bounds = {
west: appData.southWest_Long,
east: appData.southWest_Lat,
south: appData.northEast_Long,
north: appData.northEast_Lat
};
var pixelRange = 15;
var minimumClusterSize = 3;
var enabled = true;
ds.clustering.enabled = true;
ds.clustering.pixelRange = 1;
ds.clustering.minimumClusterSize = 1;
var removeListener;
var pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();
var pin40 = pinBuilder.fromText('40+', Cesium.Color.ORANGE, 48).toDataURL();
var pin30 = pinBuilder.fromText('30+', Cesium.Color.YELLOW, 48).toDataURL();
var pin20 = pinBuilder.fromText('20+', Cesium.Color.GREEN, 68).toDataURL();
var pin10 = pinBuilder.fromText('10+', Cesium.Color.BLUE, 48).toDataURL();
var singleDigitPins = new Array(8);
for (var i = 0; i < singleDigitPins.length; ++i) {
singleDigitPins[i] = pinBuilder.fromText('' + (i + 2), Cesium.Color.VIOLET, 48).toDataURL();
}
function customStyle() {
if (Cesium.defined(removeListener)) {
removeListener();
removeListener = undefined;
} else {
removeListener = ds.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 >= 50) {
cluster.billboard.image = pin50;
} else if (clusteredEntities.length >= 40) {
cluster.billboard.image = pin40;
} else if (clusteredEntities.length >= 30) {
cluster.billboard.image = pin30;
} else if (clusteredEntities.length >= 20) {
cluster.billboard.image = pin20;
} else if (clusteredEntities.length >= 10) {
cluster.billboard.image = pin10;
} else {
cluster.billboard.image = singleDigitPins[clusteredEntities.length - 2];
}
}
}
viewer.screenSpaceEventHandler.setInputAction(function (clusteredEntities, cluster) {
debugger;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
customStyle();
var viewModel = {
pixelRange: pixelRange,
minimumClusterSize: minimumClusterSize
};
Cesium.knockout.track(viewModel);
function subscribeParameter(name) {
Cesium.knockout.getObservable(viewModel, name).subscribe(
function (newValue) {
ds.clustering[name] = newValue;
}
);
}
subscribeParameter('pixelRange');
subscribeParameter('minimumClusterSize');