思享工具箱

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

摘要：
如果要加载日地图，显示过程类似。天兔国家地理信息公共服务平台https://www.tianditu.gov.cn/中国推出了自主研发的网络地图服务，以与谷歌地球的卫星地图服务竞争。“天空地图”的目的是促进地理信息资源的共享和高效利用，提高测绘地理信息的公共服务能力和水平，改进测绘地理信息成果的服务模式，更好地满足国家信息化建设的需要，为公众的工作和生活提供便利。
场景

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

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

2、点击创建新应用

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

3、输入应用名称并提交

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

4、这样就能拿到key了

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

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 {
         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

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

如果是矢量标记，则未cva,如果是影响底图则是img。

另外其他参数设置也是固定的，可以从官方的示例请求中获取

http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts

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

访问地址后可以看到

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

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 {
   100%;
  height: 400px;
}
</style>

 10、加载效果

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

标签：#天地图 | 浏览：163 | 发布日期：

免责声明：文章转载自《Vue+Openlayers实现加载天地图WMTS服务显示》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇ehcache 使用在window里面安装ubuntu子系统并安装图形化界面下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

# vue 使用 cesium 接入 gltf 模型

vue 使用 cesium 接入 gltf 模型 这个其实说简单也简单，但是说复杂也不容易搞。尤其是转化成vue语法或者是在vue项目接入的时候会有些许的坑，我在接入的时候也是有很多问题，好在最后把模型加进去了，在这里稍微整理一下，然后这篇博文的代码都是我自己实现成功的，如果需要的话可以相互学习一下。第一次整，也许不是最优编程，交流嘛。 cesium中文文...

arcgis对谷歌遥感影像拼接

对于遥感影像的研究多种多样，有小尺度的也有大尺度的还有多尺度的。可以研究一个城市里的一个区，也可以研究一个省甚至全国范围。当研究的区域比较大的时候，在一幅影像上无法包括研究区的所有范围，那么就需要下载多幅遥感影像，多幅遥感影像下载完成之后就需要对着几幅影像进行拼接处理，拼接成一幅影像，这样研究才有意义。 本文的目的在于介绍arcgis的影像拼接（在arcg...

对互联网中常见地图的坐标系探讨

文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/。 1.背景 目前项目中使用百度地图、高德地图、谷歌中国地图、天地图的需求越来越多，这里我跟大家一起对各地图使用的坐标系做一个简单的探讨。 2.百度地图——BD-09 百度地图是在GCJ-02坐标系上，又自己对坐标加密了一次，它官方...

Cesium 加载天地图

网上有很多 就是没说 加载天地图需要开发者秘钥，这个需要去天地图官网申请一个就可以了，下面贴上源码 还有就是Cesium也是需要token的哈 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="tex...

Cesium笔记(3):基本控件简介—ImageryProvider地图瓦片地图配

cesiumjs中可定制多种图层，可以使用互联网上很多地图提供商的图层数据，也可以使用自己的地图数据。Cesium支持多种标准化格式的GIS瓦片服务，可以把栅格图层绘制到地球的表面——cesiumjs的地图图层本质上是一些瓦片数据，这些图层的亮度、对比度、色相均可以动态调整。 对于地图瓦片数据，OGC(Open Geospatial Consortium开...

最新文章

随机推荐

思享工具箱导航