从Qlik Sense获取变量到JavaScript

时间:2017-06-13 13:49:23

标签: javascript google-maps-api-3 qliksense

我是JS的新手,我从Qlik Sense获得了这个扩展,我试图改变,我需要根据变量指出一些引脚。如果变量$ type的值为' A'我使用了一些引脚,如果价值是' B'另一个等等。但我真的不知道这个扩展如何从QS获得价值。有什么帮助吗?

关注JS:

require.config({
  paths: {
    async: '/extensions/GoogleMaps-Sense/lib/async',
    markerclusterer: '/extensions/GoogleMaps-Sense/lib/markerclusterer'
  },
  shim: {
    'markerclusterer': {
      exports: 'MarkerClusterer'
    }
  }
});

define(['qlik', './src/properties', './src/styles', 'markerclusterer', './src/abbreviateNumber', 'qvangular', 'async!https://maps.googleapis.com/maps/api/js?key=AIzaSyASz5bdD789VzsLyki1JCKhSnCd5pEPY3Q'], function(qlik, properties, styles, MarkerClusterer, abbreviateNumber, qv) {
  var BASE_URL = '/extensions/GoogleMaps-Sense/';

  if (typeof(Number.prototype.toRad) === "undefined") {
    Number.prototype.toRad = function() {
      return this * Math.PI / 180;
    }
  }

  if (typeof(Number.prototype.toDeg) === "undefined") {
    Number.prototype.toDeg = function() {
      return this * 180 / Math.PI;
    }
  }

  return {
    initialProperties: {
      version: 1,
      qHyperCubeDef: {
        qSuppressZero: true,
        qSuppressMissing: true
      },
      gmaps: {
        cluster: {
          oneStyle: false,
          maxZoom: 10
        },
        map: {
          mode: 'cluster',
          customIcon: null,
          iconUrl: '',
          maxZoom: 18,
          style: 'default'
        }
      }
    },
    definition: properties,
    snapshot: {
      canTakeSnapshot: true
    },
    paint: function($element, layout) {

      $element.empty();

      this.backendApi.cacheCube.enabled = false;
      var _this = this;

      var markers = [];
      var selectedMarkers = [];

      var rectangles = [];
      var selectedRects = [];

      var columns = layout.qHyperCube.qSize.qcx;
      var totalheight = layout.qHyperCube.qSize.qcy;

      var pageheight = Math.floor(10000 / columns);
      var numberOfPages = Math.ceil(totalheight / pageheight);

      var Promise = qv.getService('$q');

      var promises = Array.apply(null, Array(numberOfPages)).map(function(data, index) {
        var page = {
          qTop: (pageheight * index) + index,
          qLeft: 0,
          qWidth: columns,
          qHeight: pageheight
        };

        return this.backendApi.getData([page]);

      }, this)

      Promise.all(promises).then(function(data) {
        render(data);
      });

      function render(data) {

        var useCustomStyle = layout.gmaps.map.style !== 'default';
        var hasMeasure = layout.qHyperCube.qMeasureInfo.length >= 1 ? true : false;
        var hasPopup = layout.qHyperCube.qMeasureInfo.length === 2 ? true : false;

        //The bounds object, used to determain which part of the map to show based on data
        var bounds = new google.maps.LatLngBounds();

        var mapOptions = {
          maxZoom: layout.gmaps.map.maxZoom,
          panControl: true,
          zoomControl: true,
          overviewMapControl: false,
          overviewMapControlOptions: {
            opened: false
          },
          scaleControl: false,
          streetViewControl: true,
          mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, 'map_style']
          }
        };

        //Put the map on the page so give some visual feedback
        var map = new google.maps.Map($element.get(0), mapOptions);

        if (useCustomStyle) {

          var selectedStyle = styles.filter(function(d) {
            return d.key === layout.gmaps.map.style
          });

          var styledMap = new google.maps.StyledMapType(selectedStyle[0].data, {
            name: layout.gmaps.map.style
          });

          map.mapTypes.set('map_style', styledMap);
          map.setMapTypeId('map_style');

        };

        //Create a marker for each row of data
        data.forEach(function(obj) {
          obj[0].qMatrix.forEach(function(row, index) {
            if (row[0].qText == '-') return;

            //Parse the dimension
            var latlng = JSON.parse(row[0].qText);

            //Reverse the order as QS sends long lat
            var point = new google.maps.LatLng(latlng[1], latlng[0]);

            //Create our marker - if we have a expression then use that otherwise default to just show locations
            var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
            var marker = new google.maps.Marker({
              position: point,
              title: '',
              icon: image,
              customData: hasMeasure ? row[1].qText : 1,
              qElem: row[0].qElemNumber
            });

            //If we have popup values for each marker create the popup windows
            if (hasPopup) {

              marker.infoWindow = new google.maps.InfoWindow({
                content: row[2].qText
              });

              google.maps.event.addListener(marker, 'mouseover', function() {
                this.infoWindow.open(map, this);
              });

              google.maps.event.addListener(marker, 'mouseout', function() {
                this.infoWindow.close();
              });

            };

            //Add click handler
            google.maps.event.addListener(marker, 'click', (function(value) {
              return function() {
                _this.selectValues(0, [value], true);
                highlightMarkers(value)
              }
            })(row[0].qElemNumber));

            bounds.extend(point);
            markers.push(marker);

          });
        });

        //Fit map to bounds
        map.fitBounds(bounds);

        //Clustering enabled
        if (layout.gmaps.map.mode === 'cluster') {

          if (layout.gmaps.cluster.oneStyle) {
            var clusterStyles = [{
              opt_textColor: 'black',
              url: BASE_URL + 'images/singlecluster.png',
              height: 56,
              width: 55
            }];
          };

          var mcOptions = {
            imagePath: BASE_URL + 'images/m',
            styles: clusterStyles,
            maxZoom: layout.gmaps.cluster.maxZoom
          };

          //Draw clusters onto map
          var markerCluster = new MarkerClusterer(map, markers, mcOptions);
          markerCluster.setCalculator(function(markers, clusterStyles) {

            var index = 0,
              count = markers.length,
              total = count;

            while (total !== 0) {
              //Create a new total by dividing by a set number
              total = parseInt(total / 5, 10);
              //Increase the index and move up to the next style
              index++;
            }
            index = Math.min(index, clusterStyles);

            var measure = 0;
            for (var i = 0, k = count; i < k; i++) {
              measure += parseInt(markers[i].customData)
            }
            var abbreviatedValue = abbreviateNumber(measure)
            return {
              text: abbreviatedValue,
              index: index
            };
          });

        };

        if (layout.gmaps.map.mode === 'marker') {
          markers.forEach(function(d) {
            d.setMap(map);
          })
        };

        if (layout.gmaps.map.mode === 'boxes') {


          markers.forEach(function(d) {

            var distance = d.customData > 1 ? d.customData : 10;
            var lat = d.position.lat();
            var lng = d.position.lng();
            var boxbounds = new google.maps.LatLngBounds(box(lat, lng, 225, distance), box(lat, lng, 45, distance))
            var rect = new google.maps.Rectangle({
              strokeColor: layout.gmaps.boxes.strokeFill,
              strokeOpacity: +layout.gmaps.boxes.strokeOpacity,
              strokeWeight: +layout.gmaps.boxes.strokeWeight,
              fillColor: layout.gmaps.boxes.fillColor,
              fillOpacity: +layout.gmaps.boxes.fillOpacity,
              qElem: d.qElem,
              map: map,
              bounds: boxbounds
            });

            //Add click handler
            google.maps.event.addListener(rect, 'click', (function(value) {
              return function() {
                _this.selectValues(0, [value], true);
                highlightRects(value)
              }
            })(d.qElem));

            rectangles.push(rect);

          })

        };

      };

      //In selection mode - loop over markers to highlight markers scheduled for selection.
      function highlightMarkers(qElem) {
        var idx = selectedMarkers.indexOf(qElem);
        if (idx > -1) {
          selectedMarkers.splice(idx, 1)
        } else {
          selectedMarkers.push(qElem)
        }
        markers.forEach(function(marker) {
          if (selectedMarkers.indexOf(marker.qElem) === -1) {
            marker.setOpacity(0.5)
          } else {
            marker.setOpacity(1);
          }
        });
      };

      //In selection mode - loop over markers to highlight markers scheduled for selection.
      function highlightRects(qElem) {
        var idx = selectedRects.indexOf(qElem);
        if (idx > -1) {
          selectedRects.splice(idx, 1)
        } else {
          selectedRects.push(qElem)
        }
        rectangles.forEach(function(marker) {
          if (selectedRects.indexOf(marker.qElem) === -1) {
            marker.setOptions({
              fillOpacity: +layout.gmaps.boxes.fillOpacity / 2,
              strokeOpacity: +layout.gmaps.boxes.strokeOpacity / 2
            })
          } else {
            marker.setOptions({
              fillOpacity: +layout.gmaps.boxes.fillOpacity,
              strokeOpacity: +layout.gmaps.boxes.strokeOpacity
            })
          }
        });
      };

      function box(lat, lng, brng, dist) {
        this._radius = 6371;
        var dist = dist / this._radius;
        var brng = brng.toRad();
        var lat1 = lat.toRad();
        var lon1 = lng.toRad();

        var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
          Math.cos(lat1) * Math.sin(dist) *
          Math.cos(brng));

        var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
          Math.cos(lat1), Math.cos(dist) -
          Math.sin(lat1) * Math.sin(lat2));
        lon2 = (lon2 + 3 * Math.PI) % (2 * Math.PI) - Math.PI;

        return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
      }

    }
  };
});

2 个答案:

答案 0 :(得分:0)

我认为这可能会有所帮助

/**
* Retrieve the values of a list of variables.
*
* Since $q.all fails on the first error, we have to resolve all first
*
* @param {string[]} `varList` - The variable names.
* @param {object} `app` - The (Qlik Sense) app.
*
* @returns {Promise}
*
* @api public
*/
this.getEngineVarListValues = function ( app, varList ) {

if ( varList && Array.isArray( varList ) ) {
    var promises = [];
    varList.forEach( function ( variable ) {
        promises.push( self.getEngineVarValue( app, variable ) )
    } );
    return $q.all( promises );
}
return $q.reject( new Error( 'getEngineVarListValues variable list passed.' ) );
};

取自https://github.com/stefanwalther/sense-extension-utils/blob/master/src/variable-utils.js

答案 1 :(得分:0)

var app = qlik.currApp();
    //get the variable content
    app.variable.getContent('MYVAR',function ( reply ){
    alert( JSON.stringify( reply ) );
});

来源:http://help.qlik.com/en-US/sense-developer/June2017/Subsystems/APIs/Content/CapabilityAPIs/qlik-variable-interface.htm