如何实现mapbox-gl的tile源码

Posted 2021-04-13

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

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

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

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

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

对于传单我使用谷歌端点与插件“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

答案

你可能想要一个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似乎在网上找不到，所以我不能比这更具体。