Vue+Openlayers实现加载天地图WMTS服务显示
发布时间：2023-10-03 16:00
场景
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图：
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客
上面在Vue中使用Openlayers加载OSM地图显示。
如果要加载天地图显示流程类似。
天地图
国家地理信息公共服务平台
国家地理信息公共服务平台 天地图
中国推出了自主开发的网络地图服务，旨在与谷歌地球（GoogleEarth）的卫星地图服务竞争。
“天地图”是国家测绘地理信息局主导建设的国家地理信息公共服务平台，
它是“数字中国”的重要组成部分。“天地图”的目的在于促进地理信息资源共享和高效利用，
提高测绘地理信息公共服务能力和水平，改进测绘地理信息成果的服务方式，更好地满足国家信息化建设的需要，
为社会公众的工作和生活提供方便。
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、注册登录平台后，点击申请key
2、点击创建新应用
3、输入应用名称并提交
4、这样就能拿到key了
5、项目搭建与基础依赖引入参照上面的博客
引入相关依赖
import "ol/ol.css";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import {get as getProjection} from 'ol/proj.js';
import {getWidth,getTopLeft} from 'ol/extent.js';6、声明并新建map
export default {
name: "olMapWorldMap",
data() {
return {
map: null,
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = new Map({
layers: [],
target: "map",
view: new View({
center: [0, 0],
zoom: 2,
}),
});7、加载图层以及参数设置方法可以参考ol官方示例代码
WMTS
官网示例代码：
main.js
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import {get as getProjection} from 'ol/proj';
import {getTopLeft, getWidth} from 'ol/extent';
const projection = getProjection('EPSG:3857');
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(19);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
const map = new Map({
layers: [
new TileLayer({
source: new OSM(),
}),
new TileLayer({
opacity: 0.7,
source: new WMTS({
attributions:
'Tiles © USGS',
url: 'https://mrdata.usgs.gov/mapcache/wmts',
layer: 'sgmc2',
matrixSet: 'GoogleMapsCompatible',
format: 'image/png',
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: 'default',
wrapX: true,
}),
}),
],
target: 'map',
view: new View({
center: [-11158582, 4813697],
zoom: 4,
}),
});
index.html
WMTS
8、参考官方示例代码的基础上，修改参数设置以及添加图层为
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[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
var taindiLayer = new TileLayer({
opacity: 0.7,
source: new WMTS({
url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你申请的key",
layer: "vec", //注意每个图层这里不同
matrixSet: "w",
format: "tiles",
style: "default",
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
wrapX: true,
}),
});
this.map.addLayer(taindiLayer);
注意这里的layer每个url对应的不同，这里引用的是矢量地图，所以layer是vec
如果是矢量标记，则未cva,如果是影响底图则是img。
另外其他参数设置也是固定的，可以从官方的示例请求中获取
http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts
访问地址后可以看到
9、完整示例代码
10、加载效果
