タイルソースをmapbox-glに実装する方法

Question

私はリアクションリーフレットからmapbox-glに切り替えており、私が空間データ用に使用している適切なタイルサービスについて質問があります。 APIにはほとんどドキュメントがありません。彼らはタイルを要求する4つの異なる方法を提供しています。

DRAWのマップタイル - 透明な背景と PNGマップタイルは画素の画像サイズ、小数度で緯度経度のバウンディングボックス、選択された層（S）と、デフォルトのスタイルに応じて作成されます。スタイル名の完全なリストについては、個々の機能を参照してください。

ドロースタティックマップタイル - 透明な背景を持つPNGマップタイルは、ピクセル単位の画像サイズ、十進数の緯度経度、ズームレベル、選択したレイヤー、およびデフォルトのスタイリングに従って作成されます。スタイル名の完全なリストについては、個々の機能を参照してください。

BING NON CACHE - 透明な背景を持つPNGマップタイルは、Bing Maps API Quadkey、選択したレイヤーおよびデフォルトのスタイリングに従って作成されます。スタイル名の完全なリストについては、個々の機能を参照してください。

GOOGLE NON CACHE - 透明な背景を持つPNGマップタイルは、GoogleマップAPIのX、Y、およびズーム値、選択したレイヤー、およびデフォルトのスタイリングに従って作成されます。スタイル名の完全なリストについては、個々の機能を参照してください。私はプラグインでGoogleのエンドポイントを使用しリーフレットについて

は "反応し、リーフレット - グーグルの"

_coreLogic =() => { 
    const {authKey} = this.props 
    const baseUrl = 'http://sws.corelogic.com/api/v3.0.0/tile/gmap?' 
    const zoom = this._map.getZoom() 
    const type = 'layers=fass%3Aparcel&styles=parcelpolygonorange' 
    this.setState({coreLogicUrl: `${baseUrl}x={x}&y={y}&zoom=${zoom}&${type}&authKey=${authKey}`}) 
    } 

    <LayersControl.Overlay checked name='CoreLogic Parcel'> 
    <LayerGroup> 
     <TileLayer url={coreLogicUrl} /> 
    </LayerGroup> 
    </LayersControl.Overlay> 

は素晴らしい作品。 mapbox-glに切り替えるのはちょっと混乱します。私はそれがラスター、ベクトルまたは画像のレイヤーであるかどうかはわかりません。私は盲目的に何のこともなく、運が違うさまざまな方法を試みました。 apiにapiを使用するデモがあります。ここで

は

DRAWのマップタイル

がどのように見えるかです。

http://sws.corelogic.com/api/v3.0.0/map?width=500&height=500&layers=fass%3Aparcel&styles=parcelpolygonorange&bbox=-74.025879%2C40.705628%2C-74.014893%2C40.713956&authKey=0x7Y0z3K8dnC79y0HwAAtXNUNHHit

そして第二の選択肢

DRAW STATICマップタイル

のように見えます

http://sws.corelogic.com/api/v3.0.0/map?width=600&height=600&layers=fass%3Aparcel&styles=parcelpolygonorange&lat=40.709792&lon=-74.020386&zoom=15&authKey=0x7Y0z3K8dn

Answer 1

あなたはおそらくraster tile sourceをしたいです。マップボックスは、Google NON CACHE PNG APIエンドポイントだけを残して、最初の3つのオプションを除外するように、x/y/zタイル座標（lat-longsまたはBingクアッドキーではない）によって与えられるラスタタイルをサポートします。

あなたのコードは次のようになります：あなたが使用しているAPIは、Web上で検索可能ではないようですので、私はそれよりももっと具体的なことはできません

map.addSource('tiles', { 
    type: 'raster', 
    tiles: ['BASEURL/x={x}&y={y}&zoom=${z}&TYPEANDAUTHKEYANDSTUFF'] 
}); 

を。