2017-12-08 3 views
0

私はマップボックスを使い慣れていないので、マップの操作に慣れていないので、私が持っている座標のリストからポリゴンを描画しようとしています。これまでのところ、これは私が持っているコードです。座標リストから「エッジ」ポイント(最も遠いエッジ座標)を取得するには

const accessToken = <myTokenHere>; 
const center = [36.813288, -1.2813976]; 
const mycords = [ 
[36.88888, -1.3008283333333335 ], 
[ 36.88977666666666,-1.30097 ], 
[36.88977666666666, -1.30097], 
[36.88977666666666, -1.30097 ], 
//... 
]; 
mapboxgl.accessToken = accessToken; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    center, 
    zoom: 7 
}); 
map.on('load',() => { 
map.addLayer({ 
    'id': 'vendors', 
    'type': 'fill', 
    'source': { 
     'type': 'geojson', 
     'data': { 
      'type': 'Feature', 
      'geometry': { 
       'type': 'Polygon', 
       'coordinates': [mycords] 
      } 
     } 
    }, 
    'layout': {}, 
    'paint': { 
     'fill-color': '#181A4A', 
     'fill-opacity': 0.6 
    } 
    }); 
}); 

上記のコードは、以下に示すようにポリゴンを描画します。 how the above code draws the polygon

私の意図は、以下のようなポリゴンを私の座標に基づいて描くことです。 What I intend to draw

私はそれらの座標をレイヤーに渡すことができるように "エッジ"を取得する必要があると思います。私の質問は私がこれをどのように達成するのかです。私はmapboxes API documentationをチェックしましたが、私はこれを行う方法に遭遇することはできませんでした。

+0

あなたが質問に編集したあなたの 'twigaVendorCords' –

+0

を得るのですか。 mycords constには約1700組のlatとlngの長いリストが含まれていますが、それは簡潔ですが理想的にはどのように見えるかです。 –

答えて

2

設計上、Mapbox GLは多くのデータ処理ツールを提供していません。そのため、Turfを使用することをおすすめします。

+0

私の目標は、ポリゴンが座標を最も外側のエッジの内側に描かないようにすることです。あなたが私が何を意味するか分かりません。ポリゴンは、2番目のスクリーンショットではなく、最初のスクリーンショットのように最も外側の座標だけを描画する必要があります。 –

+0

@ JoeNg 'これはLucasが言及したようにhttp://turfjs.org/Docs/#concaveを使用したいと思うように聞こえます。 – AndrewHarvey

+0

ありがとう@Lucas私はこのためにhttps://github.com/mapbox/concavemanを使ってしまった。かなり簡単なことですが、私はcoordinatesをconcavemanメソッドに渡し、それを使ってポリゴンを描画しました。乾杯。 –

関連する問題