大家好，我是「程序视点」爱分享的小二哥~
不知道大家对交互式地图了解得如何。最近小二哥的工作内容恰好涉及到这个内容。这里分享给大家！
读者小伙伴可能不太了解交互式地图会涉及到哪些东西。举个例子：百度地图、腾讯地图、高德用过吧！搜寻位置、开车导航等功能，都是在和地图做交互。
在网上查阅资料后，最终选择了MapLibre GL JS这个库！
主要是两个原因：1，需要处理与地图的样式和图层进行交互，响应事件，以及使用相机操作用户的视角；2，后续有向IOS和Android端扩展的需求。
MapLibre GL JS简介
MapLibre GL JS 是一个用于在网站上发布地图的开源 TypeScript 库，它使用 WebGL 在浏览器中从矢量图块渲染交互式地图，由于 GPU 加速的矢量切片渲染，它性能卓越。
MapLibre GL JS地图的自定义符合 MapLibre 样式规范。它是 MapLibre 生态系统的一部分，带有一个名为 MapLibre Native 的移动、桌面、服务器挂件–这对后续向IOS和Android端扩展非常有帮助。
安装和使用
安装
过 NPM 安装 MapLibre GL JS 包。
npm install maplibre-gl
然后，您可以在项目中导入 MapLibre GL JS 模块。
<div id="map"></div>
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
const map = new maplibregl.Map({
container: 'map', //容器的id
style: './static/map.json', //地图描述数据的路径
center: [0, 0], // 初始位置，经度纬度 [lng, lat]
zoom: 1, // 初始缩放
antialias: true, //抗锯齿
});
这样就创建一个地图容器，并实例化地图了。
这才只是开始！要使用MapLibre GL JS地图，先要了解它的渲染流程：Map渲染GeoJSON数据点。
- 在map加载完毕的回调函数处理
- 使用addSource方法将数据添加到map上
- 调用addLayer方法渲染数据到地图
这里的GeoJSON数据点就是重点！这里看个初始化渲染的代码示例。
//原始数据
let GeoJSON = {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [100.4933, 13.7551]
},
'properties': {
'year': '2004'
}
}, ]
}
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'
}
});
}
);
});
注意：addSource 的数据都会添加到map上面，可通过map.getSource(‘id’)的形式获取到source数据。
GeoJSON数据更新渲染
- 首先更改GeoJSON， 如：features字段内添加、删除、更改数据
- 使用map.getSource()方法获取到该GeoJSON对应的Source
- 将获取到的source调用setData(‘ 更改后的GeoJSON’)，用以重新渲染
//1.首先更改GeoJSON， 向features字段内添加数据
GeoJSON.features = GeoJSON.features.concat(addData)
//2.获取到该GeoJSON对应的Source（这里是'conferences'）,重新渲染
map.getSource('conferences').setData(GeoJSON)
以上就是MapLibre GL JS地图初始化渲染和更新渲染的操作。
但这远远不够，因为我们还要再地图上进行操作！而这一部分就是最复杂的部分，对初级选手优点难度，好在有官方的文档作为指导。
我这里就不从官网搬砖了。但要给大家归类下文档主体结果，毕竟从头读到尾的小伙伴比较少！
本文档分为几个部分：
- Main 部分包含以下类
- Map对象：是页面上的地图（就是刚才初始化的那个）。它允许您访问方法和属性，以便与地图的样式和图层进行交互，响应事件，以及使用相机操作用户的视角。
- Global Functions:允许您设置在初始化地图或访问有关地图状态的信息时，可能要
访问的全局属性和选项。
- 标记和控件：本部分介绍可添加到地图中的
用户界面元素。此部分中的项目位于地图 canvas 元素之外。它由 Marker 和 Popup 所有控件组成。 - 地理和几何：本节包括与使用和操作
地理信息或几何相关的常规实用程序和类型。 - 用户交互处理程序：此部分中的项目与地图响应用户输入的方式相关。
- 源：本节介绍MapLibre GL JS可以处理的源类型，以及MapLibre样式规范中描述的源类型。
- 事件相关：本节介绍MapLibre GL JS可以引发的不同
类型的事件(这个蛮重要的)。
内容特别多，但好在许多部分都包括有内联代码示例。大家完全不用慌。
好啦!今天的内容先到这里了。后续小二哥项目中有新的进度，再来和大家分享！
最后
后续会继续详细分享更多实用的工具和功能。关注全网同名账号【程序视点】，这样就不会错过之后的精彩内容啦！
如果这篇文章对你有帮助的话，别忘了【喜欢】【收藏】支持下哦~
