場景
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 { 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 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 { width: 100%; height: 400px; } </style>
10、加載效果
