2017-01-19 10 views
0

私は何千ものジオジソンポイントを含むベクトルタイルソースを持つマップを持っています。 circleタイプのレイヤーを使用して、マップ上にポイントを表示し、それぞれのポイントに円を表示できます。MapboxGL JS - シェイプレイヤータイプ

私は同じことをしたいのですが、正方形や三角形などの異なる形を使用したいと思います。これを行うための組み込みの方法はありませんか?私の選択肢は何ですか?

答えて

0

それはあらゆる使用である場合には、これは私がやったことです:

  1. 私は色違いでSVG画像のセットを作成し、私はそれらを変換https://www.mapbox.com/maki-icons/editor/
  2. に設けた巻き形状のアイコンを編集することにより、 https://github.com/mapbox/spritezero-cli
  3. を使用してJPGスプライトファイルとJSON記述子に私は私のカスタムスプライトを使用するためには、mapbox提供のスタイルから派生したスタイルを作成し、私の層構成でhttps://github.com/klokantech/tileserver-gl
  4. を使用してこのスタイルを務め、私は "シンボル"タイプのレイヤーを使用し、レイアウトプロパティ "icon-image"にその名前を渡して関連するアイコンを選択しました: "green-triangle-11"

私はそれがかなり大変です地図上に緑の三角形を表示する!


編集(18-07-2017):私はあなたが任意の画像をロードし、地図上に表示することができ、それがスタイルの一部である必要はありませんが分かりました。 Mapboxがこれを最近追加したのか、それとも今までそれを逃してしまったのかどうかはわかりません。ここに行く:

https://www.mapbox.com/mapbox-gl-js/example/add-image/

から撮影
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => { 
    if (error) throw error; 
    map.addImage('cat', image); 
    map.addLayer({ 
     "id": "points", 
     "type": "symbol", 
     "source": { 
      "type": "geojson", 
      "data": { 
       "type": "FeatureCollection", 
       "features": [{ 
        "type": "Feature", 
        "geometry": { 
         "type": "Point", 
         "coordinates": [0, 0] 
        } 
       }] 
      } 
     }, 
     "layout": { 
      "icon-image": "cat", 
      "icon-size": 0.25 
     } 
    }); 
}); 

関連する問題