卧槽！MapLibre GL JS，逆天的交互式地图库，矢量图块渲染，PC端、移动端全覆盖！

大家好，我是「程序视点」爱分享的小二哥~

不知道大家对交互式地图了解得如何。最近小二哥的工作内容恰好涉及到这个内容。这里分享给大家！

读者小伙伴可能不太了解交互式地图会涉及到哪些东西。举个例子：百度地图、腾讯地图、高德用过吧！搜寻位置、开车导航等功能，都是在和地图做交互。

在网上查阅资料后，最终选择了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 模块。

javascript 复制代码

<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数据点就是重点！这里看个初始化渲染的代码示例。

arduino 复制代码

//原始数据
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')，用以重新渲染

scss 复制代码

//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可以引发的不同类型的事件(这个蛮重要的)。

内容特别多，但好在许多部分都包括有内联代码示例。大家完全不用慌。

好啦!今天的内容先到这里了。后续小二哥项目中有新的进度，再来和大家分享！

最后

欢迎