Как распаковать булавки со всеми деталями прав в этом месте на клике? - PullRequest
0 голосов
/ 20 марта 2019

Обратите внимание, что функция 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');
...