如何实现 mapbox-gl 的图块源

Question

我正在从 react-leaflet 切换到 mapbox-gl，并且对我用于空间数据的专有图块服务有疑问。 api 几乎没有文档。他们提供 4 种不同的请求磁贴的方式。

DRAW MAP TILE - PNG map tiles with a transparent background are created according to image size in pixels, a lat lon bounding box in decimal degrees, selected layer(s) and default styling. See the individual feature for a full list of style names.

DRAW STATIC MAP TILE - PNG map tiles with a transparent background are created according to image size in pixels, lat lon coordinates in decimal degrees, zoom level, selected layer(s) and default styling. See the individual feature for a full list of style names.

BING NON CACHE - PNG map tiles with a transparent background are created according to the Bing Maps API Quadkey, selected layer(s) and default styling. See the individual feature for a full list of style names.

GOOGLE NON CACHE - PNG map tiles with a transparent background are created according to the Google Maps API X, Y, and Zoom values, selected layer(s) and default styling. See the individual feature for a full list of style names.

对于传单，我将 google 端点与插件一起使用 "react-leaflet-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 MAP TILE

看起来像。

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 MAP TILE

看起来像

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。 Mapbox 仅支持由 x/y/z 瓦片坐标（不是经纬度或 Bing 四键）给出的栅格瓦片，因此排除了前三个选项，留下 Google NON CACHE PNG API 仅限端点。

您的代码将类似于：

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

您使用的 API 似乎无法在网络上找到，所以我不能比这更具体了。

如何实现 mapbox-gl 的图块源

How to implement a tile source to mapbox-gl

leaflet

reactjs

mapbox-gl-js