|
最近调用天地图服务，发现之前大家调用都是用XYZ方式，而切片方式调用比较少，这里记录下，以备后续所需。
1、注册天地图并查看天地图的WMTS服务。
首先登陆后，需要注册天地图账号（这里吐槽下，天地图账号只能用邮箱注册，这样导致我邮箱不能用之后，天地图账号密码忘了无法找回密码，且账号绑定的手机号也不能解绑）。注册之后可以在控制台创建新应用，获得调用服务所需的key。
然后在地图API>地图服务那里可以查看到地图服务列表。
2、Vue+OpenLayers调用天地图WMTS服务获得底图。
可以参照官网的例子学习相关的参数，https://openlayers.org/en/latest/examples/wmts.html
在参照官网例子基础上，调整的代码如下。
<template>
<div id="map">
</div>
</template>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {defaults as defaultControls} from 'ol/control.js';
import {getWidth, getTopLeft} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {get as getProjection} from 'ol/proj.js';
import { fromLonLat } from "ol/proj";
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
export default { //调用天地图WMTS服务
name: 'olTDT',
data() {
return {
map: null
};
},
mounted() {
var projection = getProjection('EPSG:3857');
var projectionExtent = projection.getExtent();
var size = getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions
最近调用天地图服务，发现之前大家调用都是用XYZ方式，而切片方式调用比较少，这里记录下，以备后续所需。
1、注册天地图并查看天地图的WMTS服务。
首先登陆后，需要注册天地图账号（这里吐槽下，天地图账号只能用邮箱注册，这样导致我邮箱不能用之后，天地图账号 ...查看全文
= size / Math.pow(2, z);
matrixIds
最近调用天地图服务，发现之前大家调用都是用XYZ方式，而切片方式调用比较少，这里记录下，以备后续所需。
1、注册天地图并查看天地图的WMTS服务。
首先登陆后，需要注册天地图账号（这里吐槽下，天地图账号只能用邮箱注册，这样导致我邮箱不能用之后，天地图账号 ...查看全文
= z;
}
var webKey = '申请的key';
var wmtsUrl_1 = 'http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk='; //矢量底图
var wmtsUrl_2 = 'http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk='; //矢量注记
var wmtsUrl_3 = 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk='; //影像底图
var wmtsUrl_4 = 'http://t{0-7}.tianditu.gov.cn/cia_w/wmts?tk='; //影像注记
var wmtsUrl_5 = 'http://t{0-7}.tianditu.gov.cn/ter_w/wmts?tk='; //地形底图
var wmtsUrl_6 = 'http://t{0-7}.tianditu.gov.cn/cta_w/wmts?tk='; //地形注记
var wmtsUrl_7 = 'http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?tk='; //境界（省级以上）
var wmtsUrl_8 = 'http://t{0-7}.tianditu.gov.cn/eva_w/wmts?tk='; //矢量英文注记
var wmtsUrl_9 = 'http://t{0-7}.tianditu.gov.cn/eia_w/wmts?tk='; //影像英文注记
var map1 = new Map({
layers: [
new TileLayer({
opacity: 0.7,
source: new WMTS({
url: wmtsUrl_3 + webKey,
layer: 'img', //注意每个图层这里不同
matrixSet: 'w',
format: 'tiles',
style: 'default',
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
}),
new TileLayer({
opacity: 0.7,
source: new WMTS({
url: wmtsUrl_4 + webKey,
layer: 'cia', //注意每个图层这里不同
matrixSet: 'w',
format: 'tiles',
style: 'default',
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
})
],
target: 'map',
view: new View({
center: fromLonLat([113.38, 23.09]), //惠州
zoom: 5
})
});
}
};
</script>
<style>
#map{
height:800px;
width: 1400px;
}
</style>
注意：上述代码中source里面的“layer、matrixSet、format、style”这几个参数不能写错，否则结果出不来。比如矢量底图的layer是vec，而影像底图的layer是img，地形底图的layer是ter。这些参数是由WMTS的GetCapabilities接口返回的结果来决定的。
可以参照：http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts&tk=申请的key
3、最终运行的结果
参考：https://blog.csdn.net/envon123/article/details/82706185
| 
转播
