在Apache Zeppelin中绑定带角度和scala的传单地图

时间:2017-10-26 06:25:20

标签: angularjs scala apache-zeppelin

我正在尝试调整我在此处找到的示例:https://gist.github.com/granturing/a09aed4a302a7367be92以符合我当前的要求。

这就是我在火花段落中的内容:

%spark2
val COSMODE_Wind = sqlContext.sql("SELECT lat0, long0, value FROM cosmode_single_level_elements_v_10m")
case class Loc(lat: Double, lon: Double)
case class Wind(value: String, loc: Loc)
val dataPoints = COSMODE_Wind.map{s => Wind(s.getDouble(2).toString, Loc( s.getDouble(0), s.getDouble(1)))}
val dataPointsJson = dataPoints.toJSON.take(12)
dataPointsJson.foreach(r => z.angularBind("locations", r))

我可以在输出中看到检索到的值:

dataPointsJson: Array[String] = Array({"value":"-1.6847639","loc":{"lat":53.3,"lon":6.8250003}}, {"value":"-1.7540998","loc":{"lat":53.3,"lon":6.875}}, {"value":"-1.7008772","loc":{"lat":53.3,"lon":6.925}}, {"value":"-1.6461897","loc":{"lat":53.3,"lon":6.975}}, {"value":"-1.8141584","loc":{"lat":53.3,"lon":7.025}}, {"value":"-1.9616194","loc":{"lat":53.3,"lon":7.0750003}}, {"value":"-2.5119123","loc":{"lat":53.3,"lon":7.125}}, {"value":"-2.8263655","loc":{"lat":53.3,"lon":7.175}}, {"value":"-2.54951","loc":{"lat":53.3,"lon":7.225}}, {"value":"-1.3688459","loc":{"lat":53.3,"lon":7.8}}, {"value":"-1.3200178","loc":{"lat":53.3,"lon":7.85}}, {"value":"-1.115428","loc":{"lat":53.3,"lon":7.9}})

最后,这是处理这些值的Angular代码:



var geoMarkers = L.layerGroup().addTo(map);
    
    var el = angular.element($('#map').parent('.ng-scope'));
    angular.element(el).ready(function() {
        window.locationWatcher = el.scope().compiledScope.$watch('locations', function(newValue, oldValue) {
            // geoMarkers.clearLayers(); -- if you want to only show new data clear the layer first
            angular.forEach(newValue, function(wind) {
                var marker = L.marker([ wind.loc.lat, wind.loc.lon ])
                .bindPopup('wind.value').addTo(geoMarkers);
            });
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
&#13;
&#13;
&#13;

我在地图上什么都没得到。当我调试&#34; wind&#34;参数我可以看到与spark段落输出中相同的值,但是当我打印wind.loc或wind.loc.lat或wind.value时,我得到一个&#34; undefined&#34;

我猜json字符串不符合或者我在读取数组时做错了。

任何帮助都将受到高度赞赏。

亲切的问候, 保罗

1 个答案:

答案 0 :(得分:0)

我已经找到了解决方案。

我只是将字符串发送到角度控制器(而不是json对象)。

在控制器中, angular.Foreach 用于迭代传入值“ newValue ”。此函数迭代对象数组。我发送的内容被解释为字符串数组的元素,而不是Json对象,即

{"value":"-2.5119123","loc":{"lat":53.3,"lon":7.125}}

在第一次迭代中,评估的值为:

"value":"-2.5119123"

在第二个:

"loc":{"lat":53.3,"lon":7.125}

我刚刚修改了scala代码,以便发送整个Array [String]:

%spark2
import scala.util.parsing.json.JSONObject
import org.apache.spark.sql._
import org.json4s._
import org.json4s.JsonDSL._
import org.json4s.jackson.JsonMethods._
val sqlContext = new org.apache.spark.sql.hive.HiveContext(sc)
val hadoopConf = sc.hadoopConfiguration
hadoopConf.set("mapreduce.input.fileinputformat.input.dir.recursive", "true")
val COSMODE_Wind = sqlContext.sql("SELECT lat0, long0, value FROM dev_sdsp.cosmode_single_level_elements_v_10m limit 100")
case class Loc(lat: Double, lon: Double)
case class Wind(value: String, loc: Loc)
val dataPoints = COSMODE_Wind.map{s => Wind(s.getDouble(2).toString, Loc( s.getDouble(0), s.getDouble(1)))}
val dataPointsJson = dataPoints.toJSON.take(100)
z.angularBind("locations", dataPointsJson)

然后angular.Foreach迭代整个“行”

{"value":"-2.5119123","loc":{"lat":53.3,"lon":7.125}}

可以使用javascript

将其转换为json对象

最后,可以使用点表示法访问这些值。这里是Angular片段:

var el = angular.element($('#map').parent('.ng-scope'));
    angular.element(el).ready(function() {
        window.locationWatcher = el.scope().compiledScope.$watch('locations', function(newValue, oldValue) {
            // geoMarkers.clearLayers(); -- if you want to only show new data clear the layer first
            console.log("new value: " + newValue);
            angular.forEach(newValue, function(wind) {
                try { JSON.parse(wind); } catch(error) { alert(error); }
                windJSON = JSON.parse(wind)
                var marker = L.marker([windJSON.loc.lat, windJSON.loc.lon]).bindPopup(windJSON.value).addTo(geoMarkers);
            });
        })
    });

希望这有助于某人。