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 更新方式
- 首先更改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
}
}
- sprite使用方法
如果指定"sprite": "https://example.com/sprite"，渲染器将加载https://example.com/sprite.json作为配置
https://example.com/sprite.png作为精灵图