MapLibre的使用

最新推荐文章于 2025-04-02 12:00:24 发布

青青子衿~~

最新推荐文章于 2025-04-02 12:00:24 发布

阅读量7k

点赞数 5

分类专栏：前端 maplibre webGL 文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/weixin_45727272/article/details/124494563

版权

前端同时被 3 个专栏收录

54 篇文章

订阅专栏

webGL

4 篇文章

订阅专栏

maplibre

1 篇文章

订阅专栏

MapLibre

1.初始化地图

引入maplibre-gl.js
创建一个地图容器
实例化地图

	<body>
		<div id="map"></div>
		<script>
			//初始化地图实例
			var map = new maplibregl.Map({
				container: 'map', //容器的id
				style: './static/map.json', //地图描述数据的路径
				center: [0, 0], // 初始位置，经度纬度 [lng, lat]
				zoom: 1, // 初始缩放
				antialias: true, //抗锯齿
			});
			
		</script>
	</body>

2.Map渲染GeoJSON数据点

2.1 渲染流程

在map加载完毕的回调函数处理
使用addSource方法将数据添加到map上
调用addLayer方法渲染数据到地图

2.2 实例

			var map = new maplibregl.Map({
				container: 'map',
				style: './static/map2.json',
				center: [0, 0],
				zoom: 1
			});

			map.on('load', function() {
				//添加一个图片用来作为自定义的图标
				map.loadImage(
					'./static/osgeo-logo.png',
					function(error, image) {
						if (error) throw error;
                        //添加图片到map上
						map.addImage('custom-marker', image); //参数一位名称，参数二位加载的图片
						//添加GeoJSON的源数据到map上
						map.addSource('conferences', {
							'type': 'geojson',
							'data': GeoJSON
						});

						//添加一个标记的图层，将我们的source数据渲染到地图
						map.addLayer({
							'id': 'conferences',
							'type': 'symbol',
							'source': 'conferences', //这里为addSource()方法定义的名称
							'layout': {   //设置显示的样式，位置，字段等
								'icon-image': 'custom-marker',
								//从GeoJSON的数据中获取 year 属性显示
								'text-field': ['get', 'year'],
								'text-font': [
									'Open Sans Semibold',
									'Arial Unicode MS Bold'
								],
								'text-offset': [0, 1.25],
								'text-anchor': 'top'
							}
						});
					}
				);
			});

2.3 source保存位置和获取方式

注意：addSource 的数据都会添加到map上面，可通过map.getSource(‘id’)的形式获取到source数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RM4lT7Qd-1651211922157)(D:\文档\MapLibre学习\img\source.png)]

3.GeoJSON数据更新渲染

3.1 更新方式

首先更改GeoJSON，如：features字段内添加、删除、更改数据
使用map.getSource()方法获取到该GeoJSON对应的Source
将获取到的source调用setData(‘ 更改后的GeoJSON’)，用以重新渲染

3.2 实例

			//原始数据
			let GeoJSON = {
				'type': 'FeatureCollection',
				'features': [{
					'type': 'Feature',
					'geometry': {
						'type': 'Point',
						'coordinates': [100.4933, 13.7551]
					},
					'properties': {
						'year': '2004'
					}
				}, ]
			}
			//要添加的数据
			let addData = [{
					'type': 'Feature',
					'geometry': {
						'type': 'Point',
						'coordinates': [6.6523, 46.5535]
					},
					'properties': {
						'year': '2006'
					}
				},
				{
					'type': 'Feature',
					'geometry': {
						'type': 'Point',
						'coordinates': [-123.3596, 48.4268]
					},
					'properties': {
						'year': '2007'
					}
				},
			]

			var map = new maplibregl.Map({
				container: 'map',
				style: './static/map2.json',
				center: [0, 0],
				zoom: 1
			});

			map.on('load', function() {
				//添加一个图片用来作为自定义的图标
				map.loadImage(
					'./static/osgeo-logo.png',
					function(error, image) {
						if (error) throw error;
						map.addImage('custom-marker', image);

						//添加一个包含15个点GeoJSON的源数据
						map.addSource('conferences', {
							'type': 'geojson',
							'data': GeoJSON
						});

						//添加一个标记的图层
						map.addLayer({
							'id': 'conferences',
							'type': 'symbol',
							'source': 'conferences',
							'layout': {
								'icon-image': 'custom-marker',
								//从GeoJSON的数据中获取 year 属性显示
								'text-field': ['get', 'year'],
								'text-font': [
									'Open Sans Semibold',
									'Arial Unicode MS Bold'
								],
								'text-offset': [0, 1.25],
								'text-anchor': 'top'
							}
						});
						//两秒后添加点数据并更新页面
						setTimeout(() => {
							//1.首先更改GeoJSON， 向features字段内添加数据
							GeoJSON.features = GeoJSON.features.concat(addData)
							//2.获取到该GeoJSON对应的Source（这里是'conferences'）,重新渲染
							map.getSource('conferences').setData(GeoJSON)
						}, 2000)
					}
				);
			});

4.MapLibre方法

4.1 maplibregl.Map({})构造函数

地图的构造函数，通过该方法实例化地图，参数为一个对象

var map = new maplibregl.Map({
	container: 'map',
	center: [-122.420679, 37.772537],
	zoom: 13,	
	style: style_object,
});

参数	类型	值
container	string/HTMLElement	地图的容器， HTML 元素或元素的字符串 `id` 。指定的元素必须没有子元素。
center	[lng:string , lat:string]	地图的初始地理中心点，不指定默认为 `[0, 0]` 。
zoom	number	地图的缩放级别， (0-24)
style	object \| string	地图的底图，GeoJSON对象或一个指定GeoJSON对象的url

4.2 map.addSource(id,source,animate?)

添加一个源（即数据）到地图的实例上，位置在map实例的style属性上

source 源包含三种类型：

用于加载实体，点线面等数据的GeoJSON类型
用于加载河流，行政区域界线等数据的vector类型
用于加载卫星影像瓦片数据的raster类型

//加载河流等矢量数据
map.addSource('my-data', {
  type: 'vector',
  url: 'https://demotiles.maplibre.org/tiles/tiles.json'
});
//加载GeoJSON
map.addSource('my-data', {
  "type": "geojson",
  "data": {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-77.0323, 38.9131]
    },
    "properties": {
      "title": "Mapbox DC",
      "marker-symbol": "monument"
    }
  }
});

addSource参数：

id	sting	该数据的id,具有唯一性不可重复，之后可通过getSource(id) 的方式获取到该source
option	object	添加的source 的配置参数（详细信息见下表）
animate	boolean	是否开启动画，如果为true，那么该source在addLayer时的type如果为sector，那么该layder即为可动实体

option配置参数

参数	类型	值
type	string	用于加载实体，点线面等数据的`GeoJSON`,加载河流，行政区域界线等数据的`vector`,加载卫星影像瓦片数据的`raster`类型
data	object	加载GeoJSON 的数据
url	string	加载河流等矢量数据的url

4.3 map.addLayer(option，beforeId)

将addSource()方法添加到map上的source作为图层添加到地图上渲染显示，并可以对source 指定渲染的样式

/** 
	* map.addLayer() 方法去将源定义的点线面等添加到图层,参数为一个对象
	* 参数中描述要添加图层的类型，来自于哪个源，颜色透明度等样式
 * */
	map.addLayer({
	'id': 'park-boundary',
	'type': 'fill',
	'source': 'national-park',
	'paint': {
			'fill-color': '#00ff7f',
			'fill-opacity': 0.4
	     },
	'filter': ['==', '$type', 'Polygon']
  });

参数1 option : 为一个对象，用来设置要显示的source和显示形式的配置，配置项如下：

参数	类型	值
id	string	该图层的id，具有唯一性
type	string	图层渲染的类型，如线，填充，圆圈等，必须是`background`、`fill`、`line`、`symbol`、`raster`、`circle`、`fill-extrusion`、`heatmap`、`hillshade`、`sector`(公司自己的拓展，用于动画)之一
source	string \|object	图层的数据源，即addSource的数据（使用source的id）或直接使用一个源对象
paint	object	图层的绘制属性，设置图层的样式，文字、图标、线段颜色，字体，对齐属性，
filter	array	用于过滤筛洗源数据中的部分进行展示，为一个数据表达式
layout	object	图层的布局属性,

参数2 beforeId: string ，图层的名称，表示将当前图层添加到该图层的前面，即新的图层在目标图层的下方

4.4 map.on(type,layer?,listener)

为指定类型的事件添加侦听器，也可以为指定图层添加事件侦听

// 地图加载完毕事件
map.on('load', function() {
    console.log('地图初始化完成')
  });
});

//地图点击事件
map.on('click', function(e) {
	console.log('点击了地图')
});

//地图某图层点击事件,这里是点击了 `ciuntries` 图层触发事件
map.on('click', 'countries', function(e) {
	console.log('点击了countries图层')
});

4.5 map.remove()

清除释放地图实例上的所有内部资源，包括DOM元素、事件绑定、web worker和WebGL资源。

5. 加载精灵图

5.1流程

首先map 的style 的json数据上添加一个sprite 属性：值为一个url，连接一个精灵图的图片

sprite: "http://localhost/sprite"

需要一个对该精灵图的描述JSON文件，其中包含 sprite 中包含的每个图像的描述

{
    //图片的名称，在icon-image字段使用
	"07cc1223-3884-b8b5-1c63-71e82c1fa8b1-1": {
		"height": 40,    //图片的高度
		"pixelRatio": 1, //像素比
		"width": 40,     //图片的宽度
		"x": 0,          //要使用图片的x
		"y": 0  		 //要使用图片的y
	}
}