vue3-leaflet 快速、便捷使用leaflet进行vue项目开发

# 介绍

  • 组件说明和产生原因：
    • 该组件是后面若干瓦片底图组件的集合体，组件的类型和后续的瓦片底图组件一一相对应
    • 解决问题的情况：项目中多处使用到地图组件，在功能不断开发过程中，频繁改变瓦片服务类型；
    • 建议：将瓦片服务配置成全局的 mixins 或全局变量，这样，一旦项目中的瓦片服务类型发生改变，只用改全局配置即可
  • lBaseLayer 组件，作为底图加载组件，支持的图层类型有 tileLayer(默认),wmsTileLayer,wmtsTileLayer,imageOverlay,videoOverlay
  • layersOptions 的标准格式为
layersOptions: {
    type: '', //瓦片类型
    config: { //具体的瓦片配置
        url:''
        // ....其他配置
    }
}
// 直接把参数写在layersOptions中也是支持的，不推荐，项目大了后，容易把baseLayer的配置和具体类型瓦片的配置混淆
layersOptions: {
    type: '', //瓦片类型
    url: '',
    //....其他配置
}

# 基础用法

  • 默认的底图类型是 tileLayer
<template>
	<l-map style="height:400px;">
		<l-base-layer :layersOptions="layersOptions"> </l-base-layer>
	</l-map>
</template>
<script>
	export default {
		data: () => ({
			layersOptions: {
				config: {
					url: "https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
					options: { foo: "bar" },
				},
			},
		}),
	};
</script>
Expand Copy

# 加载 wmsTileLayer 底图

<template>
	<l-map
		style="height:400px;"
		:center="[30, -89]"
		:zoom="5"
		:zoomControl="true"
	>
		<l-base-layer :layersOptions="layersOptions2"> </l-base-layer>
	</l-map>
</template>
<script>
	export default {
		data: () => ({
			layersOptions2: {
				type: "wmsTileLayer",
				config: {
					url: "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
					options: {
						layers: "nexrad-n0r-900913",
						format: "image/png",
						transparent: true,
						attribution: "Weather data © 2012 IEM Nexrad",
					},
				},
			},
		}),
	};
</script>
Expand Copy

# 加载 wmtsTileLayer 底图

  • 该示例的 tk 用在天地图上申请的个人 tk，若底图加载不出来，可能是由于当天底图加载次数过多，使用时请自行前往天地图申请 tk 使用
<template>
	<l-map
		style="height:400px;"
		:crs="'EPSG4326'"
		:zoom="4"
		:zoomControl="true"
	>
		<l-base-layer :layersOptions="layersOptions3"> </l-base-layer>
	</l-map>
</template>
<script>
	//   let { CRS } = require("leaflet");
	export default {
		data: () => ({
			//   EPSG4326: CRS.EPSG4326,
			layersOptions3: {
				type: "wmtsTileLayer",
				config: [
					{
						url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=3133b000f831d898dc3a8f9bcff6ddf4",
						options: {
							layer: "vec",
							tileMatrixSet: "c",
							format: "tiles",
							style: "default",
							type: "baseLayer",
						},
					},
					{
						url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=3133b000f831d898dc3a8f9bcff6ddf4",
						options: {
							layer: "cva",
							tileMatrixSet: "c",
							format: "tiles",
							style: "default",
							type: "baseLayer",
						},
					},
				],
			},
		}),
	};
</script>
Expand Copy

# 加载 imageOverlay 底图

<template>
	<l-map
		style="height:400px;"
		:center="[40.73903079078143, -74.17453765869142]"
		:zoom="12"
	>
		<l-base-layer :layersOptions="layersOptions4"> </l-base-layer>
	</l-map>
</template>
<script>
	export default {
		data: () => ({
			layersOptions4: {
				type: "imageOverlay",
				config: {
					url: "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
					bounds: [
						[40.712216, -74.22655],
						[40.773941, -74.12544],
					],
				},
			},
		}),
	};
</script>
Expand Copy

# 加载 videoOverlay 底图

<template>
	<l-map
		style="height:400px;"
		:center="[22.863521826289627, -115.98632991313936]"
		:zoom="5"
	>
		<l-base-layer :layersOptions="layersOptions5"> </l-base-layer>
	</l-map>
</template>
<script>
	export default {
		data: () => ({
			layersOptions5: {
				type: "videoOverlay",
				config: {
					url: "https://www.mapbox.com/bites/00188/patricia_nasa.webm",
					bounds: [
						[32, -130],
						[13, -100],
					],
				},
			},
		}),
	};
</script>
Expand Copy

# 加载多个底图

  • 加载的多个底图，请注意 CRS.EPSG*坐标系要相同
  • 本例以天地图的瓦片为例
  • 右侧的地图卡片，组件支持的 nameClass 以下几种，nameClass 和展示名字的对应关系如下： vector: '矢量', terrain: '地形', image: '影像', earth: '地球'

1、加载多个瓦片时，layersOptions 为数组，2、若一个地图中需要包含底图、坐标等，可将 config 配置成数组，3、若需自定义展示名称，可在 name 中配置，如下示例，不配置的 name，展示名称管理如说明一致

<template>
	<l-map
		style="height:400px;"
		:crs="'EPSG4326'"
		:zoom="2"
		:zoomControl="true"
	>
		<l-base-layer :layersOptions="layersOptions6"> </l-base-layer>
	</l-map>
</template>
<script>
	//   let { CRS } = require("leaflet");
	export default {
		data: () => ({
			//   EPSG4326: CRS.EPSG4326,
			layersOptions6: [
				{
					type: "wmtsTileLayer",
					nameClass: "vector",
					name: "矢量test",
					config: [
						{
							url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=3133b000f831d898dc3a8f9bcff6ddf4",
							options: {
								layer: "vec",
								tileMatrixSet: "c",
								format: "tiles",
								style: "default",
								type: "baseLayer",
							},
						},
						{
							url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=3133b000f831d898dc3a8f9bcff6ddf4",
							options: {
								layer: "cva",
								tileMatrixSet: "c",
								format: "tiles",
								style: "default",
								type: "baseLayer",
							},
						},
					],
				},
				{
					type: "wmtsTileLayer",
					nameClass: "terrain",
					config: [
						{
							url: "http://t0.tianditu.gov.cn/ter_c/wmts?tk=5f62055ba4a942589b724283706c399a",
							options: {
								layer: "ter",
								tileMatrixSet: "c",
								format: "tiles",
								style: "default",
								type: "baseLayer",
							},
						},
						{
							url: "http://t0.tianditu.gov.cn/cta_c/wmts?tk=5f62055ba4a942589b724283706c399a",
							options: {
								layer: "cta",
								tileMatrixSet: "c",
								format: "tiles",
								style: "default",
								type: "baseLayer",
							},
						},
					],
				},
				{
					type: "wmtsTileLayer",
					nameClass: "image",
					config: [
						{
							url: "http://t0.tianditu.gov.cn/img_c/wmts?tk=5f62055ba4a942589b724283706c399a",
							options: {
								layer: "img",
								tileMatrixSet: "c",
								format: "tiles",
								style: "default",
								type: "baseLayer",
							},
						},
						{
							url: "http://t0.tianditu.gov.cn/cia_c/wmts?tk=5f62055ba4a942589b724283706c399a",
							options: {
								layer: "cia",
								tileMatrixSet: "c",
								format: "tiles",
								style: "default",
								type: "baseLayer",
							},
						},
					],
				},
			],
		}),
	};
</script>
Expand Copy

# 自定义底图卡片的位置和显示名

  • 注意事项参考加载加载多个底图瓦片
  • dToB 设置地图卡片到边框的位置
    • 默认为:'20px', 表示 x 轴、y 轴方向上的距离边框都是 20px
    • 若想设置 x 轴、y 轴方向上到边框的距离不一致，可设为 dToB:'20px 40px'; //x 轴距离边框 20px，y 轴距离边框 40px
  • position 卡片放置的位置
    • 默认为:'topright',表示卡片在地图的右上角
    • 可选择值有：'topleft', 'topright', 'bottomleft', 'bottomright'
  • nameClass 可自定义，若用组件提供的卡片项的图片，请在'vector','terrain','image','earth'中选择一个
    • name 可自定义，若不自定义，由组件提供 nameClass 决定
      • vector: '矢量',
      • terrain: '地形',
      • image: '影像',
      • earth: '地球'

1、第一项配置 nameClass: "customClass",为自定义的 class 类名，在组件提供的四种背景图不满足需求的情况下，自定义；

<template>
	<l-map style="height:400px;" :crs="'EPSG4326'" :zoom="2">
		<l-base-layer
			:dToB="dToB"
			:position="position"
			:layersOptions="layersOptions7"
		>
		</l-base-layer>
	</l-map>
</template>
<script>
	//   let { CRS } = require("leaflet");
	export default {
		data: () => ({
			//   EPSG4326: CRS.EPSG4326,
			dToB: "60px 10px",
			position: "topleft",
			layersOptions7: [
				{
					type: "wmtsTileLayer",
					nameClass: "customClass",
					name: "custom",
					config: {
						url: "http://t0.tianditu.gov.cn/ter_c/wmts?tk=5f62055ba4a942589b724283706c399a",
						options: {
							layer: "ter",
							tileMatrixSet: "c",
							format: "tiles",
							style: "default",
							type: "baseLayer",
						},
					},
				},
				{
					type: "wmtsTileLayer",
					nameClass: "vector",
					name: "矢量图",
					config: {
						url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=3133b000f831d898dc3a8f9bcff6ddf4",
						options: {
							layer: "vec",
							tileMatrixSet: "c",
							format: "tiles",
							style: "default",
							type: "baseLayer",
						},
					},
				},
				{
					type: "wmtsTileLayer",
					nameClass: "earth",
					name: "地理坐标",
					config: {
						url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=3133b000f831d898dc3a8f9bcff6ddf4",
						options: {
							layer: "cva",
							tileMatrixSet: "c",
							format: "tiles",
							style: "default",
							type: "baseLayer",
						},
					},
				},
				{
					type: "wmtsTileLayer",
					nameClass: "terrain",
					config: [
						{
							url: "http://t0.tianditu.gov.cn/ter_c/wmts?tk=5f62055ba4a942589b724283706c399a",
							options: {
								layer: "ter",
								tileMatrixSet: "c",
								format: "tiles",
								style: "default",
								type: "baseLayer",
							},
						},
						{
							url: "http://t0.tianditu.gov.cn/cta_c/wmts?tk=5f62055ba4a942589b724283706c399a",
							options: {
								layer: "cta",
								tileMatrixSet: "c",
								format: "tiles",
								style: "default",
								type: "baseLayer",
							},
						},
					],
				},
				{
					type: "wmtsTileLayer",
					nameClass: "image",
					name: "只有影像",
					config: {
						url: "http://t0.tianditu.gov.cn/img_c/wmts?tk=5f62055ba4a942589b724283706c399a",
						options: {
							layer: "img",
							tileMatrixSet: "c",
							format: "tiles",
							style: "default",
							type: "baseLayer",
						},
					},
				},
			],
		}),
	};
</script>
<style>
	.customClass {
		background-color: red;
	}
</style>
Expand Copy

# 属性说明

属性名称 说明 类型 可选值 默认值
layersOptions 配置选项，具体看下表 object — —
showType 是否展示地图类型的卡片 boolean — false
position 地图类型的卡片显示的位置 string topleft/ topright/ bottomleft/ bottomright topright
dToB 地图类型的卡片距离表框的位置。 ( 如果想设置卡片距离 x 轴和 y 轴的边框距离不一样，可设置值为“10px 20px”，字符串中的两个值用空格隔开即可，或者设置为数组["10px","20px"] ) string，array — 20px

# layersOptions

参数名称 说明 类型 可选值 默认值
type 加载的瓦片服务类型 string tileLayer/ wmsTileLayer/ wmtsTileLayer/ imageOverlay/videoOverlay tileLayer
nameClass 加载多个底图服务，并且显示地图卡片时需要设置
卡片显示的 class 名称，可自定义，自定义后要写相应自定义的类支持		 string vector/terrain/image/earth —
name 卡片项上显示的名称 string 自定义，若此项不设置，显示的名称根据上一行对应
vector: '矢量',
terrain: '地形',
image: '影像',
earth: '地球'		 —
config 指定 type 对应的地图组件的配置
该项中的值也可直接放在 layersOptions 中使用		 object — —
url：服务地址 string — —
options：服务的参数 object — —
其他的值，根据类型的地图组件而定，请参考具体的地图组件

# 方法说明

参考 leaflet 的相应类的方法，都支持，若想以组件方法调用，请将 useSelfMethods 设置为 true

# 事件说明

参考 leaflet 的相应类的事件，都支持

事件名称 说明 回调参数
changeType 切换瓦片类型 共两个参数，依次为：切换后的 type、切换前的 type。

← LDrawLayer →