経度と緯度の配列を使用してマップボックスにプロットする

Mapbox APIをWebアプリケーションに実装しようとしていますが、問題が発生しています。私の目的は、私の配列から経度と緯度を取得し、それらを座標に挿入することです。私はループを使用してループしてみましたが、うまくいかないようです。誰かが解決策を持っているなら、それは大いに感謝されるでしょう！私は私のアクセストークン経度と緯度の配列を使用してマップボックスにプロットする

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8' /> 
    <title>Draw GeoJSON points</title> 
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script> 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' /> 
    <style> 
     body { margin:0; padding:0; } 
     #map { position:absolute; top:0; bottom:0; width:100%; } 
    </style> 
</head> 
<body> 

<div id='map'></div> 
<script> 

var longLat = [ 
[53.515333, -6.190796], 
[53.342686, -6.403656], 
[51.678091, -9.624023], 
[52.768293, -1.560059] 
]; 

mapboxgl.accessToken = 'undefined'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/light-v9', 
    center: [-96, 37.8], 
    zoom: 3 
}); 

map.on('load', function() { 

    map.addLayer({ 
     "id": "points", 
     "type": "symbol", 
     "source": { 
      "type": "geojson", 
      "data": { 
       "type": "FeatureCollection", 
       "features": [{ 
        "type": "Feature", 
        "geometry": { 
         "type": "Point", 
         "coordinates": [-77.03238901390978, 38.913188059745586] 
        }, 
        "properties": { 
         "title": "Mapbox DC", 
         "icon": "monument" 
        } 
       }, { 
        "type": "Feature", 
        "geometry": { 
         "type": "Point", 
         "coordinates": [-122.414, 37.776] 
        }, 
        "properties": { 
         "title": "Mapbox SF", 
         "icon": "harbor" 
        } 
       }] 
      } 
     }, 
     "layout": { 
      "icon-image": "{icon}-15", 
      "text-field": "{title}", 
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
      "text-offset": [0, 0.6], 
      "text-anchor": "top" 
     } 
    }); 
}); 
</script> 

</body> 
</html>

出典

2017-12-04 GrandeurH

を取り出した注意私はmapboxの経験を持っていないしましたが、this documentation pageに基づか、私は以下を思い付きました。

あなたはそのように、forループの中にあなたの機能のコレクション（配列）を作成する必要があります：あなたはプロパティ（アイコンとタイトル）をスキップできるかどう

var featureCollection = []; // Initialize empty collection 

// Your longLat collection 
var longLat = [ 
    [53.515333, -6.190796], 
    [53.342686, -6.403656], 
    [51.678091, -9.624023], 
    [52.768293, -1.560059] 
]; 

// for every item object within longLat 
for(var itemIndex in longLat) { 
    // push new feature to the collection 
    featureCollection.push({ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": longLat[itemIndex] 
    }, 
    "properties": { 
     "title": "Mapbox DC", 
     "icon": "monument" 
    } 
    }); 
}

試してみてください。今のところ、彼らはハードコードされています。

その後、あなたはマップ自体にこのようにそれらを渡す：

map.on('load', function() { 
    map.addLayer({ 
    "id": "points", 
    "type": "symbol", 
    "source": { 
    "type": "geojson", 
     "data": { 
     "type": "FeatureCollection", 
     "features": featureCollection 
     } 
    }, 
    "layout": { 
     "icon-image": "{icon}-15", 
     "text-field": "{title}", 
     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
     "text-offset": [0, 0.6], 
     "text-anchor": "top" 
    } 
    }); 
});

私は物事のすべてが何を意味するかわからないが、それはちょうどから取られます（例えば、すべてのアイコンでlayoutをなど）言及されている例なので、何も破壊してはいけません。

出典

2017-12-04 18:19:08 entio

非常にありがとう、私はあなたが持っているものを実装しようとし、どのように行くのか教えて！ – GrandeurH

あなたは大歓迎です。私はここにコードを書いたので、まったくテストされていないことを覚えておいてください。タイプミスアラート。コードを見て、考えられるエラーを修正してください。 – entio

こんにちは、コードを実装しようとしましたが、何らかの理由で "入力データがGEOJSONではありません"というエラーが表示されていますか？ – GrandeurH

経度と緯度の配列を使用してマップボックスにプロットする

答えて

関連する問題