（以“{{jspopularGL-sidebar}}<br/><div class="h1-title">三方标准图层</div><div id="update-time">更新时间：2021年11月22...”为内容创建页面） |
|||
| 第1行： | 第1行： | ||
| − | + | {{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> | ||
| + | {| width="519" border="1" | ||
| + | |- | ||
| + | | width="104" | '''构造函数''' | ||
| + | | width="297" | '''描述''' | ||
| + | |- | ||
| + | | BMapGL.XYZLayer(options) | ||
| + | | XYZLayer实例化TileLayer，用于添加第三方标准图层，通过options设置图层瓦片请求地址、显示等级、显示范围等。 | ||
| + | |} | ||
| + | <div class="serve-explain-text"> | ||
| + | options属性变量： | ||
| + | </div> | ||
| + | {| width="519" border="1" | ||
| + | |- | ||
| + | | width="104" | '''options属性''' | ||
| + | | width="40" | '''类型''' | ||
| + | | width="347" | '''描述''' | ||
| + | |- | ||
| + | | 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。 | ||
| + | |} | ||
| + | <div class="serve-explain-text"> | ||
| + | XYZLayer方法 | ||
| + | </div> | ||
| + | {| width="519" border="1" | ||
| + | |- | ||
| + | | width="154" | '''方法''' | ||
| + | | width="40" | '''返回''' | ||
| + | | width="297" | '''描述''' | ||
| + | |- | ||
| + | | taddBoundary(boundaries: Array<String>) | ||
| + | | none | ||
| + | | 设置图层掩膜。boundaries可通过BMapGL.Boundary()获取行政区域的坐标数据。 | ||
| + | |- | ||
| + | | clearBoundary() | ||
| + | | none | ||
| + | | 清空图层掩膜。 | ||
| + | |- | ||
| + | | setZIndex(index:Number) | ||
| + | | none | ||
| + | | 设置图层显示层级，数字越大，显示越靠上。 | ||
| + | |- | ||
| + | | setZIndexTop() | ||
| + | | none | ||
| + | | 设置图层显示等级为最上层。 | ||
| + | |} | ||
| + | <div class="bluetitle"><div class="services-title-text">WMS图层示例</div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下：<pre class="prettyprint codestyle"> // 创建位置点 | ||
| + | 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); | ||
| + | </pre> | ||
| + | </div></div><div class="bluetitle"><div class="services-title-text">WMTS图层示例</div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下：<pre class="prettyprint codestyle"> // 创建位置点 | ||
| + | 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);</pre> | ||
| + | </div></div><div class="bluetitle"><div class="services-title-text">TMS图层示例</div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下：<pre class="prettyprint codestyle"> // 创建位置点 | ||
| + | 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);</pre> | ||
| + | </div></div><div class="bluetitle"><div class="services-title-text">自定义栅格图层示例</div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>使用服务示例</div><div class="devguidecenter">代码如下：<pre class="prettyprint codestyle"> // 创建位置点 | ||
| + | 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);</pre> | ||
| + | </div></div> | ||
2021年11月23日 (二) 16:15的版本
三方标准图层
更新时间：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);