浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
第1行: 第1行:
 
{{jspopularGL-sidebar}}
 
{{jspopularGL-sidebar}}
<div class="h1-title">三方标准图层</div><div id="update-time">更新时间:2021年11月22日</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">JSAPI GL提供XYZLayer类支持加载EPSG3857 坐标系统的 WMS 图层、WMTS图层、TMS图层以及自定义栅格图层。</div><!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbs.baidu.com/jsdemo.htm#wms"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbs.baidu.com/jsdemo/demo/wms.htm WMS图层]</div><div class="demo_btn" style="width:485px;">[https://lbs.baidu.com/jsdemo/demo/wmts.htm WMTS图层]</div><div class="demo_btn" style="width:485px;">[https://lbs.baidu.com/jsdemo/demo/tms.htm TMS图层]</div><div class="demo_btn" style="width:485px;">[https://lbs.baidu.com/jsdemo/demo/custom.htm 自定义栅格图层]</div></div><div class="jsapi-demo-link">[https://lbs.baidu.com/jsdemo.htm#wms DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">XYZLayer类参考</div></div><div class="serve-explain-text">
+
<div class="h1-title">三方标准图层</div><div id="update-time">更新时间:2021年11月22日</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">JSAPI GL提供XYZLayer类支持加载EPSG3857 坐标系统的 WMS 图层、WMTS图层、TMS图层以及自定义栅格图层。</div><!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="http://10.155.226.19:8012/jsdemo.htm#wms"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[http://10.155.226.19:8012/jsdemo/demo/wms.htm WMS图层]</div><div class="demo_btn" style="width:485px;">[http://10.155.226.19:8012/jsdemo/demo/wmts.htm WMTS图层]</div><div class="demo_btn" style="width:485px;">[http://10.155.226.19:8012/jsdemo/demo/tms.htm TMS图层]</div><div class="demo_btn" style="width:485px;">[http://10.155.226.19:8012/jsdemo/demo/custom.htm 自定义栅格图层]</div></div><div class="jsapi-demo-link">[http://10.155.226.19:8012/jsdemo.htm#wms DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">XYZLayer类参考</div></div><div class="serve-explain-text">
 
构造函数:
 
构造函数:
 
</div>
 
</div>

2021年11月23日 (二) 16:19的版本

三方标准图层
更新时间:2021年11月22日
简介
JSAPI GL提供XYZLayer类支持加载EPSG3857 坐标系统的 WMS 图层、WMTS图层、TMS图层以及自定义栅格图层。
XYZLayer类参考

构造函数:

构造函数 描述
BMapGL.XYZLayer(options) XYZLayer实例化TileLayer,用于添加第三方标准图层,通过options设置图层瓦片请求地址、显示等级、显示范围等。

options属性变量:

options属性 类型 描述
tileUrlTemplate String 图像数据请求地址。可通过{0,1,2}标记实现多请求地址的配置;可通过[z],[x],[y],[b]引用默认的*Template。WMTS/TMS/自定义栅格图层服务默认使用[z],[x],[y],瓦片大小为256*256。WMS服务默认使用[b]。
xTemplate Function 通过输入的网格x、y、z参数计算[x]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。
yTemplate Function 通过输入的网格x、y、z参数计算[y]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。
zTemplate Function 通过输入的网格x、y、z参数计算[z]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。
bTemplate Function 通过输入的网格x、y、z参数计算[b]具体返回值,返回值默认为四至坐标拼接成的字符串:’minX,minY,maxX,maxY’。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。
minZoom Number 设置图层显示的最小缩放等级。
maxZoom Array 设置图层加载数据的四至范围,输入的范围数值默认为EPSG:3857坐标[minX,minY,maxX,maxY]。
extentCRSIsWGS84 Number 设置图层显示的最大缩放等级。
maxZoom Boolean 标记参数extend数组数据是否为EPSG:4326坐标。默认false,如果设置为true,参数extent数值需要是EPSG:4326 坐标。
boundary Array 设置图层掩膜。可通过BMapGL.Boundary()获取行政区域的坐标数据。
useThumbData Boolean 缩放图层时,是否使用跨图层的瓦片进行平滑切换。默认false。如果影响透明图层的展示效果,可以设置false;如果非透明图层,可以设置true。
tms Boolean tileUrlTemplate中[y]是否为tms请求服务形式。默认false。如果是则设置为true。

XYZLayer方法

方法 返回 描述
taddBoundary(boundaries: Array<String>) none 设置图层掩膜。boundaries可通过BMapGL.Boundary()获取行政区域的坐标数据。
clearBoundary() none 清空图层掩膜。
setZIndex(index:Number) none 设置图层显示层级,数字越大,显示越靠上。
setZIndexTop() none 设置图层显示等级为最上层。
WMS图层示例
1使用服务示例
代码如下:
    // 创建位置点
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(-99.41413316281799,39.82354027110903);
    map.centerAndZoom(point, 4);
    // tileUrlTemplate 包含OGC标准的WMS地图服务的GetMap接口的参数
    var wms = BMapGL.XYZLayer({
           tileUrlTemplate: 'https://ahocevar.com/geoserver/wms?REQUEST=GetMap&SERVICE=WMS&layers=topp:states&version=1.3.0&CRS=EPSG:3857&WIDTH=256&HEIGHT=256&FORMAT=image/png&TRANSPARENT=true&BBOX=[b] ',
    });
    map.addTileLayer(wms);
WMTS图层示例
1使用服务示例
代码如下:
    // 创建位置点
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(-99.41413316281799,39.82354027110903);
    map.centerAndZoom(point, 4);   
    // tileUrlTemplate 包含OGC标准的WMTS地图服务的GetTile接口的参数
    var wmts = BMapGL.XYZLayer({
        tileUrlTemplate: ' https://mrdata.usgs.gov/mapcache/wmts?layer=sgmc2&style=default&tilematrixset=GoogleMapsCompatible&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=[z]&TileCol=[x]&TileRow=[y]',
    useThumbData: true
    });
    map.addTileLayer(wmts);
TMS图层示例
1使用服务示例
代码如下:
    // 创建位置点
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.59141044992062,40.30466588726649);
    map.centerAndZoom(point, 4);
    // tileUrlTemplate 包含tms服务瓦片请求地址
    var tms = BMapGL.XYZLayer({
    tileUrlTemplate: ' https://mapopen-pub-jsapigl.cdn.bcebos.com/tms-bj/[z]/[x]/[y].png',
    tms: true,
    useThumbData: true,
    // 如果不设置tms:true,可以采用以下方式
    // yTemplate: function (x, y, z) {
    //     return Math.pow(2, z) - y - 1;
    // }
});

map.addTileLayer(tms);
自定义栅格图层示例
1使用服务示例
代码如下:
    // 创建位置点
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.0970093263384,49.9429305258067);
    map.centerAndZoom(point, 7);
    var custom = new BMapGL.XYZLayer({
    useThumbData: true,
    // 自定义图层瓦片请求地址,可使用xTemplate,yTemplate,zTemplate匹配自定义网格编号规则
    tileUrlTemplate: ‘http://c.tile.opencyclemap.org/cycle/[z]/[x]/[y].png',
    // xTemplate: function (x, y, z) {
    //     return x;
    // },
    // yTemplate: function (x, y, z) {
    //     return y;
    // },
    // zTemplate: function (x, y, z) {
    //     return z;
    // }
    });
    var bd = new BMapGL.Boundary();
    bd.get('河北', function (rs) {
        custom.addBoundary(rs.boundaries);
    });
    map.addTileLayer(custom);
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

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

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消