场景
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115826845
上面在Vue中使用Openlayers加载OSM地图显示。
如果要加载天地图显示流程类似。
天地图
国家地理信息公共服务平台
中国推出了自主开发的网络地图服务，旨在与谷歌地球（GoogleEarth）的卫星地图服务竞争。
“天地图”是国家测绘地理信息局主导建设的国家地理信息公共服务平台，
它是“数字中国”的重要组成部分。“天地图”的目的在于促进地理信息资源共享和高效利用，
提高测绘地理信息公共服务能力和水平，改进测绘地理信息成果的服务方式，更好地满足国家信息化建设的需要，
为社会公众的工作和生活提供方便。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
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官方示例代码
https://openlayers.org/en/latest/examples/wmts.html
官网示例代码：
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 © <a href="https://mrdata.usgs.gov/geology/state/"' + ' target="_blank">USGS</a>', 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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WMTS</title> <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --> <script src="https://unpkg.com/elm-pep"></script> <!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script> <style> .map { 100%; height:400px; } </style> </head> <body> <div id="map" class="map"></div> <script src="main.js"></script> </body> </html>
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、完整示例代码
<template> <div id="map" class="map"></div> </template> <script> 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"; 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, }), }); 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); }, }, }; </script> <style scoped> .map { 100%; height: 400px; } </style>
10、加载效果
