Vue使用openlayers加載天地圖

更新時(shí)間：2024年02月05日 08:52:47 作者：會(huì)說法語的豬

這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers加載天地圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下

申請(qǐng)?zhí)斓貓Dkey

官方：https://www.tianditu.gov.cn/

申請(qǐng)key：https://sso.tianditu.gov.cn/login?service=https%3A%2F%2Fconsole.tianditu.gov.cn%2F

進(jìn)去之后，先登錄，如果沒賬號(hào)先注冊(cè)一個(gè)就行。

可以創(chuàng)建個(gè)應(yīng)用，創(chuàng)建完成后，會(huì)自動(dòng)生成key。

安裝ol加載天地圖

先安裝下

npm i ol

然后是完整代碼：

<template>
  <div id="map-container"></div>
</template>
<script>
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
 
export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 2; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}
 
let map;
export default {
  data() {
    return {
 
    }
  },
  mounted(){
    this.initMap('SL') // 加載矢量底圖
    // this.initMap('YX') // 加載影像底圖
    // this.initMap('DX') // 加載地形暈渲
  },
  methods:{
    initMap(layerType = 'SL') {
      const TIANDI_KEY = '31499a6260cb9f29558750d04a934256'
 
      // 對(duì)應(yīng)的值是固定的
      const layerTypeMap = {
        'SL': ['vec', 'cva'], // [矢量底圖, 矢量注記]
        'YX': ['img', 'cia'], // [影像底圖, 影像注記]
        'DX': ['ter', 'cta']  // [地形暈渲, 地形注記]
      }
 
      // c: 經(jīng)緯度投影 w: 球面墨卡托投影
      const matrixSet = 'c'
 
      map = new Map({
        target: 'map-container',
        layers: [
          // 底圖
          new TileLayer({
            source: new WMTS({
              url: `http://t{0-6}.tianditu.com/${layerTypeMap[layerType][0]}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
              layer: layerTypeMap[layerType][0],
              matrixSet: matrixSet,
              style: "default",
              crossOrigin: 'anonymous', // 解決跨域問題 如無該需求可不添加
              format: "tiles",
              wrapX: true,
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                //resolutions: res.slice(0, 15),
                resolutions: resolutions,
                matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
              })
            })
          }),
          // 標(biāo)注
          new TileLayer({
            source: new WMTS({
              url: `http://t{0-6}.tianditu.com/${layerTypeMap[layerType][1]}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
              layer: layerTypeMap[layerType][1],
              matrixSet: matrixSet,
              style: "default",
              crossOrigin: 'anonymous', // 解決跨域問題 如無該需求可不添加
              format: "tiles",
              wrapX: true,
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
              })
            })
          })
        ],
        view: new View({
          center: [169.40, 65.35],
          projection: projection,
          zoom: 3,
          maxZoom: 17,
          minZoom: 1
        })
      })
    }
  }
}
</script>
<style scoped>
#map-container {
  width: 100%;
  height: 100%;
}
</style>

上面把天地圖密鑰替換成你第一步申請(qǐng)的key就可以。

上面示例加載了三種天地圖：矢量底圖、影像底圖、地形暈渲