openlayers / ol-cesium

OpenLayers - Cesium integration
http://openlayers.org/ol-cesium/
BSD 2-Clause "Simplified" License
982 stars 323 forks source link

Style does not work on 3D globe #430

Open zeroreloaded opened 7 years ago

zeroreloaded commented 7 years ago

I made simple map with a simple image icon on it and I tried to switch 2D to 3D with toggle button. What I wanted is just displaying a image rotated 90 degrees clockwise. In 2D globe, it is fine but when I switched to 3D it seems ol3-cesium does not apply pre-defined Style to Feature like this.

2d

3d

Here's my code.

var osmLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var latlon = [0,0];

    var pos = ol.proj.transform(latlon, 'EPSG:4326', 'EPSG:3857');

    var view = new ol.View({
        center: pos,
        zoom: 2
    });

    var iconFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform(latlon, 'EPSG:4326', 'EPSG:3857')),
      name: 'Airplane'
    });

    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 0.5],
            opacity: 1.0,
            scale: 2.0,
            rotation: 90 * 0.01745329251,   
            rotateWithView: "true",
            src: 'http://192.168.200.50/img/airplane3.png',
            snapToPixel: "false"
        }))
    });

    iconFeature.setStyle(iconStyle);

    var vectorSource = new ol.source.Vector({
      features: [iconFeature]
    });

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource
    });

    var ol2d = new ol.Map({
      layers: [
        osmLayer,
        vectorLayer
      ],
      controls: ol.control.defaults({
        attributionOptions:  ({
          collapsible: false
        })
      }).extend([
         new app.RotateNorthControl()
      ]),
      target: 'map',
      view:view
    });

    var ol3d = new olcs.OLCesium({map: ol2d});
    ol3d.setEnabled(true);

Anything I missed or Is this impossible on 3D globe?

gberaudo commented 7 years ago

Thanks you for the bug report. This feature was overlooked. See olcs.FeatureConverter.prototype.olPointGeometryToCesium: the rotation should be retrieved from the OL3 style and passed to Cesium.

The Cesium.extern.js should be updated:

/**
 * @type {number}
 */
Cesium.Billboard.prototype.rotation;
fredj commented 7 years ago

And the rotateWithView property is not supported at the moment

InvertedStall commented 3 years ago

Hi, any update on this? This issue is our biggest barrier to using olcesium in our project vs integrating the standalone cesium in our openlayers application.

gberaudo commented 3 years ago

Hello @InvertedStall, if this topic interest you feel free to open a pull request.