浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
(未显示1个用户的2个中间版本)
第1行: 第1行:
 
{{flutter-sidebar}}
 
{{flutter-sidebar}}
<div class="wrap-time-sdk" style="margin-top: -15px;">更新时间:2020-06-23</div><div class="bluetitle"><div class="services-title-text service-page-anchor">自定义瓦片图层</div></div>
+
<div class="wrap-time-sdk" style="margin-top: -15px;">更新时间:2020-06-23</div><div class="bluetitle"><div class="services-title-text">自定义瓦片图层</div></div>
 
该图层支持开发者添加自有瓦片数据,包括本地加载和在线下载两种方式。该图层可随地图的平移、缩放、旋转等操作做相应的变换,它仅位于底图之上(即瓦片图层将会遮挡底图,不遮挡其他图层),瓦片图层的添加顺序不会影响其他图层(例如:POI搜索图层、我的位置图层等)的叠加关系。
 
该图层支持开发者添加自有瓦片数据,包括本地加载和在线下载两种方式。该图层可随地图的平移、缩放、旋转等操作做相应的变换,它仅位于底图之上(即瓦片图层将会遮挡底图,不遮挡其他图层),瓦片图层的添加顺序不会影响其他图层(例如:POI搜索图层、我的位置图层等)的叠加关系。
  
第6行: 第6行:
  
 
适用于开发者拥有某一区域的地图,并希望使用此区域地图覆盖相应位置的百度地图。
 
适用于开发者拥有某一区域的地图,并希望使用此区域地图覆盖相应位置的百度地图。
<div class="wrap-important-sdk" style="padding: 20px 30px!important;"><div class="title">瓦片图划分规则</div><div class="wrap">百度地图SDK会根据不同的比例尺将地图划分成若干个瓦片,并且以中心点经纬度(0,0)开始计算瓦片,当地图显示缩放级别增大时,每一个瓦片被划分成4 个瓦片。</div><div class="wrap">如:地图级别为0时,只有1张瓦片地图级别为1时,会分成 1 * 4 = 4 张瓦片依次类推,地图级别为n时,总共划分的瓦片为:4的n次方,为了保证瓦片的显示效果,第n级的瓦片显示的地图level范围为[n - 0.5, n + 0.5)</div></div><div class="bluetitle"><div class="services-title-text service-page-anchor">瓦片图绘制方式</div></div>
+
<div class="wrap-important-sdk" style="padding: 20px 30px!important;"><div class="title">瓦片图划分规则</div><div class="wrap">百度地图SDK会根据不同的比例尺将地图划分成若干个瓦片,并且以中心点经纬度(0,0)开始计算瓦片,当地图显示缩放级别增大时,每一个瓦片被划分成4 个瓦片。</div><div class="wrap">如:地图级别为0时,只有1张瓦片地图级别为1时,会分成 1 * 4 = 4 张瓦片依次类推,地图级别为n时,总共划分的瓦片为:4的n次方,为了保证瓦片的显示效果,第n级的瓦片显示的地图level范围为[n - 0.5, n + 0.5)</div></div><div class="bluetitle"><div class="services-title-text">瓦片图绘制方式</div></div>
瓦片图层的绘制方式包括本地加载和在线下载两种方式。<br/>'''1、本地加载'''
+
瓦片图层的绘制方式包括本地加载和在线下载两种方式。<br/>'''本地加载'''
 
瓦片图层通过BMFTile类定义,通过addTile方法添加至地图。<br/>需要将瓦片图的图片资源放到工程下的Resoures/bmflocaltileimage目录,并按照缩放级别放置到相应子目录:<br/>&nbsp; &nbsp; &nbsp;<div class="urltoimg" style="width: 260px;">
 
瓦片图层通过BMFTile类定义,通过addTile方法添加至地图。<br/>需要将瓦片图的图片资源放到工程下的Resoures/bmflocaltileimage目录,并按照缩放级别放置到相应子目录:<br/>&nbsp; &nbsp; &nbsp;<div class="urltoimg" style="width: 260px;">
 
https://mapopen-website-wiki.cdn.bcebos.com/flutter/static/wpt1.png
 
https://mapopen-website-wiki.cdn.bcebos.com/flutter/static/wpt1.png
第33行: 第33行:
 
显示效果如图:
 
显示效果如图:
 
<div class="urltoimg" style="width: 260px;"><div class="urltoimg" style="width: 260px;">
 
<div class="urltoimg" style="width: 260px;"><div class="urltoimg" style="width: 260px;">
https://mapopen-website-wiki.cdn.bcebos.com/flutter/static/wpt2.jpg
 
</div></div>
 
'''2、在线下载'''
 
  
开发者需要实现UrlTileProvider抽象类,在其中设置缩放级别范围和在线瓦片图的URL地址。
+
</div></div><div class="urltoimg" style="width: 260px;"><div class="urltoimg" style="width: 260px;"></div></div>
 
+
示例代码如下:
+
<pre class="prettyprint codestyle">/// 瓦片图显示边界
+
BMFCoordinateBounds visibleMapBounds = BMFCoordinateBounds(
+
&nbsp; &nbsp; &nbsp; &nbsp; northeast: BMFCoordinate(80, 180), southwest: BMFCoordinate(-80, -180));
+
 
+
/// 构造瓦片图
+
BMFTile tile = BMFTile(
+
&nbsp; &nbsp; &nbsp; &nbsp; tileLoadType: BMFTileLoadType.LoadUrlTile,
+
&nbsp; &nbsp; &nbsp; &nbsp; url:
+
&nbsp; &nbsp; &nbsp; &nbsp; 'http://online1.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20190528'
+
&nbsp; &nbsp; &nbsp; &nbsp; visibleMapBounds: visibleMapBounds,
+
&nbsp; &nbsp; &nbsp; &nbsp; maxZoom: 20,
+
&nbsp; &nbsp; &nbsp; &nbsp; minZoom: 4);
+
 
+
/// 添加瓦片图
+
myMapController?.addTile(tile)
+
</pre>
+
 
+
显示效果如图:
+
<div class="urltoimg" style="width: 260px;">&nbsp;<div class="urltoimg" style="width: 260px;">
+
https://mapopen-website-wiki.cdn.bcebos.com/flutter/static/wpt3.jpg
+
</div></div>
+

2020年7月29日 (三) 06:07的版本

更新时间:2020-06-23
自定义瓦片图层

该图层支持开发者添加自有瓦片数据,包括本地加载和在线下载两种方式。该图层可随地图的平移、缩放、旋转等操作做相应的变换,它仅位于底图之上(即瓦片图层将会遮挡底图,不遮挡其他图层),瓦片图层的添加顺序不会影响其他图层(例如:POI搜索图层、我的位置图层等)的叠加关系。

通过瓦片图层可对基础底层地图添加额外的特性,如:某个商场的室内信息、某个景区的详情等等。自定义图层类是BMFTile,它定义了能添加到基础底层地图的图片集合。

适用于开发者拥有某一区域的地图,并希望使用此区域地图覆盖相应位置的百度地图。

瓦片图划分规则
百度地图SDK会根据不同的比例尺将地图划分成若干个瓦片,并且以中心点经纬度(0,0)开始计算瓦片,当地图显示缩放级别增大时,每一个瓦片被划分成4 个瓦片。
如:地图级别为0时,只有1张瓦片地图级别为1时,会分成 1 * 4 = 4 张瓦片依次类推,地图级别为n时,总共划分的瓦片为:4的n次方,为了保证瓦片的显示效果,第n级的瓦片显示的地图level范围为[n - 0.5, n + 0.5)
瓦片图绘制方式

瓦片图层的绘制方式包括本地加载和在线下载两种方式。
本地加载

瓦片图层通过BMFTile类定义,通过addTile方法添加至地图。
需要将瓦片图的图片资源放到工程下的Resoures/bmflocaltileimage目录,并按照缩放级别放置到相应子目录:
     

wpt1.png

注:瓦片图的尺寸必须满足256 * 256

示例代码如下:

/// 瓦片图显示边界
BMFCoordinateBounds visibleMapBounds = BMFCoordinateBounds(
        northeast: BMFCoordinate(39.94001804746338, 116.41224644234747),
        southwest: BMFCoordinate(39.90299859954822, 116.38359947963427));

/// 构造瓦片图
BMFTile tile = BMFTile(
        tileLoadType: BMFTileLoadType.LoadLocalAsyncTile
        visibleMapBounds: visibleMapBounds,
        maxZoom: 17,
        minZoom: 16);

/// 添加瓦片图
myMapController?.addTile(tile);

显示效果如图:

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消