Question

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

绘制地图图块 -   具有透明背景的PNG地图图块是根据图像大小（以像素为单位），一个十进制度数的lat lon边界框，所选图层和默认样式创建的。有关样式名称的完整列表，请参阅单个功能。

绘制静态地图图块 -   具有透明背景的PNG地图图块根据像素的图像大小，十进制度的纬度坐标，缩放级别，所选图层和默认样式来创建。有关样式名称的完整列表，请参阅单个功能。

BING NON CACHE -   根据Bing Maps API四核，选定图层和默认样式创建具有透明背景的PNG地图图块。有关样式名称的完整列表，请参阅单个功能。

GOOGLE NON CACHE -   根据Google Maps API X，Y和缩放值，所选图层和默认样式创建具有透明背景的PNG地图图块。有关样式名称的完整列表，请参阅单个功能。

对于传单我使用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有一个使用apis的演示。

这是什么

绘制地图图块

看起来像。

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

第二个选项

绘制静态地图图块

看起来像

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平铺坐标（不是lat-longs或Bing quadkeys）给出的栅格切片，因此排除前三个选项，仅保留Google NON CACHE PNG API端点。

您的代码将类似于：

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

您正在使用的API似乎无法在网络上找到，因此我不能更具体。

如何为mapbox-gl实现tile源

1 个答案: