Apache Zeppelinで角度とスカラを使用したリーフレット・マップを結合する

Question

ここで見つけた例：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}}) 

そして最後に、これは角度コードところですこれらの値は次のように処理されます。

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>

地図上に何も表示されません。 "wind"引数をデバッグすると、spark段落の出力と同じ値を見ることができますが、wind.locまたはwind.loc.latまたはwind.valueを出力すると "undefined"が返されます。

私はjsonの文字列が準拠していないと思うか、私は配列を読み間違って何かをやっています。

ご協力いただければ幸いです。

敬具、 ポール

Answer 1

は、私はすでに解決策を見つけました。

私は角度コントローラ（jsonオブジェクトではありません）に文字列を送信していました。 angular.Foreach入来値「newValueに」を反復するために使用される制御装置において

。この関数は、オブジェクトとの配列の両方を繰り返します。私が送っが、文字列配列の要素としてではなくJSONオブジェクトとして解釈されたすなわち

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

評価値だった最初の反復で

：

"value":"-2.5119123" 

そして第二中：

%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) 

：

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

私はちょうどアレイ全体[文字列]を送信するために、Scalaのコードを変更し

次にangular.Foreach全体「行」を繰り返しWICHのJavaScript

を使用してJSONオブジェクトに変換することができる

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

最後に、値はドット表記法を使用してアクセス可能です。ここでは、角のスニペット：

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); 
      }); 
     }) 
    }); 

希望これは誰かに役立ちます。