2016-10-03 19 views
0

ヒートマップをRを含むリーフレットを使用してツェッペリンの段落に追加したい。R Studioのスクリプトを作成しましたがうまくいきますが、ツェッペリンに移行するとヒートマップは表示されません。ここで私のコードはR Studioにありますリーフレットを使用したツェッペリンのヒートマップ

map3 <- Leaflet$new() 
map3$setView(c(29.7632836, -95.3632715), 10) 

vector <- c(list(c(29.76,-95.36, 50)), list(c(29.77, -95.37, 50)), list(c(29.75,-95.39,50))) 
#vector = toJSONArray2(na.omit(vector), json = F, names = F) 
cat(rjson::toJSON(vector[1:3])) 

map3$addAssets(jshead = c(
    "http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js" 
)) 

map3$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js")) 
map3$setTemplate(afterScript = sprintf(" 
    <script> 
     var addressPoints = %s 
     var heat = L.heatLayer(addressPoints).addTo(map)   
    </script>" 
             ,rjson::toJSON(vector))) 

map3 

Zeppelinのコードはほとんど同じです。入力と出力方法の変更のみ:

library(SparkR) 

sparkcontext <- sparkR.init("local[4]","cvspark",sparkEnvir=list(spark.executor.memory="1g")) 

#sparkR.session() 
positions <- sql("SELECT lat, long FROM my_table") 
pos <- collect(positions) 

map3 <- Leaflet$new() 

map3$setView(c(39.93, 32.85)) 

vector <- c() 
values1 <- pos[[1]] 
values2 <- pos[[2]] 
for (i in 1:length(values1)) 
    vector <- c(vector, list(c(values1[i], values2[i], 1000))) 

cat(rjson::toJSON(vector[1:3])) 

map3$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js")) 
map3$setTemplate(afterScript = sprintf(" 
    <script> 
     var addressPoints = %s 
     var heat = L.heatLayer(addressPoints).addTo(map)   
    </script>" 
    ,rjson::toJSON(vector))) 


map3$print("map3", include_assets=TRUE, cdn=TRUE) 

次のコードは、入力が同一である例を示します。

cat(rjson::toJSON(vector[1:3])) 

Rスタジオ出力:

[[29.76,-95.36,50],[29.77,-95.37,50],[29.75,-95.39,50]], 

ツェッペリン出力:

[[41.6406843380063,37.6892873258843,1000],[37.0194101218466,30.3908073266391,1000],[34.0236444385`445,40.5599139822316,1000]] 

問題ここにはmap3$print("map3", include_assets=TRUE, cdn=TRUE)に出力にヒートマップレイヤーが含まれていません。私が知っている限り、ゼプトリンの地図を表示するには、このメソッドを呼び出す必要があります。問題は、どのようにprintメソッドに地図上のヒートマップレイヤーを有効にするjavascriptコードを含めるかです。

また、私はツェッペリンで次のエラーが発生します。代わりに結合

map3$print("map3", include_assets=TRUE, cdn=TRUE) 

使用%角度インタプリタと変数:

Error in sparkR.sparkContext(master, appName, sparkHome, convert`NamedListToEnv(sparkEnvir), : JVM is not ready after 10 seconds 
+0

また、ZeppelinのコードはSparkに接続するには時間がかかりすぎるという問題もあります。 –

答えて

0

は、このコードは、ヒートマップレイヤは表示されません。

%angular 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" /> 
<script src="scripts/leaflet-heat.js"></script> 

<input type="hidden" value="{{coordinates}}" id="coordinates_values"> 
<div id="map" style="height: 800px; width: 100%"></div> 
<script type="text/javascript"> 
function initMap() { 
    var map = L.map('map').setView([39.95, 32.50], 10); 

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors', 
     maxZoom: 12, 
     minZoom: 3 
    }).addTo(map); 

    var geoMarkers = L.layerGroup().addTo(map); 

    var el = angular.element($('#map').parent('.ng-scope')); 

    console.log($("#coordinates_values").val()) 
    var coordinates = $.parseJSON($("#coordinates_values").val()); 
    var heat = L.heatLayer(coordinates, {radius: 35}).addTo(map); 

    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(tweet) { 
       var marker = L.marker([ tweet.loc.lat, tweet.loc.lon ]) 
        .bindPopup(tweet.user + ": " + tweet.tweet) 
        .addTo(geoMarkers); 
      }); 
     }) 
    }); 
} 

if (window.locationWatcher) { 
    // clear existing watcher otherwise we'll have duplicates 
    window.locationWatcher(); 
} 

// ensure we only load the script once, seems to cause issues otherwise 
if (window.L) { 
    $("#coordinates_values").ready(function(){ 
     initMap(); 
    }); 
} else { 
    console.log('Loading Leaflet library'); 
    var sc = document.createElement('script'); 
    sc.type = 'text/javascript'; 
    sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js'; 
    sc.onload = initMap; 
    sc.onerror = function(err) { alert(err); } 
    document.getElementsByTagName('head')[0].appendChild(sc); 
} 
</script> 
しかし、私はそれがこの質問に関連しているとは思いません
関連する問題