什么是快乐星球(介绍一下mapbox)...

Mapbox是一个基于云的地图平台，提供开发人员在他们的应用程序中集成地图，并提供各种地图样式、地图数据和地理编码服务。Mapbox的地图可用于各种应用程序、网站和移动应用中，包括路线规划、导航、地点搜索、位置定位、数据可视化等。

Mapbox以开源和透明度为基础，为开发人员提供了无限制的灵活性和个性化定制。Mapbox的API易于使用、精确和平滑，并支持多种开发语言和平台。此外，Mapbox还提供了开发人员工具和SDK，以便他们在开发地图应用程序时更轻松、更高效。

总体而言，Mapbox是一个基于云的地图平台，允许开发人员自定义地图和地理信息，并将其集成到其应用程序中，以提供优秀的地图体验。

 怎么初始化一个mapbox地图呢？

1.首先你得在mapbox上获取一个apikey，类似于高德，腾讯地图的key。

mapbox官网：Examples | Mapbox GL JS | Mapbox

2.引入mapbox的css,js的cdn，如：

<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.0/mapbox-gl.css' rel='stylesheet'/>

3.现在可以进入代码部分了，如：

  3.1: 新建一个用来存放地图的容器(记住这个ID，要考)。

<div id='map' style='width: 100vw; height: 70vh;'></div>

  3.2:实例化一个map对象。

 // 创建一个mapbox实例
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: arr,
        zoom: 18
    });

 给各位靓仔解释一下：

        container:就是我们上述要考的容器id了。

        style: mapbox自定义程度极高，这个示例用的是官方的地图style，博主用的是公司根据mapbox制定的格式制作的style(这个就不方便展示了)。

        center: 地图的中心点。

        zoom: 地图层级。

到这一步就差不多可以实现地图了，下面介绍一些地图操作。 

 GEOJSON

       前言：

                想要搞一些地图骚操作就避免不了要介绍一下GEOJSON了

      介绍：

GeoJSON是一种开放标准的地理信息数据交换格式，它允许将地理数据以JSON对象的形式进行编码和传输。 GeoJSON文件包含了表示地理空间数据的几何对象（如点、线、面等）和属性信息，可以用于描述不同的地理特征，例如位置、区域、建筑等。

GeoJSON的格式非常简洁，易于阅读和编写，也非常易于在Web和移动平台上处理和使用。GeoJSON的几何对象可以轻松地呈现在地图上，并且属性信息可以与地理空间数据进行联合查询和分析。

GeoJSON格式需要遵循一些规范。它使用一组预定义的关键字来描述不同类型的地理空间数据，例如 经度和纬度用于表示点、线或面的坐标。GeoJSON文件还包含了用于描述属性数据的属性表，在属性表中可以包含任意类型的数据，例如文本、数字、日期等。

总的来说，GeoJSON是一种非常流行和有用的格式，广泛应用于Web应用程序和地理信息系统开发中，可以方便地进行存储、交换和使用各种类型的地理信息数据。

算了，chatGPT介绍的太官方了，总的来说，GeoJSON就是用来存放地理信息数据的，下面简单介绍一下格式。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "name": "Example Point",
        "description": "This is an example GeoJSON point feature."
      }
    }
  ]
}

解释：

"type" "Feature"表示一个特征要素，"FeatureCollection"表示为特征要素的集合。

"geometry"：存储该特征要素的实际形状描述。

"geometry -> type"：存储要素类型，分为：Point(点),LineString,Polygon,MultiPoint(多点),MultiLineString(多线)和MultiPolygon(多面)。

"coordinates "：坐标（存储图形坐标)。

"properties"：属性，用来存放自定义的属性，比如上述代码的name，description。

"features[0].type"：

1. "Point"：表示一个点，包含一个坐标对（longitude, latitude）。
2. "MultiPoint"：表示多个点，每个点包含一个坐标对。
3. "LineString"：表示一条线，包含多个坐标对。
4. "MultiLineString"：表示多条线，每条线包含多个坐标对。
5. "Polygon"：表示一个多边形，包含一个坐标对数组，第一个和最后一个坐标对相同。
6. "MultiPolygon"：表示多个多边形，每个多边形包含一个坐标对数组，第一个和最后一个坐标对相同。
7. "GeometryCollection"：表示多个几何对象的集合。
8. "Feature"：表示一个地理特征，包含一个 geometry 对象和一个 properties 对象。
9. "FeatureCollection"：表示多个地理特征的集合，每个特征包含一个 geometry 对象和一个 properties 对象。

 可以看看官方怎么说。

正题

1.使用mapbox创建一个标记点。

function updateLoaction(map,url,lat = [],width=40,height=40) {
    const marker = geojson.features[0]
    const el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = `url(${url})`
    el.style.width = `${width}px`;
    el.style.height = `${height}px`;
    el.style.backgroundSize = '100%';

    return new mapboxgl.Marker(el)
        .setLngLat(lat.length ? lat : marker.geometry.coordinates)
        .addTo(map);
}

不难看出啊，这是俺封装的一个新建marker标记点，简单介绍一下。

方法里的参数：

map(指上文的map对象，因为我把这个方法封装到别的js里面去了)  url(marker的图片地址，也可以通过官方提供的loadImage方法将图片上传到map) ,lat(一个坐标数组，注意：mapbox里面使用的不是3857嗷，是使用的经纬度坐标，所以是一个数组)  后续的width和height就不多介绍了，dddd。

 由此可见啊，上述方法还是mapbox对DOM元素进行了操作，有兴趣的朋友可以多研究研究，这次就不多介绍了，主打就是一个带你们简单瞅瞅mapbox和浅浅的了解一下。

return new mapboxgl.Marker(el)
    .setLngLat(lat.length ? lat : marker.geometry.coordinates)
    .addTo(map);

关键方法： el ： marker这个DOM元素。

setLngLat里面传入的是 marker的坐标。

map则是上文的map对象了。

2. 介绍一下一些常用的map方法。

 2.1  load

map.on("load",(e)=>{
    // TODO

})

是的，很熟悉，load方法=>load(加载)，这里的load方法是mapbox提供的地图加载完成之后的一个回调。

2.2 data

map.on("data",(e)=>{
    //TODO

})

 mapbox提供的数据源加载完成之后的回调

2.3 click

map.on("click",layerId,(e)=>{
    // TODO
})

 图层点击事件，layerId是图层id，注意，id的意义是唯一性，不能重复了，获取图层的方法:map.getStyle().layer，e这个参数，你们自己摸索，很有意思的。

 总结：滴，就到这里，摸鱼~