以前にlocalStorageに保存された座標に基づいてフィーチャを作成するOL3

Question

フィーチャを作成するボタンをクリックしてlocalStorage()に保存するときに、フィーチャを作成します。geolocation()を使用します。その後、ユーザーがページを更新したり、別のページに移動して戻ったりすると、その機能を再描画する必要があります。何らかの理由でこれが動作しない、私はコンソールエラーを取得していない。私がlocalStorageバージョンをソースに追加するたびに壊れているようです。私は、ページの読み込みにそれをチェックし、機能

if (localStorage.getItem("parkedCarCoords")) { 
     var parkedCar = new ol.Feature({ 
      geometry: new ol.geom.Point([localStorage.getItem("parkedCarCoords")]) 
     }) 
     parkedCar.setId("parkedCar"); 
     parkedCar.setStyle(styleNS.styleFunction(styleConfig.parkedCarStyle)); 
     geoLocationSource.addFeature(parkedCar); 
    } 

描画しようとしていますどこそれはここに最初に私のクリック機能に時間

var coords = geolocation.getPosition(); 
swal("Your location has been pinned! " + coords) 
var parkedCar = new ol.Feature({ 
    geometry: new ol.geom.Point(coords) 
}) 
localStorage.setItem("parkedCarCoords", coords); 
parkedCar.setId("parkedCar"); 
parkedCar.setStyle(styleNS.styleFunction(styleConfig.parkedCarStyle)); 
geoLocationSource.addFeature(parkedCar); 

とは描くのはここ

です私はこれを試して、私のクリック機能または私のlocalStorageから、機能はまったく表示されません。

localStorageバージョンを独自のソースに追加しようとしましたが、同じ結果が得られました。 click機能は、localStorageバージョンからgeoLocationSource.addFeature(parkedCar);行を取り除くと機能します。同じレイヤーにジオロケーションを追跡する機能があり、このlocalStorage機能を実装しようとすると表示されません。

Answer 1

localStorageから座標を取得しようとすると間違っていると思います。 localStorageで座標を設定して取得すると、座標は文字列に変換されます。この文字列をPointに渡します。これは、配列を入力として受け取ります。

localStorage.setItem('coords', [1,1]); 

localStorage.getItem('coords'); 
// Returns: "1,1" instead of [1,1] 

// To pass these coordinates to a Point, use the split function 
var coords = localStorage.getItem('coords').split(','); 
new ol.geom.Point(coords); 

Answer 2

localStorage文字列形式のオブジェクトストアのアイテムあなたがlocalStorage.setItem("parkedCarCoords", [1, 2]);を行うときに、あなたは、文字列1,2ない配列オブジェクトを格納します。

localStorage.getItem("parkedCarCoords");と同じ方法で、1,2という文字列が表示されるので、[localStorage.getItem("parkedCarCoords")]は["1,2"]と同じです。

あなたは座標の配列を持つようにgetItemの結果を分割する必要があります。

var parkedCar = new ol.Feature({ 
     geometry: new ol.geom.Point(localStorage.getItem("parkedCarCoords").split(',')) 
})