场景

Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115826845

上面在Vue中使用Openlayers加载OSM地图显示。

如果要加载天地图显示流程类似。

天地图

国家地理信息公共服务平台

https://www.tianditu.gov.cn/

中国推出了自主开发的网络地图服务，旨在与谷歌地球（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、加载效果

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 openlayers加载天地图WMTS服务 Vue+OpenLayers天地图 OpenLayers调用天地图WMTS示例 Vue+Openlayers实现输入坐标在地图上打点定位显示并以该点为中心放大 OpenLayers加载天地图 openlayers加载天地图 Vue+Openlayers实现显示图片并分优先级多图层加载 Vue+Openlayers中实现地图旋转 Vue+Openlayers实现地图上绘制线 Openlayers实例-加载天地图