如何将图块源实现为mapbox-gl [英] How to implement a tile source to mapbox-gl

问题描述

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

I am switching over from react-leaflet to mapbox-gl and have a question about a propriety tile service I am using for spatial data. The api has little documentation. They offer 4 different ways of requesting the tiles.

绘制地图标题- 根据图像大小(以像素为单位)，以十进制为单位的纬度边界框，选定的图层和默认样式创建具有透明背景的PNG地图图块.有关样式名称的完整列表，请参见单个功能.

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.

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

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地图图块是根据Bing Maps API四键键，选定的图层和默认样式创建的.有关样式名称的完整列表，请参见单个功能.

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地图图块是根据Google Maps API X，Y和Zoom值，所选图层和默认样式创建的.有关样式名称的完整列表，请参见单个功能.

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"一起使用

For leaflet I used the google endpoint with the plugin "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.

Works great. Switching over to mapbox-gl is a bit confusing. I am not sure if it is a raster, vector or image layer. I blindly tried different ways with no luck what so ever. The api has a demo of using the apis.

这是

地图图块

看起来像.

第二种选择

静态地图标题

DRAW STATIC MAP TILE

看起来像

推荐答案

您可能需要

You probably want a raster tile source. Mapbox only supports raster tiles given by x/y/z tile coordinates (not lat-longs or Bing quadkeys), so that rules out the first three options, leaving the Google NON CACHE PNG API endpoint only.

您的代码将类似于:

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

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

The API you're using doesn't seem to be findable on the web, so I can't be more specific than that.

这篇关于如何将图块源实现为mapbox-gl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！