场景
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 WMTSresolutions[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 Can I use... Support tables for HTML5, CSS3, etc --><script src="/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="/ajax/libs/core-js/3.18.3/minified.js"></script><style>.map {width: 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 WMTSresolutions[z] = size / Math.pow(2, z);matrixIds[z] = z;}var taindiLayer = new TileLayer({opacity: 0.7,source: new WMTS({url: "http://t0./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./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 WMTSresolutions[z] = size / Math.pow(2, z);matrixIds[z] = z;}var taindiLayer = new TileLayer({opacity: 0.7,source: new WMTS({url: "http://t0./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 {width: 100%;height: 400px;}</style>
10、加载效果
