當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue+Openlayers实现加载天地图WMTS服务显示

發布時間：2025/3/19 vue 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue+Openlayers实现加载天地图WMTS服务显示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

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><script src="https://unpkg.com/elm-pep"></script><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 WMTSresolutions[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 WMTSresolutions[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、加載效果

總結

以上是生活随笔為你收集整理的Vue+Openlayers实现加载天地图WMTS服务显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Openlayers中使用Overlay
下一篇： Vue+Openlayers实现绘制线段