vue3-openlayers 使用tianditu,wmts和xyz等source加载天地图切片服务

本篇介绍一下使用vue3-openlayers加载天地图切片,三种方法:

  1. 使用tianditu(ol-source-tianditu内部实现其实用的wmts)
  2. 使用wmts(ol-source-wmts)
  3. 使用xyz(ol-source-xyz)

1 需求

  • vue3-openlayers加载天地图

2 分析

主要是不同类型source的使用

3 实现

3.1 ol-source-tianditu

javascript 复制代码
<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="width: 100%; height: 100%"
		ref="mapRef"
  >
    <ol-view
      ref="view"
      :center="center"
      :rotation="rotation"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-tianditu
        layerType="img"
        :projection="projection"
        :tk="key"
        :hidpi="true"
				ref="sourceRef" 
      ></ol-source-tianditu>
    </ol-tile-layer>
    <ol-tile-layer>
      <ol-source-tianditu
			 :isLabel="true"
        layerType="img"
        :projection="projection"
        :tk="key"
        :hidpi="true"
      ></ol-source-tianditu>
    </ol-tile-layer>
		<!-- 下面的注记加载等价于上面的 -->
		<!-- <ol-tile-layer>
      <ol-source-tianditu
        layerType="cia"
        :projection="projection"
        :tk="key"
        :hidpi="true"
      ></ol-source-tianditu>
    </ol-tile-layer> -->
  </ol-map>
</template>

<script setup lang="ts">

const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const rotation = ref(0);
const mapRef=ref();
const key = '换成申请的天地图key';
const sourceRef = ref(null);
// layerType  img, vec, ter, cia, cta
//  'vec', 'cva'  矢量底图, 矢量注记
//  'img', 'cia'  影像底图, 影像注记
//  'ter', 'cta'  地形晕渲, 地形注记

onMounted(() => {
  const source = sourceRef.value?.source;
	// 调用source上的方法
});
</script>
<style scoped lang="scss">
</style>

3.2 wmts

javascript 复制代码
<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="width: 100%; height: 100%"
    ref="mapRef"
  >
    <ol-view
      ref="view"
      :center="center"
      :rotation="rotation"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-wmts
        ref="sourceRef"
        :attributions="attribution"
        :url="url"
        :projection="projection"
        :matrixSet="matrixSet"
        :format="format"
        :layer="layerImage"
        :styles="styleName"
      ></ol-source-wmts>
    </ol-tile-layer>
    <ol-tile-layer>
      <ol-source-wmts
        :attributions="attribution"
        :url="url_address"
        :projection="projection"
        :matrixSet="matrixSet"
        :format="format"
        :layer="layerAddress"
        :styles="styleName"
      ></ol-source-wmts>
    </ol-tile-layer>
  </ol-map>
</template>

<script setup lang="ts">
const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const rotation = ref(0);
const mapRef = ref();
const format = ref('image/png');
const styleName = ref('default');
const attribution = ref('Tiles © <a href="https://www.tianditu.gov.cn/">天地图</a>');
const key = '换成申请的天地图key';
const sourceRef = ref(null);

const layerImage = ref('img');
const layerAddress = ref('cia');
const matrixSet = ref('c');//c: 经纬度投影 w: 墨卡托投影
//  'vec', 'cva'  矢量底图, 矢量注记
//  'img', 'cia'  影像底图, 影像注记
//  'ter', 'cta'  地形晕渲, 地形注记

// 影像底图
const url = ref(`http://t{0-6}.tianditu.com/${layerImage.value}_${matrixSet.value}/wmts?tk=${key}`);
// 影像注记
const url_address = ref(
  `http://t{0-6}.tianditu.com/${layerAddress.value}_${matrixSet.value}/wmts?tk=${key}`
);

onMounted(() => {
	const map=mapRef.value?.map
  const source = sourceRef.value?.source;
});
</script>
<style scoped lang="scss"></style>

</script>
<style scoped lang="scss">
</style>

3.3 xyz

javascript 复制代码
<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="width: 100%; height: 100%"
    ref="mapRef"
  >
    <ol-view
      ref="view"
      :center="center"
      :rotation="rotation"
      :zoom="zoom"
      :projection="projection"
    />
		
    <ol-tile-layer>
      <ol-source-xyz :projection="projection" :url="imageUrl" />
    </ol-tile-layer>
		<ol-tile-layer :opacity="0.9">
      <ol-source-xyz :projection="projection" :url="addressUrl" />
    </ol-tile-layer>
  </ol-map>
</template>

<script setup lang="ts">
const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const rotation = ref(0);
const mapRef = ref();
const key = '换成申请的天地图key';
const sourceRef = ref(null);

const layerImage = ref('img');
const layerAddress = ref('cia');
const matrixSet = ref('c');//c: 经纬度投影 w: 墨卡托投影
//  'vec', 'cva'  矢量底图, 矢量注记
//  'img', 'cia'  影像底图, 影像注记
//  'ter', 'cta'  地形晕渲, 地形注记

// 影像底图
const imageUrl = ref(
  `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerImage.value}_${matrixSet.value}&tk=${key}&x={x}&y={y}&l={z}`
);
// 影像注记
const addressUrl = ref(
  `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerAddress.value}_${matrixSet.value}&tk=${key}&x={x}&y={y}&l={z}`
);

onMounted(() => {
  const map = mapRef.value?.map;
  const source = sourceRef.value?.source;
});
</script>
<style scoped lang="scss"></style>

加载注记图层后,切片虽然显示png,但是好像不是透明的,只能在注记图层增加透明度控制

相关推荐
Rudon滨海渔村3 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg50177 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬9 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200420 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼20 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_092725 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸26 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
纪元A梦36 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生38 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了39 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae