Mapbox 加载百度切片

使用Mapbox进行地图开发的时候,由于很多地方我没有公共的地图服务,因此会考虑使用百度或高德切片,但是直接使用raster图层加载百度切片是标准的wgs84的,由于百度切片做了偏移,因此在加载的时候出现切片偏移,下面使用了网上找到的坐标变换的方式进行两种尝试。

1、在地图进行缩放的时候计算范围内的切片,然后进行偏移,分别使用raster设置地理范围来设置切片范围。

     实例下载地址:https://download.csdn.net/download/wangdaoyin2010/10395354

     该方式也能加载百度图片,但是在平移或者拖动的时候比较卡,感觉不太好用。

2、使用Mapbox的自定义图层进行百度切片图层的开发,坐标转换也是使用网上找到的代码

    目前发现显示百度切片切片和百度地图中展示时收清晰度不一样,应该是切片比例尺和Mapbox缩放界别的比例尺不一样导致,后期想到好的处理方法在处理,

    实例下载地址:https://download.csdn.net/download/wangdaoyin2010/10968062

   该方式在加载切片时候感觉没有第一种卡,感觉可以使用。 

上面只是个人使用中的总结和开发,供大家学习交流使用,如有更好的方法或更好的实现,希望大家进行交流。如果需要资源又没有分的可以直接发送邮箱。

菜鸟总结记录,仅供学习,望大神勿喷。

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
### 回答1: Mapbox是一个提供地理信息技术解决方案的平台,其核心功能是地图服务和地图切片百度切片百度地图上的地图数据按照一定规则切割后的小块地图图块。 想要在Mapbox加载百度切片,需要先获取百度切片图层的URL。百度切片图层的URL一般是以http://online{s}.map.bdimg.com/onlinelabel/qt=", "{x}&y={y}&z={z}",其中{s}表示服务器的编号,{x}、{y}、{z}分别表示切片的行号、列号和缩放级别,而qt表示切片类型。 在Mapbox加载百度切片图层的步骤如下: 1. 在Mapbox的地图初始化代码中,创建一个新的图层变量: var layer = L.tileLayer('http://online{s}.map.bdimg.com/onlinelabel/qt={x}&y={y}&z={z}'); 2. 将该图层添加到地图上: map.addLayer(layer); 3. 设置切片的URL替换规则,将{s}替换成具体的服务器编号: layer.on('tileload', function(e) { var tile = e.tile; tile.src = tile.src.replace('{s}', '服务器编号'); }); 通过上述步骤,就可以在Mapbox的地图上成功加载百度切片图层了。需要注意的是,加载百度切片图层需要联网才能显示正常,同时要注意百度切片图层的使用权限,确保符合相关法规。 ### 回答2: 要加载百度切片图层并在Mapbox中叠加显示,可以按照以下步骤进行操作。 首先,准备百度切片图层的数据。百度切片图层通常以Z/X/Y格式进行编码,其中Z代表缩放级别,X和Y代表切片的水平和垂直位置。可以使用百度地图开放平台的API获取相应的切片数据,或通过其他方式获得百度切片图层数据。 接下来,在Mapbox中创建一个地图容器,并使用Mapbox GL JS库来加载地图。可以参考Mapbox的官方文档来了解如何创建地图容器并加载Mapbox地图。 然后,使用Mapbox GL JS提供的`map.addLayer()`方法来添加百度切片图层到地图中。需要提供百度切片图层的URL模式和源代码。 例如,假设百度切片图层的URL模式为:`http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=2&p=0`,源代码可以按照以下方式添加: ```js map.addLayer({ 'id': 'baidu-tile-layer', 'type': 'raster', 'source': { 'type': 'raster', 'tiles': ['http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=2&p=0'], 'tileSize': 256 }, 'minzoom': 0, 'maxzoom': 22 }); ``` 在上述代码中,定义了一个`baidu-tile-layer`图层,类型为`raster`,其源码类型也为`raster`。`tiles`属性指定了切片的URL模式,`tileSize`属性设置为256表示切片大小。同时还设置了图层的最小缩放级别为0,最大缩放级别为22。 最后,刷新或重新加载Mapbox地图,就可以看到已经叠加了百度切片图层的Mapbox地图。 需要注意的是,百度切片图层是由百度提供的,并不是Mapbox的官方支持。因此,在使用百度切片图层时,需要遵守百度地图开放平台的相关使用规定,并确保合法使用百度切片图层。 ### 回答3: 要在Mapbox加载百度切片图层(叠加切片图层),可以采取以下步骤: 1. 首先,需要获取百度切片图层的URL。百度切片图层是基于Web Mercator投影的,可以在百度地图开放平台上获取相应的URL。 2. 在Mapbox中,可以使用Mapbox GL JS库来创建地图。首先,在HTML文件中引入Mapbox GL JS库的脚本。 3. 在JavaScript代码中,创建一个Mapbox地图容器,指定容器的大小和初始坐标等属性。 4. 使用Mapbox GL JS提供的`map.addLayer()`方法,添加一个新的图层。在这个方法中,可以指定切片图层的类型、URL和其他相关的参数。 5. 在添加百度切片图层之前,需要将图层的坐标系从百度坐标系(BD-09)转换为Web Mercator投影。可以使用Proj4js或者其他类似的库来进行坐标系转换。 6. 在`map.addLayer()`方法中,指定新图层的类型为“raster”,URL为百度切片图层的URL,以及进行过坐标系转换后的投影坐标系。 7. 最后,通过`map.on('load', function(){})`方法,在地图加载完成后执行回调函数,用来添加百度切片图层。 通过以上步骤,就可以在Mapbox中成功加载百度切片图层(叠加切片图层)。这样可以在Mapbox地图上显示百度地图的数据,并与其他Mapbox地图的图层进行叠加展示。当然,使用其他地图框架或者库也可以实现类似的功能,具体的实现方法可能有所不同。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值