Wie zum hinzufügen von Markern auf Cäsium-Gelände

Um Marker auf dem Gelände in Cäsium verwendet habe ich das sampleTerrain – Funktion, um die Höhe.

Ich bin in der Lage, fügen Sie eine Markierung auf der Spitze eines Berges, aber der marker befindet sich weit von der Maus klicken. Wie kann ich eine Markierung auf Cäsium Gelände, so dass der marker Hinzugefügt werden, die genau in die angeklickte position?

Referenz, werde ich meinen code hier:

async leftClickInputAction(event:{position: {x:number, y:number}}):Promise<any> {

let positionCartesian3 = this.cesium.viewer.camera.pickEllipsoid(event.position);
let positionCartographic = Cesium.Cartographic.fromCartesian(positionCartesian3);
await Cesium.sampleTerrain(this.cesium.viewer.terrainProvider, 9, [positionCartographic]);

let height = positionCartographic.height;
let cart3_with_height = Cesium.Cartesian3.fromRadians(positionCartographic.longitude, positionCartographic.latitude, positionCartographic.height );
let window_coordinates = this.cesium.calcService.toFixes7Obj(Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.cesium.viewer.scene,cart3_with_height));
positionCartesian3 = this.cesium.viewer.camera.pickEllipsoid(event.position);
positionCartographic = Cesium.Cartographic.fromCartesian(positionCartesian3);
positionCartographic.height = height;*/

let lngDeg:number = Cesium.Math.toDegrees(positionCartographic.longitude);
let latDeg:number = Cesium.Math.toDegrees(positionCartographic.latitude);
let position: [number, number, number] = [lngDeg, latDeg, positionCartographic.height];
let color:string = this.cesium.positionFormService.getSelectedColor();
let marker_picker = {position};
if(color != "blue") marker_picker['color'] = color;
this.cesium.queryParamsHelperService.addMarker(marker_picker);
InformationsquelleAutor Harel.Lebel | 2017-02-15



2 Replies
  1. 3

    Diese Zeile ist dein problem:

        let positionCartesian3 = this.cesium.viewer.camera.pickEllipsoid(event.position);

    Den pickEllipsoid Funktion picks Werte aus den WGS84-ellipsoid (denke, „ähnlich wie auf Meereshöhe“, aber nicht zu verwechseln mit dem tatsächlichen MSL). Diese Funktion wird nie wieder ein Punkt von der Spitze eines Berges.

    Natürlich, Sie augmented diese Funktion durch Aufruf sampleTerrain, die ist gut, aber nicht das problem zu beheben. Die „Auswahl“ findet die Berggipfel und endet Kommissionierung bis ein Punkt auf dem ellipsoid weit unten und hinter dem Berg, nicht in der Nähe, wo der user dachte Sie geklickt haben.

    Gibt es eine andere Funktion, die Sie verwenden können, viewer.Szene.pickPosition, das wird Rückkehr Positionen durch Lesen Sie aus der WebGL Sie den depth-buffer. Dies bedeutet, dass die Funktion nur zuverlässig im Nahbereich, wenn die Kamera nahe genug, um einzelne Berge zum Beispiel, nicht heraus gezoomt, um die ganze Welt. Aber es funktioniert, lassen Sie Sie Holen Berge, und wie.

    Hier ist eine demo mit code an der Stelle aus dem Kommissionierung Demo und modifiziert werden, um arbeiten am Mount Everest. Klicken Sie auf „Ausführen code-snippet“ an der Unterseite von dieser. Sie können auch klicken Sie auf die „ganze Seite“ Popout fest link nach.

    JS:

    var terrain = Cesium.createDefaultTerrainProviderViewModels();
    var viewer = new Cesium.Viewer('cesiumContainer', {
        navigationInstructionsInitiallyVisible: false,
        animation: false,
        timeline: false,
        geocoder : false,
        selectionIndicator : false,
        infoBox : false,
        terrainProviderViewModels: terrain,
        selectedTerrainProviderViewModel: terrain[1]
    });
    
    function lookAtMtEverest() {
        var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
        var offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
    
    lookAtMtEverest();
    
    var labelEntity = viewer.entities.add({
        label : {
            show : false,
            showBackground : true,
            font : '14px monospace',
            horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
            verticalOrigin : Cesium.VerticalOrigin.TOP,
            pixelOffset : new Cesium.Cartesian2(15, 0)
        }
    });
    
    var sceneModeWarningPosted = false;
    
    //Mouse over the globe to see the cartographic position
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(movement) {
        var foundPosition = false;
        var scene = viewer.scene;
        var pickedObject = scene.pick(movement.endPosition);
        if (scene.pickPositionSupported) {
            if (scene.mode === Cesium.SceneMode.SCENE3D) {
                var cartesian = viewer.scene.pickPosition(movement.endPosition);
    
                if (Cesium.defined(cartesian)) {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(3);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(3);
                    var heightString = cartographic.height.toFixed(2);
    
                    labelEntity.position = cartesian;
                    labelEntity.label.show = true;
                    labelEntity.label.text =
                        'Lon: ' + ('   ' + longitudeString).slice(-8) + '\u00B0' +
                        '\nLat: ' + ('   ' + latitudeString).slice(-8) + '\u00B0' +
                        '\nAlt: ' + ('   ' + heightString).slice(-7) + 'm';
    
                    var camera = scene.camera;
                    labelEntity.label.eyeOffset = new Cesium.Cartesian3(0.0, 0.0, camera.frustum.near * 1.5 - Cesium.Cartesian3.distance(cartesian, camera.position));
    
                    foundPosition = true;
                }
            } else if (!sceneModeWarningPosted) {
                sceneModeWarningPosted = true;
                console.log("pickPosition is currently only supported in 3D mode.");
            }
        }
    
        if (!foundPosition) {
            labelEntity.label.show = false;
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    CSS:

    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      font-family: sans-serif;
    }

    HTML:

    <link href="http://cesiumjs.org/releases/1.30/Build/Cesium/Widgets/widgets.css" 
          rel="stylesheet"/>
    <script src="http://cesiumjs.org/releases/1.30/Build/Cesium/Cesium.js">
    </script>
    <div id="cesiumContainer"></div>

    • Dank!!!!!! BTW ist es möglich, ohne baseLayerPicker ?
    • Ja, Sie können drehen baseLayerPicker aus, aber Sie sollten ein Gelände mit Quelle, so dass die Berge bleiben. Scene.pickPosition funktioniert nicht gut, wenn Gelände fehlt.
    • Ich benutzte Gelände Quelle von assets.agi.com/stk-terrain/world und es hat nicht funktioniert, wenn baseLayerPicker = false
  2. 1

    Ich, dass :

         let ray = this.cesium.viewer.camera.getPickRay(event.position);
          let positionCartesian3 = this.cesium.viewer.scene.globe.pick(ray, this.cesium.viewer.scene);
          let positionCartographic = Cesium.Cartographic.fromCartesian(positionCartesian3);
          let lngDeg: number = Cesium.Math.toDegrees(positionCartographic.longitude);
          let latDeg: number = Cesium.Math.toDegrees(positionCartographic.latitude);
           position = [lngDeg, latDeg, positionCartographic.height];

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.