OL3-Cesium 二三维鼠标事件统一处理

 

like the github issue:

https://github.com/openlayers/ol3-cesium/issues/344#issuecomment-214098148

 

thanks jmgomezpoveda .

i find the way to deal with it.

key point is: brower events and pixel happened.

sucess click and move event.

code:

//二维三维的地图点击事件
 // https://github.com/openlayers/ol3/blob/v3.19.0/src/ol/events/eventtype.js
define(['watermap'],function(watermap) {
  var clickHandler;

  var layerNameFliter;
  /**
   * initMapEvents - 初始化地图事件 鼠标移动以及鼠标单击事件
   *
   *
   * @return {type} Description
   */
  var initMapEvents = function() {

      $('#' + watermap.config.target).on('mousemove touchmove', function(browserEvent) {
          var pixel = watermap.map.getEventPixel(browserEvent.originalEvent);
          HandleFeaturesAtPixelForMove(pixel);
      });
      $('#' + watermap.config.target).on('click touchstart', function(browserEvent) {
          var pixel = watermap.map.getEventPixel(browserEvent.originalEvent);
          var features = getFeaturesAtPixelForClick(pixel);
          if (watermap.MapEvent.clickHandler) {
              watermap.MapEvent.clickHandler(features);
          }
      });
  };
  /**
   * setLayerFliters - 设置点击以及鼠标滑过去的图层过滤
   *
   * @param {type} layerNameArray Description
   *
   * @return {type} Description
   */
  var setLayerFliters = function(layerNameArray) {
      this.layerNameFliter = layerNameArray;
  };
  var addClickHandle = function(handler) {
      if (handler && typeof(handler) == 'function') {
          this.clickHandler = handler;
      } else {
          console.log("click handler you add is not a function");
      }
  };
  /**
   * HandleFeaturesAtPixelForMove - 依据pixel 获取对应的ol.features - Description
   *
   * @param {type} pixel Description
   *
   * @return {type} Description
   */
  var HandleFeaturesAtPixelForMove = function(pixel) {
      var features = [];
      if (watermap.ol3d && watermap.ol3d.getEnabled()) {
          var pickedObject = watermap.ol3d.getCesiumScene().pick(new Cesium.Cartesian2(pixel[0], pixel[1]));
          watermap.ol3d.canvas_.style.cursor = 'auto';
          if (typeof pickedObject !== "undefined") {
              // features.push(pickedObject.primitive.olFeature);
              watermap.ol3d.canvas_.style.cursor = 'pointer';
          }
      } else {
          watermap.map.getViewport().style.cursor = 'auto';
          watermap.map.forEachFeatureAtPixel(pixel, function(feature) {
                  watermap.map.getViewport().style.cursor = 'pointer';
              },
              undefined,
              function(layer) { //标注图层过滤
                  var layerName = layer.get('name');
                  if (watermap.MapEvent.layerNameFliter && watermap.MapEvent.layerNameFliter.indexOf(layerName)>=0) {
                      return true;
                  }
                  return false;
              });
      }
      return features;
  };
  /**
   * getFeaturesAtPixelForClick - 依据pixel 获取对应的ol.features - Description
   *
   * @param {type} pixel Description
   *
   * @return {type} Description
   */
  var getFeaturesAtPixelForClick = function(pixel) {
      var features = [];
      if (watermap.ol3d && watermap.ol3d.getEnabled()) {
          var pickedObject = watermap.ol3d.getCesiumScene().pick(new Cesium.Cartesian2(pixel[0], pixel[1]));
          if (typeof pickedObject !== "undefined") {
              features.push(pickedObject.primitive.olFeature);
          }
      } else {
          watermap.map.forEachFeatureAtPixel(pixel, function(feature) {
                  var featureShow;
                  features.push(feature);
              },
              undefined,
              function(layer) { //标注图层过滤
                var layerName = layer.get('name');
                if (watermap.MapEvent.layerNameFliter && watermap.MapEvent.layerNameFliter.indexOf(layerName)>=0) {
                    return true;
                }
                return false;
              });
      }
      return features;
  };

    return {
      initMapEvents:initMapEvents,
      clickHandler: clickHandler,
      layerNameFliter: layerNameFliter,
      setLayerFliters:setLayerFliters,
      addClickHandle: addClickHandle,
    };
});