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

最新推荐文章于 2024-02-04 16:46:06 发布
最新推荐文章于 2024-02-04 16:46:06 发布
阅读量7.1k 收藏 19
点赞数 5
分类专栏： GIS相关 文章标签： vue.js 前端 javascript openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122216401
版权

场景

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 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 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 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、加载效果

 

霸道流氓气质
关注
  • 5
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
07-openlayers加载WMTS服务
fxshy的博客
05-14 47
07-加载WMTS服务
Vue+Openlayer实现轨迹路线
热门推荐
08-27 1万+
<template> <div> <div id="map" ref="map" style="width: 100vw; height: 100vh"></div> </div> </template> <script> import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; im...
Vue结合Openlayers示例
此爱如少年
10-19 8808
文章目录1、简单示例1.1创建一个mapView组件1.2 创建一个Vue实例，并注册mapView组件1.3在页面中应用2、地图配置3、npm 构建3.1 安装openlayers3.2 在mapView组建中导入相关模块 1、简单示例 先看下以引入< JavaScript >的方式的使用方法 1.1创建一个mapView组件 mapView.js export default { ...
Openlayers + Vue实现GIS地图的一些常见问题（整理）
canxuezhang的博客
12-14 5786
本文是博主在开发过程中遇到的一些问题的整理。 学习教程为：《WebGIS之Openlayers全面解析（第二版）》一书。 Openlayers实现离线地图的实现方案 前端： Openlayers 后端： GeoServer
openLayers+vue+element-ui实现地图
hzh2310841288的博客
06-05 594
openLayers+vue实现地图
OpenLayers 6 如何优雅的使用天地图WMTS服务“经纬度投影(CGCS2000)”和“球面墨卡托投影(EPSG:3857)”
weixin_44519342的博客
04-26 3312
OpenLayers 6 如何优雅的使用天地图WMTS服务“经纬度投影(CGCS2000)”和“球面墨卡托投影(EPSG:3857)”
openlayers 加载天地图示例
02-24
在"Openlayers 加载天地图示例"中，`Openlayers-tianditu.html`很可能是主HTML文件，它会引入OpenLayers库以及我们自定义的`tiandituLayers.js`脚本来实现天地图的加载。在HTML文件中，我们可能会看到一个`<div>`...
前端VUE+Openlayers,结合Geoserver发布的地图服务,进行简单的地图操作.zip
07-13
在本项目中，我们主要探讨的是如何在前端开发中利用Vue.js框架与OpenLayers库，结合Geoserver发布的地图服务，实现对地图的基本操作。Vue.js是一个轻量级的JavaScript框架，它以其组件化、易用性和高效性受到前端...
基于VUE3实现集成OpenLayers开发库加载天地图(通过静态资源导入方式)
11-28
下面将详细介绍如何在Vue3项目中集成OpenLayers并加载天地图。 首先，我们需要确保开发环境中已经安装了Vue3。通常，这可以通过使用`npm`或`yarn`来完成，命令如下： ```bash npm init vue@next # 或者 yarn ...
openlayers加载arcgis发布的OGC WMS服务
01-09
OpenLayers 是一个流行...总之，通过OpenLayers加载ArcGIS发布的OGC WMS服务，可以让非ArcGIS用户利用丰富的ArcGIS地图数据，实现跨平台的地图应用。理解这些概念和实践操作，对于构建基于Web的地理信息系统至关重要。
openlayers 调用百度地图
08-19
同时，由于动态加载地图的方式可能会有性能问题，实际应用中可能需要考虑缓存策略或优化加载过程。 总的来说，将OpenLayers与百度地图集成，可以结合两者的优点，为用户提供更丰富、更个性化的地图体验。但同时，这...
vue项目中使用天地图
01-08
1.首先打开天地图注册账号 申请自己所用的key 网址：http://lbs.tianditu.gov.cn/home.html 2.创建自己的vue项目，这里就不说了 3.将 引入到你项目中的index.html文件中 4.创建map.vue文件 <!-- 点击画多边形 --> export default { data(){ return{ } }, created(){ }, mounted(){ this.loadmap() },
ol加载arcgis server发布的wmts服务地图
猪猪侠的博客
04-24 619
that.layer.tiandituImgLayer = new ImageLayer({ title: 'generalMap', source: new ImageArcGISRest({ ratio: 1, params: {}, url: 'http://218.2.231.245/mapjs2/rest/services/MapJS/js_yxdt_latest/MapServer', .
vue+openlayers 点击地图查询geoserver发布的WMS/WMTS图层的信息[矢量(点、线、面)+栅格]
冰雪为融的博客
07-15 2277
vue+openlayers 点击地图查询geoserver发布的WMS/WMTS图层的信息[矢量(点、线、面)+栅格]
openlayers加载天地图
最新发布
m0_51431448的博客
02-04 1494
vue集成openlayers，加载天地图
OpenLayers6入门，OpenLayers加载天地图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-10 859
本章讲解如何使用OpenLayers加载天地图，需要先到天地图申请key。本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
Vue+OpenLayers学习系列（五）OpenLayers 加载 WMTS 地图服务（GeoServer）
Ocean111best的博客
08-02 3129
一、用 GeoServer 发布地图服务并且查看 选择 Tile Caching 里面的 Tile Layers，选择预览方式为 EPSG:4326/png 点开预览该服务，然后在预览页面查看网页源码，查看具体的调用方式和所需的参数。 二、OpenLayers 调用 WMTS 服务 <template> <div id="map" ref="rootmap"> </div> </template> <scri..
ol加载wmts切片服务/xyz服务/WMS服务地图
ssy001128的博客
03-21 766
【代码】ol加载wmts切片服务/xyz服务地图。
【OpenLayers+vue】加载天地图
Android_wq的博客
11-08 273
el-button type="primary" @click='qhdt(1)'>矢量中文标记矢量英文标记卫星中文标记卫星英文标记
vue+openLayers 实现图层控制控件
06-02
要在 Vue 中使用 OpenLayers 实现图层控制控件，可以按照以下步骤进行操作： 1. 安装 OpenLayers 和 Vue： ``` npm install ol vue ``` 2. 在 Vue 中引入 OpenLayers： ```javascript import ol from 'ol' import 'ol/ol.css' ``` 3. 创建地图容器： ```html <template> <div ref="map" class="map"></div> </template> ``` 4. 在 Vue 的 mounted 钩子函数中创建地图： ```javascript mounted() { // 创建地图容器 const map = new ol.Map({ target: this.$refs.map, layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9085]), zoom: 12 }) }); this.map = map; } ``` 5. 创建图层控制控件： ```html <template> <div ref="map" class="map"> <div class="ol-control ol-custom-control"> <div class="ol-custom-control-header">图层控制</div> <div class="ol-custom-control-body"> <div v-for="(layer, index) in layers" :key="index"> <input type="checkbox" :id="layer.name" v-model="layer.visible"> <label :for="layer.name">{{ layer.name }}</label> </div> </div> </div> </div> </template> ``` 6. 在 Vue 的 data 中定义图层数据和控件的状态： ```javascript data() { return { map: null, layers: [ { name: 'OSM', visible: true, layer: new ol.layer.Tile({ source: new ol.source.OSM() }) }, { name: 'Bing Maps', visible: false, layer: new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'your-bingmaps-api-key', imagerySet: 'Road' }) }) } ] } } ``` 7. 在 Vue 的 watch 中监听图层状态的变化并更新地图： ```javascript watch: { layers: { deep: true, handler(layers) { const map = this.map; map.getLayers().clear(); layers.forEach(layer => { if (layer.visible) { map.addLayer(layer.layer); } }); } } } ``` 通过以上步骤就可以在 Vue 中实现图层控制控件了。需要注意的是，在实际应用中，可以根据需要自定义控件的样式和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值