MapLibre的使用

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 更新方式

  1. 首先更改GeoJSON, 如:features字段内添加、删除、更改数据
  2. 使用map.getSource()方法获取到该GeoJSON对应的Source
  3. 将获取到的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 源包含三种类型:

  1. 用于加载实体,点线面等数据的GeoJSON类型
  2. 用于加载河流,行政区域界线等数据的vector类型
  3. 用于加载卫星影像瓦片数据的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 图层渲染的类型,如线,填充,圆圈等,必须是backgroundfilllinesymbolrastercirclefill-extrusionheatmaphillshadesector(公司自己的拓展,用于动画)之一
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流程

  1. 首先map 的style 的json数据上添加一个sprite 属性:值为一个url,连接一个精灵图的图片
sprite: "http://localhost/sprite"
  1. 需要一个对该精灵图的描述JSON文件,其中包含 sprite 中包含的每个图像的描述
{
    //图片的名称,在icon-image字段使用
	"07cc1223-3884-b8b5-1c63-71e82c1fa8b1-1": {
		"height": 40,    //图片的高度
		"pixelRatio": 1, //像素比
		"width": 40,     //图片的宽度
		"x": 0,          //要使用图片的x
		"y": 0  		 //要使用图片的y
	}
}
  1. sprite使用方法

如果指定"sprite": "https://example.com/sprite",渲染器将加载https://example.com/sprite.json作为配置

https://example.com/sprite.png作为精灵图

你可能感兴趣的:(前端,maplibre,webGL,ui,vue.js,javascript)