Vue+Openlayers实现加载天地图WMTS服务显示
生活随笔
收集整理的這篇文章主要介紹了
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><!-- Pointer events polyfill for old browsers, see Can I use... Support tables for HTML5, CSS3, etc --><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 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实现绘制线段